JavaScriptで2つの異なる配列を組み合わせる方法|idをキーにデータを結合

はじめに:2つの配列を結合する課題

実際の開発では、複数の配列に分かれた関連データを1つにまとめたい場面がよくあります。本記事では、イベントの予定日を格納した配列とイベント名を格納した配列を、共通の id プロパティをキーとして結合する方法を解説します。

まず、入力となる2つの配列を見てみましょう。1つ目の dates 配列にはイベントの開催日が、2つ目の names 配列にはイベントの担当者名が格納されています。

const dates = [
    {
        id:"1",
        date:"2017-11-07"
    },
    {
        id:"1",
        date:"2017-11-08"
    },
    {
        id:"2",
        date:"2017-11-07"
    },
    {
        id:"2",
        date:"2017-11-08"
    }
];
const names = [
    {
        id:"1",
        name:"Pervies, Peter"
    },
    {
        id:"2",
        name:"Ming, Edmund"
    }
];

ここで必要となるのは、このような2つの配列を受け取り、id プロパティを基準にイベント名と対応する日付を結合するJavaScript関数です。

期待される出力は次のとおりです。各イベントごとに名前が設定され、複数の日付が details 配列としてまとめられたネスト構造になります。

const output = [
    {
        id:"1",
        name:"Pervies, Peter",
        details:[
            {date:"2017-11-07"},
            {date:"2017-11-08"}
        ]
    },
    {
        id:"2",
        name:"Ming, Edmund",
        details:[
            {date:"2017-11-07"},
            {date:"2017-11-08"}
        ]
    }
]

実装コード

それでは、実際のコードを見ていきましょう。

const combineArrays = (dates, names) => {
    const res = [];
    dates.forEach(el => {
        const bool = !res.some(item => {
            return item.id == el.id;
        });
        if(bool){
            let combined = {};
            combined.id = el.id;
            combined.details = combined.details || [];
            combined.details.push({
                "date": el.date
            });
            res.push(combined);
        }else{
            res.find(item => {
                return item.id === el.id;
            })
            .details.push({
                "date": el.date
            });
        };
    });
    res.forEach(el => {
        const bool = names.some(item => {
            return item.id === el.id;
        });
        if(bool){
            el.name = names.find(name => {
                return name.id === el.id;
            }).name;
        };
    });
    return res;
};
console.log(JSON.stringify(combineArrays(dates, names), undefined, 4));

コードのポイント

• 重複の判定: Array.prototype.some() を使い、結果配列内に同じ id を持つ要素がすでに存在するかどうかを確認しています。
• 新規作成と追記の分岐: 存在しない場合は新しいオブジェクトを生成して details 配列に日付を追加し、すでに存在する場合は find() で該当オブジェクトを取得して既存の details に日付を追記します。
• 名前の紐付け: 日付の集約が完了した後にもう一度ループを行い、names 配列から一致する id の名前を検索して name プロパティに代入しています。

実行結果

上記のコードをコンソールで実行すると、次のような出力が得られます。

[
    {
        "id": "1",
        "details": [
            {
                "date": "2017-11-07"
            },
            {
                "date": "2017-11-08"
            }
        ],
        "name": "Pervies, Peter"
    },
    {
        "id": "2",
        "details": [
            {
                "date": "2017-11-07"
            },
            {
                "date": "2017-11-08"
            }
        ],
        "name": "Ming, Edmund"
    }
]

まとめ

forEach()・some()・find() を組み合わせることで、共通のキーを持つ2つの配列を、1つのネストされたオブジェクト配列へ簡単に結合できます。ただし、この実装は要素を探すたびに配列全体を走査するため、データ件数が多い場合は処理コストが増大します。そのようなケースでは Map オブジェクトや reduce() を活用すると、O(n) の計算量でより効率的に処理できるため、覚えておくと便利です。