JavaScriptの配列をより単純なオブジェクトに変更する


17

次のように、さらにオブジェクトなどを含む配列を持つ単純なJSONがあります。

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

しかし、私が本当に欲しいのは次のようなオブジェクトです:

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

だから、私は配列を単純なキーと値のペアに減らしたいと思います。それは配列の中にあり、オブジェクト(キーは一意です)の中にさえあります。誰かがこれらのクールな配列関数のいくつかでこれを減らす方法を知っていますか?私はfor eachのようなものを思いついて、プロパティのオブジェクトを「手動で」プロパティを構築しましたが、 'reduce'、spread演算子(...)、map、every、一部など

私はそれを次のようなもので試しました:

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

しかし、それだけでエラーメッセージが表示されました TypeError: Invalid attempt to destructure non-iterable instance

編集:3つの回答はすべて完全に問題なく機能しています。ありがとう。



group無視されなければなりませんか?
Bergi、

はい、グループは無視できます。翻訳の異なるさまざまな画面で同じキーを使用するのは同僚のアイデアにすぎませんが、実際に使用する方法はありません。しかし、それはずっと後の別の質問です:)
MarcelGrüger19年

回答:


11

基本的forEachには、map関数の代わりに使用する必要があり、保持したいキーと値のペアにそのオブジェクトを構築できます。

これを試してください、それはあなたの問題を解決します。

var temp = {};

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

console.log(temp)

注:ここではmap、配列ではなくオブジェクトを返すreduce必要があるため、ここでは使用していません。したがって、ここで関数を使用してそれを行うことができますが、これは簡単で、目的と目的を簡単に理解できると思いました。


10

javascript reduce関数を使用して空のオブジェクトを作成し、各キーと値をそのオブジェクトに入れることができます。

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

編集:Donny Verduijnのすてきな提案。es6 destructuringを使用して、関数を短くすることができます。

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

3
ES6構文を使用したい場合は、このようにreduce関数を実装することもできます(acc, { key, value }) => ({ ...acc, [key]: value })
Donny Verduijn

1
また、あなたはリターンを避けるために、カンマ演算子を使用することができますconst newData = data.reduce((acc, row) => (acc[row.key] = row.value, acc), {});
ElChiniNet

4
ちょうど好奇心のように。しばらく前に、オブジェクトを破壊するためにスプレッドオペレーターのパフォーマンスをテストしていましたが、コードの可読性が向上することは確か
ElChiniNet

@ElChiniNetリンクしたテストケースは、オブジェクトの広がりではなく、配列の広がりについてです。(しかし、はい、繰り返し新しいオブジェクトに拡散することは、単一のオブジェクトを変更するよりもはるかに遅いです)
Bergi

1
@Bergiは、ここであなたは、この特定のコードの比較がありますmeasurethat.net/Benchmarks/Show/6318/0/...
ElChiniNet

6

で使用するArray#mapことを目的として、キーと値を作成するObject.assignオブジェクトに隠れた配列値

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)


2

ES6 Mapを使用Object.fromEntriesして、にmap戻すことができますObject

マップの詳細について

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.