преобразовать объект в массив с помощью lodash

Как я могу превратить большой objectв arrayс lodash?

var obj = {
  22: {name:"John", id:22, friends:[5,31,55], works:{books:[], films:[],}
  12: {name:"Ivan", id:12, friends:[2,44,12], works:{books:[], films:[],}
}

// transform to 
var arr = [{name:"John", id:22...},{name:"Ivan", id:12...}]

Ты можешь сделать

var arr = _.values(obj);

Для документации см. Здесь.

_.toArray(obj);

Выходы как:

[
  {
    "name": "Ivan",
    "id": 12,
    "friends": [
      2,
      44,
      12
    ],
    "works": {
      "books": [],
      "films": []
    }
  },
  {
    "name": "John",
    "id": 22,
    "friends": [
      5,
      31,
      55
    ],
    "works": {
      "books": [],
      "films": []
    }
  }
]"

Современное нативное решение, если кому-то интересно:

const arr = Object.keys(obj).map(key => ({ key, value: obj[key] }));

или (не IE):

const arr = Object.entries(obj).map(([key, value]) => ({ key, value }));

Для меня это сработало:

_.map(_.toPairs(data), d => _.fromPairs([d]));

Получается

{"a":"b", "c":"d", "e":"f"} 

в

[{"a":"b"}, {"c":"d"}, {"e":"f"}]

Есть немало способов получить желаемый результат. Давайте разбить их на категории:

Только значения ES6 :

Основным методом для этого является Object.values . Но используя Object.keys и Array.map, вы также можете получить ожидаемый результат:

Object.values(obj)
Object.keys(obj).map(k => obj[k])

var obj = {
  A: {
    name: "John"
  },
  B: {
    name: "Ivan"
  }
}

console.log('Object.values:', Object.values(obj))
console.log('Object.keys:', Object.keys(obj).map(k => obj[k]))

ES6 Key & Value :

Используя карту и ES6 динамические / вычисленные свойства и деструктурирование, вы можете сохранить ключ и вернуть объект с карты.

Object.keys(obj).map(k => ({[k]: obj[k]}))
Object.entries(obj).map(([k,v]) => ({[k]:v}))

var obj = {
  A: {
    name: "John"
  },
  B: {
    name: "Ivan"
  }
}

console.log('Object.keys:', Object.keys(obj).map(k => ({
  [k]: obj[k]
})))
console.log('Object.entries:', Object.entries(obj).map(([k, v]) => ({
  [k]: v
})))

Только Lodash Values :

Метод, разработанный для этого, _.valuesоднако, есть как «горячие клавиши» _.mapи вспомогательный метод, _.toArrayкоторый также возвращает массив, содержащий только значения из объекта. Вы могли бы также , _.mapхотя _.keysи получить значения из объекта с помощью obj[key]нотации.

Примечание: _.mapпри передаче объект будет использовать свой baseMapобработчик, который в основном зависит forEachот свойств объекта.

_.values(obj)
_.map(obj)
_.toArray(obj)
_.map(_.keys(obj), k => obj[k])

var obj = {
  A: {
    name: "John"
  },
  B: {
    name: "Ivan"
  }
}

console.log('values:', _.values(obj))
console.log('map:', _.map(obj))
console.log('toArray:', _.toArray(obj))
console.log('keys:', _.map(_.keys(obj), k => obj[k]))

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

Lodash Key & Value :

// Outputs an array with [[KEY, VALUE]]
_.entries(obj)
_.toPairs(obj)

// Outputs array with objects containing the keys and values
_.map(_.entries(obj), ([k,v]) => ({[k]:v}))
_.map(_.keys(obj), k => ({[k]: obj[k]}))
_.transform(obj, (r,c,k) => r.push({[k]:c}), [])
_.reduce(obj, (r,c,k) => (r.push({[k]:c}), r), [])

var obj = {
  A: {
    name: "John"
  },
  B: {
    name: "Ivan"
  }
}

// Outputs an array with [KEY, VALUE]
console.log('entries:', _.entries(obj))
console.log('toPairs:', _.toPairs(obj))

// Outputs array with objects containing the keys and values
console.log('entries:', _.map(_.entries(obj), ([k, v]) => ({
  [k]: v
})))
console.log('keys:', _.map(_.keys(obj), k => ({
  [k]: obj[k]
})))
console.log('transform:', _.transform(obj, (r, c, k) => r.push({
  [k]: c
}), []))
console.log('reduce:', _.reduce(obj, (r, c, k) => (r.push({
  [k]: c
}), r), []))

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

Обратите внимание, что в приведенных выше примерах используется ES6 (функции стрелок и динамические свойства). Вы можете использовать lodash _.fromPairsи другие методы для создания объекта, если ES6 является проблемой.

Если вы хотите, чтобы ключ (в данном случае id) был сохранен как свойство каждого элемента массива, вы можете сделать

const arr = _(obj) //wrap object so that you can chain lodash methods
            .mapValues((value, id)=>_.merge({}, value, {id})) //attach id to object
            .values() //get the values of the result
            .value() //unwrap array of objects

Обновление 2017: Object.values , значения lodash и toArray делают это. А для сохранения ключей карты и распространения оператора играть приятно:

// import { toArray, map } from 'lodash'
const map = _.map

const input = {
  key: {
    value: 'value'
  }
}

const output = map(input, (value, key) => ({
  key,
  ...value
}))

console.log(output)
// >> [{key: 'key', value: 'value'}])

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>

Преобразование объекта в массив с помощью простого JavaScript ( ECMAScript-2016) Object.values:

var obj = {
    22: {name:"John", id:22, friends:[5,31,55], works:{books:[], films:[]}},
    12: {name:"Ivan", id:12, friends:[2,44,12], works:{books:[], films:[]}}
}

var values = Object.values(obj)

console.log(values);

Если вы также хотите сохранить использование ключей Object.entriesи Array#mapвот так:

var obj = {
    22: {name:"John", id:22, friends:[5,31,55], works:{books:[], films:[]}},
    12: {name:"Ivan", id:12, friends:[2,44,12], works:{books:[], films:[]}}
}

var values = Object.entries(obj).map(([k, v]) => ({[k]: v}))

console.log(values);

var arr = _.map(obj)

Вы также можете использовать _.mapфункцию (и того lodashи другого underscore) object, она будет внутренне обрабатывать этот случай, перебирать каждое значение и ключ с вашим итератором и, наконец, возвращать массив. Infact, вы можете использовать его без каких-либо итераторов (просто _.map(obj)), если вы просто хотите массив значений. Хорошая часть заключается в том, что если вам нужно какое-то преобразование между ними, вы можете сделать это за один раз.

Пример:

var obj = {
    key1: {id: 1, name: 'A'},
    key2: {id: 2, name: 'B'},
    key3: {id: 3, name: 'C'}
};

var array1 = _.map(obj, v=>v);
console.log('Array 1: ', array1);

/*Actually you don't need the callback v=>v if you
are not transforming anything in between, v=>v is default*/

//SO simply you can use
var array2 = _.map(obj);
console.log('Array 2: ', array2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>

Однако, если вы хотите преобразовать свой объект, вы можете сделать это, даже если вам нужно сохранить ключ, вы можете сделать это ( _.map(obj, (v, k) => {...}) с дополнительным аргументом mapи затем использовать его по своему усмотрению.

Однако существуют другие решения Vanilla JS для этого (так как каждое lodashрешение должно иметь чистую версию JS), например:

• Object.keysа затем mapих значения
• Object.values (в ES-2017)
• Object.entriesа затем mapкаждая пара ключ / значение (в ES-2017)
• for...in зацикливание и использование каждой клавиши для получения значений

И многое другое. Но поскольку этот вопрос предназначен lodash(и предполагается, что кто-то уже использует его), вам не нужно много думать о версии, поддержке методов и обработке ошибок, если они не найдены.

Существуют и другие решения типа lodash, такие как _.values(более читабельные для конкретных целей), или получение пар, а затем отображение и так далее. но в том случае, если вашему коду требуется гибкость, чтобы вы могли обновлять его в будущем, когда вам нужно keysнемного сохранить или преобразовать значения, тогда лучшим решением будет использование одного, _.mapкак указано в этом ответе. Это будет не так сложно, с точки зрения читабельности.

Объект для массива

Из всех ответов я думаю, что этот самый лучший:

let arr = Object.entries(obj).map(([key, val]) => ({ key, ...val }))

что превращает:

{
  a: { p: 1, q: 2},
  b: { p: 3, q: 4}
}

чтобы:

[
  { key: 'a', p: 1, q: 2 }, 
  { key: 'b', p: 3, q: 4 }
]

Массив к объекту

Чтобы преобразовать обратно:

let obj = arr.reduce((obj, { key, ...val }) => { obj[key] = { ...val }; return obj; }, {})

Чтобы преобразовать обратно, сохраняя ключ в значении:

let obj = arr.reduce((obj, { key, ...val }) => { obj[key] = { key, ...val }; return obj; }, {})

Дам:

{
  a: { key: 'a', p: 1, q: 2 },
  b: { key: 'b', p: 3, q: 4 }
}

В последнем примере вы также можете использовать lodash _.keyBy(arr, 'key')или _.keyBy(arr, i => i.key).

Если вам нужно какое-то пользовательское отображение (например, оригинальный Array.prototype.map) объекта в массив, вы можете просто использовать _.forEach:

let myObject = {
  key1: "value1",
  key2: "value2",
  // ...
};

let myNewArray = [];

_.forEach(myObject, (value, key) => {
  myNewArray.push({
    someNewKey: key,
    someNewValue: value.toUpperCase() // just an example of new value based on original value
  });
});

// myNewArray => [{ someNewKey: key1, someNewValue: 'VALUE1' }, ... ];

Видеть lodash документ _.forEach https://lodash.com/docs/#forEach