Objekt mit lodash in Array umwandeln

Wie kann ich eine große Transformation objectzu arraymit 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...}]

Du kannst tun

var arr = _.values(obj);

Dokumentation finden Sie hier.

_.toArray(obj);

Ausgaben als:

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

Eine moderne native Lösung, wenn jemand interessiert ist:

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

oder (nicht IE):

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

Für mich hat das funktioniert:

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

Es wendet sich

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

in

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

Es gibt viele Möglichkeiten, um das gewünschte Ergebnis zu erzielen. Teilen wir sie in Kategorien ein:

Nur ES6-Werte :

Hauptmethode hierfür ist Object.values . Mit Object.keys und Array.map können Sie jedoch auch das erwartete Ergebnis erzielen :

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 Schlüssel & Wert :

Mithilfe der dynamischen / berechneten Eigenschaften und der Destrukturierung von Map und ES6 können Sie den Schlüssel beibehalten und ein Objekt von der Map zurückgeben.

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

Nur Lodash-Werte :

Die dafür entwickelte Methode ist _.valuesjedoch, dass es "Verknüpfungen" wie gibt_.map und die Utility-Methode gibt, _.toArraydie auch ein Array zurückgeben würde, das nur die Werte vom Objekt enthält. Man könnte auch _.mapwenn die _.keysund die Werte aus dem Objekt erhalten , indem die Verwendung von obj[key]Notation.

Hinweis: _.mapWenn ein Objekt übergeben wird, wird es verwendetbaseMap Handler, der sich im Wesentlichen forEachauf den Objekteigenschaften befindet.

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

Beachten Sie, dass in den obigen Beispielen ES6 verwendet wird (Pfeilfunktionen und dynamische Eigenschaften). Sie können lodash verwenden_.fromPairs und andere Methoden verwenden, um ein Objekt zu , wenn ES6 ein Problem darstellt.

Wenn Sie möchten, dass der Schlüssel (in diesem Fall die ID) als Eigenschaft jedes Array-Elements erhalten bleibt, können Sie dies tun

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

Update 2017: Object.values , lodash values und toArray machen es. Und Schlüssel zu bewahren Karte und Verbreitung Betreiber Spiel schön:

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

Transformieren eines Objekts in ein Array mit einfachem 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);

Wenn Sie auch die Schlüssel verwenden möchten Object.entriesund dies Array#mapmögen:

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)

Sie können auch die _.mapFunktion (von beiden lodashund underscore) verwenden object. Sie behandelt diesen Fall intern, iteriert mit Ihrem Iterat über jeden Wert und Schlüssel und gibt schließlich ein Array zurück. Tatsächlich können Sie es ohne Iteration (nur _.map(obj)) verwenden, wenn Sie nur ein Array von Werten möchten. Der gute Teil ist, dass Sie, wenn Sie eine Transformation dazwischen benötigen, dies auf einmal tun können.

Beispiel:

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>

Wenn Sie Ihr Objekt jedoch transformieren möchten, können Sie dies tun, auch wenn Sie den Schlüssel beibehalten müssen. Sie können dies ( _.map(obj, (v, k) => {...}) mit einem zusätzlichen Argument tun mapund es dann verwenden, wie Sie möchten.

Es gibt jedoch andere Vanilla JS-Lösungen dafür (da jede lodashLösung eine reine JS-Version davon haben sollte) wie:

• Object.keysund dann mapsie zu Werten
• Object.values (in ES-2017)
• Object.entriesund dann mapjedes Schlüssel / Wert-Paar (in ES-2017)
• for...in Schleife und verwenden Sie jede Taste zum Abrufen von Werten

Und vieles mehr. Da diese Frage jedoch für lodash(und vorausgesetzt, jemand verwendet sie bereits) gilt, müssen Sie nicht viel über die Version, die Unterstützung von Methoden und die Fehlerbehandlung nachdenken, wenn diese nicht gefunden werden.

Es gibt andere Lodash-Lösungen wie _.values(für bestimmte Zwecke besser lesbar) oder Paare abrufen und dann zuordnen und so weiter. Für den Fall, dass Ihr Code flexibel sein muss, damit Sie ihn in Zukunft aktualisieren können, da Sie keysWerte ein wenig beibehalten oder transformieren müssen, ist die beste Lösung, einen einzelnen _.mapCode als Adresse in dieser Antwort zu verwenden. Das wird auch in Bezug auf die Lesbarkeit nicht so schwierig sein.

Objekt zum Array

Von allen Antworten halte ich diese für die beste:

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

das verwandelt:

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

zu:

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

Array zu Objekt

Um sich zurück zu verwandeln:

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

So transformieren Sie zurück und behalten den Schlüssel im Wert:

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

Wird geben:

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

Für das letzte Beispiel können Sie auch lodash _.keyBy(arr, 'key')oder verwenden _.keyBy(arr, i => i.key).

Wenn Sie eine benutzerdefinierte Zuordnung (wie die ursprüngliche Array.prototype.map) von Object zu einem Array wünschen, können Sie einfach Folgendes verwenden _.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' }, ... ];

Siehe lodashDokument von _.forEach https://lodash.com/docs/#forEach