Ubah array dalam javascript menjadi objek yang lebih sederhana

17

Saya memiliki JSON sederhana dengan array yang berisi objek lebih lanjut, dll. Seperti ini:

languagePack:
[
  {
    'key': 'Username',
    'value': 'Benutzername',
    'group': 'default'
  },
  {
    'key': 'Password',
    'value': 'Passwort',
    'group': 'default'
  }
]

Tapi yang benar-benar saya inginkan adalah objek seperti ini:

languagePack: 
{
    'Username': 'Benutzername',
    'Password': 'Passwort'
}

Jadi, saya ingin mengurangi array menjadi pasangan kunci-nilai-sederhana yang ada di dalam array atau bahkan objek (kunci unik). Apakah ada yang punya ide bagaimana mengurangi ini dengan beberapa fungsi array keren ini? Saya hanya datang dengan sesuatu seperti untuk masing-masing dan membangun objek "dengan tangan" properti untuk properti, tapi saya ingat ada beberapa hal keren untuk array seperti 'mengurangi', operator spread (...), peta, setiap, beberapa, dll.

Saya mencobanya dengan sesuatu seperti:

var temp = this.languagePack.map(([key, value]) => ({key,value}))
console.log(temp)

Tapi itu hanya membuat saya pesan kesalahan TypeError: Invalid attempt to destructure non-iterable instance

Sunting: Ketiga jawaban bekerja dengan sangat baik. Terima kasih.

Marcel Grüger
sumber
2
Kemungkinan duplikat dari Bagaimana memformat daftar array ke json
adiga
The groupharus diabaikan?
Bergi
Ya, grup dapat diabaikan, itu hanya ide rekan kerja saya untuk menggunakan kunci yang sama di layar yang berbeda dengan terjemahan yang berbeda, tetapi saya tidak dapat menemukan penggunaan nyata untuk itu. Tapi itu pertanyaan lain untuk kemudian:
Marcel Grüger

Jawaban:

11

Pada dasarnya Anda perlu menggunakan forEachalih-alih mapfungsi dan kemudian Anda bisa membangun objek itu untuk kunci apa pun, pasangan nilai yang ingin Anda pertahankan.

Coba ini, itu akan menyelesaikan masalah Anda.

var temp = {};

this.languagePack.forEach(({key,value}) => {
    temp[key] = value
})

console.log(temp)

Catatan: Di sini kita tidak menggunakan mapkarena kita ingin mengembalikan objek bukan array, jadi, kita dapat menggunakan reducefungsi di sini untuk melakukannya, tapi saya pikir ini akan sederhana dan mudah untuk memahami apa yang kita inginkan dan apa yang kita lakukan di sini.

ma_dev_15
sumber
10

Anda dapat menggunakan reducefungsi javascript untuk membuat objek kosong dan memasukkan setiap kunci dan nilai di dalamnya.

const data = [
  {
    'key': 'Username',
    'value': 'Benutzername',
    'group': 'default'
  },
  {
    'key': 'Password',
    'value': 'Passwort',
    'group': 'default'
  }
];

const newData = data.reduce((acc, row) => {
  acc[row.key] = row.value;
  return acc;
}, {});

console.log(newData);

Sunting: Saran bagus dari Donny Verduijn . Anda dapat menggunakan es6 destructure untuk menulis fungsi lebih pendek.

const newData = data.reduce((acc, { key, value }) => ({ ...acc, [key]: value }), {});
Maxime Girou
sumber
3
Jika Anda ingin menggunakan sintaks ES6, Anda juga dapat menerapkan fungsi pengurangan dengan cara ini(acc, { key, value }) => ({ ...acc, [key]: value })
Donny Verduijn
1
Anda juga dapat menggunakan operator koma untuk menghindari pengembalian:const newData = data.reduce((acc, row) => (acc[row.key] = row.value, acc), {});
ElChiniNet
4
Sama seperti rasa ingin tahu. Beberapa waktu yang lalu saya sedang menguji kinerja operator spread untuk merusak objek, dan bahkan jika memang benar bahwa kadang-kadang meningkatkan pembacaan kode, ia memiliki biaya tinggi: Measethat.net/Benchmarks/Show/6194/5/ …
ElChiniNet
@ ElChiniNet Kasus uji yang Anda tautkan adalah tentang penyebaran array, bukan penyebaran objek. (Tapi ya, berulang kali menyebar ke objek baru jauh lebih lambat daripada bermutasi satu objek)
Bergi
1
@Bergi, di sini Anda memiliki perbandingan kode spesifik ini: measuringethat.net/Benchmarks/Show/6318/0/…
ElChiniNet
6

digunakan dengan Array#mapitu membuat kunci dan nilai sebagai objek dan Object.assignnilai array yang terselubung ke objek

const languagePack = [ { 'key': 'Username', 'value': 'Benutzername', 'group': 'default' }, { 'key': 'Password', 'value': 'Passwort', 'group': 'default' } ];

var res = Object.assign({},...languagePack.map(({key,value}) => ({[key]:value})))

console.log(res)

prasanth
sumber
2

Anda dapat menggunakan ES6 Mapuntuk menggunakannya Object.fromEntriesuntuk mengkonversi mapkembaliObject .

Untuk informasi lebih lanjut tentang Peta

let languagePack=
[{
  'key': 'Username',
  'value': 'Benutzername',
  'group': 'default'
},
{
  'key': 'Password',
  'value': 'Passwort',
  'group': 'default'
}];

let map = new Map();

languagePack.forEach((val)=>{
  map.set(val.key, val.value);
})
languagePack = Object.fromEntries(map);
console.log(languagePack);

Akshay Bande
sumber