mengubah objek menjadi array dengan lodash

Bagaimana saya bisa mengubah besar objectmenjadi arraydengan 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...}]

Anda dapat melakukan

var arr = _.values(obj);

Untuk dokumentasi lihat di sini.

_.toArray(obj);

Output sebagai:

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

Solusi asli modern jika ada yang tertarik:

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

atau (bukan IE):

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

Bagi saya, ini berhasil:

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

Itu berputar

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

ke

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

Ada beberapa cara untuk mendapatkan hasil yang Anda kejar. Mari kita pecahkan dalam kategori:

Nilai ES6 saja :

Metode utama untuk ini adalah Object.values . Tetapi menggunakan Object.keys dan Array.map Anda juga bisa mendapatkan hasil yang diharapkan:

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

Nilai & Nilai ES6 :

Menggunakan peta dan ES6 dinamis / sifat-sifat yang dikomputasi dan perusakan Anda dapat mempertahankan kunci dan mengembalikan objek dari peta.

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

Hanya Nilai Lodash :

Metode yang dirancang untuk ini adalah _.valuesada "pintas" seperti _.mapdan metode utilitas _.toArrayyang juga akan mengembalikan array yang hanya berisi nilai-nilai dari objek. Anda juga bisa _.mapmelihat _.keysdan mendapatkan nilai dari objek dengan menggunakan obj[key]notasi.

Catatan: _.mapketika melewati sebuah objek akan menggunakan baseMaphandlernya yang pada dasarnya forEachberada di properti objek.

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

Nilai & Nilai 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>

Perhatikan bahwa dalam contoh di atas ES6 digunakan (fungsi panah dan properti dinamis). Anda bisa menggunakan lodash _.fromPairsdan metode lain untuk membuat objek jika ES6 merupakan masalah.

Jika Anda ingin kunci (id dalam hal ini) dipertahankan sebagai properti dari setiap item array yang dapat Anda lakukan

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

Pembaruan 2017: Object.values , nilai lodash, dan toArray melakukannya. Dan untuk melestarikan kunci peta dan menyebar operator bermain bagus:

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

Mengubah objek menjadi array dengan JavaScript biasa ( 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);

Jika Anda juga ingin tetap menggunakan tombol Object.entriesdan Array#mapsuka ini:

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)

Anda dapat menggunakan _.mapfungsi (keduanya lodashdan underscore) dengan objectjuga, itu akan menangani kasus itu secara internal, beralih ke setiap nilai dan kunci dengan iterate Anda, dan akhirnya mengembalikan array. Infact, Anda dapat menggunakannya tanpa iteratee (adil)_.map(obj) ) jika Anda hanya menginginkan array nilai. Bagian baiknya adalah bahwa, jika Anda memerlukan transformasi apa pun di antaranya, Anda dapat melakukannya dalam sekali jalan.

Contoh:

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>

Namun, jika Anda ingin mengubah objek Anda dapat melakukannya, bahkan jika Anda perlu mempertahankan kunci, Anda dapat melakukannya ( _.map(obj, (v, k) => {...}) dengan argumen tambahan di mapdan kemudian menggunakannya seperti yang Anda inginkan.

Namun ada solusi Vanilla JS lainnya untuk ini (karena setiap lodashsolusi harus ada versi JS murni itu) seperti:

• Object.keysdan kemudian mapmereka untuk nilai
• Object.values (dalam ES-2017)
• Object.entries lalu map setiap pasangan kunci / nilai (dalam ES-2017)
• for...in lingkaran dan gunakan setiap tombol untuk nilai feting

Dan masih banyak lagi. Tapi karena pertanyaan ini untuklodash (dan mengasumsikan seseorang sudah menggunakannya) maka Anda tidak perlu berpikir banyak tentang versi, mendukung metode dan penanganan kesalahan jika tidak ditemukan.

Ada solusi lodash lain seperti _.values(lebih mudah dibaca untuk perpose tertentu), atau mendapatkan pasangan dan kemudian memetakan dan sebagainya. tetapi dalam hal kode Anda memerlukan fleksibilitas agar Anda dapat memperbaruinya di masa depan karena Anda perlu sedikit melestarikan keysatau mengubah nilai, maka solusi terbaik adalah menggunakan satu _.mapseperti ditambahkan dalam jawaban ini. Itu tidak akan terlalu sulit karena mudah dibaca juga.

Objek untuk Array

Dari semua jawaban saya pikir yang ini adalah yang terbaik:

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

yang mengubah:

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

untuk:

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

Array ke Objek

Untuk mengubah kembali:

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

Untuk mengubah kembali menjaga kunci dalam nilai:

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

Akan memberi:

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

Untuk contoh terakhir Anda juga dapat menggunakan lodash _.keyBy(arr, 'key')atau _.keyBy(arr, i => i.key).

Jika Anda ingin pemetaan khusus (seperti Array.prototype.map) asli dari Obyek menjadi Array, Anda bisa menggunakan _.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' }, ... ];

Lihat lodashdokumen _.forEach https://lodash.com/docs/#forEach