transformer l'objet en tableau avec lodash

Comment puis-je transformer un gros objecten arrayavec 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...}]

Tu peux faire

var arr = _.values(obj);

Pour la documentation, voir ici.

_.toArray(obj);

Sorties comme:

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

Une solution native moderne si quelqu'un est intéressé:

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

ou (pas IE):

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

Pour moi, cela a fonctionné:

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

Ça tourne

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

dans

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

Il existe plusieurs façons d'obtenir le résultat que vous recherchez. Permet de les diviser en catégories:

Valeurs ES6 uniquement :

La méthode principale pour cela est Object.values . Mais en utilisant Object.keys et Array.map, vous pouvez également obtenir le résultat attendu:

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]))

Clé et valeur ES6 :

En utilisant la carte et les propriétés dynamiques / calculées ES6 et la déstructuration, vous pouvez conserver la clé et renvoyer un objet à partir de la carte.

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
})))

Valeurs Lodash uniquement :

La méthode conçue pour cela est _.valuescependant qu'il existe des "raccourcis" comme _.mapet la méthode utilitaire _.toArrayqui renverrait également un tableau contenant uniquement les valeurs de l'objet. Vous pouvez également utiliser _.maple _.keyset obtenir les valeurs de l'objet en utilisant la obj[key]notation.

Remarque: une _.mapfois passé, un objet utilise son baseMapgestionnaire qui est essentiellement forEachsur les propriétés de l'objet.

_.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>

Clé et valeur Lodash :

// 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>

Notez que dans les exemples ci-dessus, ES6 est utilisé (fonctions fléchées et propriétés dynamiques). Vous pouvez utiliser lodash _.fromPairset d'autres méthodes pour composer un objet si ES6 est un problème.

Si vous voulez que la clé (id dans ce cas) soit préservée en tant que propriété de chaque élément du tableau, vous pouvez le faire

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

Mise à jour 2017: Object.values , lodash values et toArray le font. Et pour conserver la carte des touches et répartir l'opérateur, jouez bien:

// 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>

Transformer un objet en tableau avec du JavaScript brut ( 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);

Si vous souhaitez également conserver les clés, utilisez Object.entrieset Array#mapcomme ceci:

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)

Vous pouvez également utiliser la _.mapfonction (des deux lodashet underscore) avec object, elle gérera ce cas en interne, itérera sur chaque valeur et clé avec votre iteratee, et finalement retournera un tableau. En fait, vous pouvez l'utiliser sans aucune itération (juste _.map(obj)) si vous voulez juste un tableau de valeurs. L'avantage est que si vous avez besoin d'une transformation entre les deux, vous pouvez le faire en une seule fois.

Exemple:

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>

Cependant, si vous souhaitez transformer votre objet, vous pouvez le faire, même si vous devez conserver la clé, vous pouvez le faire ( _.map(obj, (v, k) => {...}) avec un argument supplémentaire dans map, puis l'utiliser comme vous le souhaitez.

Cependant, il existe d'autres solutions Vanilla JS à cela (comme chaque lodashsolution devrait en être une version JS pure) comme:

• Object.keyset puis maples valeurs
• Object.values (dans ES-2017)
• Object.entriespuis mapchaque paire clé / valeur (dans ES-2017)
• for...in boucle et utilise chaque clé pour feting des valeurs

Et beaucoup plus. Mais comme cette question est pour lodash(et en supposant que quelqu'un l'utilise déjà), vous n'avez pas besoin de beaucoup penser à la version, au support des méthodes et à la gestion des erreurs si celles-ci ne sont pas trouvées.

Il existe d'autres solutions de lodash comme _.values(plus lisibles pour un objectif spécifique), ou obtenir des paires, puis une carte, etc. mais dans le cas où votre code a besoin de flexibilité pour que vous puissiez le mettre à jour à l'avenir car vous devez conserver keysou transformer un peu les valeurs, la meilleure solution est d'en utiliser un _.mapcomme indiqué dans cette réponse. Ce ne sera pas si difficile en termes de lisibilité également.

Objet à tableau

De toutes les réponses, je pense que celle-ci est la meilleure:

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

qui transforme:

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

à:

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

Tableau à objet

Pour reconstituer:

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

Pour reconstituer en gardant la clé dans la valeur:

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

Va donner:

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

Pour le dernier exemple, vous pouvez également utiliser lodash _.keyBy(arr, 'key')ou _.keyBy(arr, i => i.key).

Si vous souhaitez un mappage personnalisé (comme Array.prototype.map original) d'Object dans un Array, vous pouvez simplement utiliser _.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' }, ... ];

Voir lodashdoc de _.forEach https://lodash.com/docs/#forEach