はじめに
こんにちは、SHOJIです。
本記事では、JavaScriptのReduceを使って、Object(連想配列)のリストを一つのObjectにまとめる方法を記載します。
やりたいこと
以下のようなデータがあった場合、id(ユニークキー)をキーとするObjectに変換して、idからアイテム名を取得できるようにしたい。
処理対象データイメージ
const list = [
{id:1, item:"アイテム1"},
{id:2, item:"アイテム2"},
{id:3, item:"アイテム3"},
];
処理後データイメージ
{ '1': 'アイテム1', '2': 'アイテム2', '3': 'アイテム3' }
Reduceによる変換
const list = [
{id:1, item:"アイテム1"},
{id:2, item:"アイテム2"},
{id:3, item:"アイテム3"},
];
const obj = list.reduce((x, y) => Object.assign(x, {[y.id]:y.item}), {});
console.log(obj);
処理内容の説明
Reduce自体は世にたくさんの解説記事があるので探してください、だけだと不親切なので簡単に。
const obj = list.reduce((x, y) => Object.assign(x, {[y.id]:y.item}), {});
Reduceの第一引数はメソッド、第二引数は初期値です。
第一引数のメソッドはlistの要素数分繰り返されます。
2つの引数(サンプルの x と y )は、
です。
今回のサンプルだと以下のような処理が行われます。
-
x = {}(初期値)、y = {id:1, item:"アイテム1"}(listの1番目の要素)として、Object.assign(x, {[y.id]:y.item})を実行。
-
x = { '1': 'アイテム1' }(1の結果)、y = {id:2, item:"アイテム2"}(listの2番目の要素)として、Object.assign(x, {[y.id]:y.item})を実行。
-
x = { '1': 'アイテム1', '2': 'アイテム2' }(2の結果)、y = {id:3, item:"アイテム3"}(listの3番目の要素)として、Object.assign(x, {[y.id]:y.item})を実行。
-
listの全要素に対して処理を行ったので、3の結果である{ '1': 'アイテム1', '2': 'アイテム2', '3': 'アイテム3' } を結果として返し、処理を終了します。
使うシーン
一番使うであろうシーンは、REST APIを介してテーブルデータをJSON形式で取得したあとですかね。
そういう場合はカラムが複数あると思うので、キーに対して全項目を引けるようにまとめた方がいいかもしれません。
const list = [
{id:1, item:"アイテム1", price:50},
{id:2, item:"アイテム2", price:100},
{id:3, item:"アイテム3", price:150},
];
const obj = list.reduce((x, y) => Object.assign(x, {[y.id]:y}), {});
console.log(obj);
この形だと、id = 1 のデータとして、item と price の両方の情報を取得できます。