JavaScriptでidプロパティを使って複雑なネスト構造のオブジェクトを検索する方法

はじめに

JavaScriptでは、入れ子構造（ネスト）になったJSONオブジェクトの中から、特定の条件に一致するサブオブジェクトを取り出したい場面がよくあります。本記事では、「id」のキーと値のペアを指定して、階層構造全体から該当するオブジェクトを再帰的に検索する関数の実装方法を解説します。

対象となるデータ構造

例として、次のような複雑なJSONオブジェクトを考えてみましょう。

const obj = {
  "id": "0001",
  "fieldName": "sample1",
  "fieldValue": "0001",
  "subList": [
    {
      "id": 1001,
      "fieldName": "Sample Child 1",
      "fieldValue": "1001",
      "subList": []
    },
    {
      "id": 1002,
      "fieldName": "Sample Child 2",
      "fieldValue": "1002",
      "subList": []
    }
  ]
};

このオブジェクトは、トップレベルに「id」や「fieldName」などのプロパティを持ち、さらに「subList」という配列の中に子オブジェクトが格納されています。各子オブジェクトも同じ構造を持っているため、多階層のツリー状データになっています。

実装したい機能

今回作成するのは、以下の要件を満たすJavaScript関数です。

• 引数として、このようなオブジェクトと「id」のキー・バリューペアを受け取る
• 指定されたキーと値が一致するサブオブジェクトを階層全体から探す
• 見つかった場合は、そのオブジェクト全体を返す

コード例

実際のコードは以下のようになります。

const obj = {
  "id": "0001",
  "fieldName": "sample1",
  "fieldValue": "0001",
  "subList": [
    {
      "id": 1001,
      "fieldName": "Sample Child 1",
      "fieldValue": "1001",
      "subList": []
    },
    {
      "id": 1002,
      "fieldName": "Sample Child 2",
      "fieldValue": "1002",
      "subList": []
    }
  ]
}

function searchById(searchKey, obj) {
  let key = Object.keys(searchKey)[0];
  let res;
  if (obj[key] === searchKey[key]) {
    return obj;
  }
  obj.subList.some(function (a) {
    res = searchById(searchKey, a);
    return res;
  });
  return res;
}

console.log(searchById({ id: 1002 }, obj));

コードのポイント

• Object.keys(searchKey)[0]：検索条件オブジェクトから最初のキー名を取得し、動的にプロパティへアクセスできるようにしています。
• 再帰呼び出し：現在のオブジェクトが一致しなければ、subList内の子オブジェクトに対して自分自身を呼び出し、より深い階層まで順番に探索していきます。
• Array.prototype.some()：some()メソッドは、コールバックがtrueを返した時点で走査を終了するため、目的のオブジェクトが見つかった段階で無駄なく検索を打ち切れるのが利点です。

実行結果

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

{
  id: 1002,
  fieldName: 'Sample Child 2',
  fieldValue: '1002',
  subList: []
}

まとめ

このように、再帰処理とsome()メソッドを組み合わせることで、任意の深さにネストされたオブジェクトの中から、特定のidを持つ要素をシンプルかつ効率的に検索できます。subListの代わりにchildrenなど別の配列プロパティを使用するケースでも、同じ考え方で柔軟に対応可能です。