JavaScriptでJSON配列をIDごとにグループ化する方法

JavaScriptでデータを扱っていると、同じキーを持つ複数のオブジェクトが1つの配列に散らばっているケースによく出会います。例えば、以下のようなJSON配列を見てみましょう。

const arr = [
    {
        "id": "03868185",
        "month_10": 6,
    },
    {
        "id": "03870584",
        "month_6": 2,
    },
    {
        "id": "03870584",
        "month_7": 5,
    },
    {
        "id": "51295",
        "month_1": 1,
    },
    {
        "id": "51295",
        "month_10": 1,
    },
    {
        "id": "55468",
        "month_11": 1,
    }
];

この配列では、「03870584」や「51295」など、同じ「id」プロパティを持つオブジェクトが複数存在しています。そこで必要になるのが、同じ「id」を持つすべてのキー/バリューペアを、1つのオブジェクトにまとめる関数です。

実装コード

以下のコードでは、groupByIdという関数を定義し、マップ（連想配列）を使って各「id」がすでに処理済みかどうかを判定しています。未処理のidであればそのまま結果配列に追加し、既存のidであれば対応するオブジェクトに新しいキー/バリューを追加する仕組みです。

const arr = [
    {
        "id": "03868185",
        "month_10": 6,
    },
    {
        "id": "03870584",
        "month_6": 2,
    },
    {
        "id": "03870584",
        "month_7": 5,
    },
    {
        "id": "51295",
        "month_1": 1,
    },
    {
        "id": "51295",
        "month_10": 1,
    },
    {
        "id": "55468",
        "month_11": 1,
    }
];
const groupById = (arr = []) => {
    const map = {};
    const res = [];
    arr.forEach(el => {
       if(map.hasOwnProperty(el['id'])){
           const index = map[el['id']] - 1;
           const key = Object.keys(el)[1];
           res[index][key] = el[key];
       }
       else{
           map[el['id']] = res.push(el);
       }
    })
    return res;
};
console.log(groupById(arr));

処理のポイント

このコードの動作を簡単に解説します。

• map変数：各「id」と、結果配列内での位置（インデックス）を紐づけて記録します。
• hasOwnProperty()：そのidがすでにmapに登録されているかどうかをチェックします。
• res.push(el)：新しいidの場合はオブジェクトを結果配列に追加し、戻り値（配列の新長さ）をmapに保存します。
• Object.keys(el)[1]：オブジェクトの2番目のキー（月を表すキー）を取得して、既存のオブジェクトに追加します。

出力結果

コンソールに出力される結果は以下の通りです。

[
    { id: '03868185', month_10: 6 },
    { id: '03870584', month_6: 2, month_7: 5 },
    { id: '51295', month_1: 1, month_10: 1 },
    { id: '55468', month_11: 1 }
]

このように、元々6つあったオブジェクトが、重複したidごとにまとめられて4つのオブジェクトになりました。同じidを持つデータを1つに集約したい場面（APIレスポンスの整形や集計処理など）で、この手法は非常に役立ちます。