JavaScriptでJSON配列をキーごとにグループ化して解析する方法

この記事では、特定のキーの値に基づいてJSON配列のデータをグループ化し、新しい構造のJSONとして出力する方法を解説します。

課題の概要

例えば、次のようなJSON配列があるとします。

const arr = [{
  "data": [
    { "W": 1, "A1": "123" },
    { "W": 1, "A1": "456" },
    { "W": 2, "A1": "4578" },
    { "W": 2, "A1": "2423" },
    { "W": 2, "A1": "2432" },
    { "W": 2, "A1": "24324" }
  ]
}];

ここで求められているのは、キー「W」の値ごとにオブジェクトをグループ化し、以下のようなJSON配列へ変換することです。同じ「W」の値を持つ要素は、その値をキーとしたオブジェクトの中に配列としてまとめられます。

[
  {
    "1": [
      { "A1": "123" },
      { "A1": "456" }
    ]
  },
  {
    "2": [
      { "A1": "4578" },
      { "A1": "2423" },
      { "A1": "2432" },
      { "A1": "24324" }
    ]
  }
];

実装方法

この変換は、Array.prototype.reduce()を二段階で使うことでシンプルに実現できます。

• 第一段階： data配列を走査し、「W」の値をキーとして要素を振り分けた連想配列（オブジェクト）を作成します。
• 第二段階： 連想配列の各キーを取り出し、{ キー: 配列 }という形式のオブジェクトに変換しながら、最終的な配列を組み立てます。

const arr = [{
  "data": [
    { "W": 1, "A1": "123" },
    { "W": 1, "A1": "456" },
    { "W": 2, "A1": "4578" },
    { "W": 2, "A1": "2423" },
    { "W": 2, "A1": "2432" },
    { "W": 2, "A1": "24324" }
  ]
}];

const groupJSON = (arr = []) => {
  // ステップ1: W の値ごとに要素を分類
  const preCombined = arr[0].data.reduce((acc, val) => {
    acc[val.W] = acc[val.W] || [];
    acc[val.W].push({ A1: val.A1 });
    return acc;
  }, {});

  // ステップ2: 各キーをオブジェクト形式に変換して配列化
  const combined = Object.keys(preCombined).reduce((acc, val) => {
    const temp = {};
    temp[val] = preCombined[val];
    acc.push(temp);
    return acc;
  }, []);

  return combined;
};

console.log(JSON.stringify(groupJSON(arr), undefined, 4));

コードのポイント

• acc[val.W] = acc[val.W] || []; により、該当するキーがまだ存在しない場合に空配列を初期化しています。これで重複チェックのコードを書かずに済みます。
• push({ A1: val.A1 }) では元のオブジェクトから必要なプロパティだけを抜き出しており、「W」キー自体は結果から除外されます。
• JSON.stringify(groupJSON(arr), undefined, 4) の第3引数に4を渡すことで、コンソール上にインデントされた見やすい形式で出力できます。

出力結果

コンソールには次のように出力されます。

[
  {
    "1": [
      {
        "A1": "123"
      },
      {
        "A1": "456"
      }
    ]
  },
  {
    "2": [
      {
        "A1": "4578"
      },
      {
        "A1": "2423"
      },
      {
        "A1": "2432"
      },
      {
        "A1": "24324"
      }
    ]
  }
]

まとめ

reduce()を組み合わせることで、フラットなJSON配列を任意のキーでグループ化した構造へ効率よく変換できます。APIレスポンスの整形やデータ集計など、実務でも頻繁に役立つテクニックなので、ぜひ活用してみてください。