JavaScriptでネストされたJSONオブジェクトを再帰的に検索する方法

まず、次のような入れ子構造（ネスト）を持つJSONオブジェクトを用意します。オブジェクトの中にさらにオブジェクトや配列が含まれ、目的のデータがどこにあるのか一目では分からない——こうしたケースは実際の開発でもよく遭遇します。

const obj = {
    id: 1,
    title: 'hello world',
    child: {
        id: null,
        title: 'foobar',
        child: {
            id: null,
            title: 'i should be in results array '
        }
    },
    foo: {
        id: null,
        title: 'i should be in results array too!'
    },
    deep: [
        {
            id: null,
            value: 'yo'
        }, {
            id: null,
            value: 'yo2'
        }
    ]
};

実現したいこと

今回作成するのは、次の3つの引数を受け取るJavaScript関数です。

• 第1引数：検索対象のオブジェクト
• 第2引数：キー名の文字列
• 第3引数：値の文字列

この関数はJSONオブジェクト全体を走査し、指定されたキーと値の組み合わせを持つすべてのオブジェクトを見つけ出します。そして、該当するオブジェクトをまとめた配列を返します。

解決のためのアプローチ

階層の深さが事前には分からないため、ここでは再帰処理を活用します。具体的な手順は以下のとおりです。

• 検索対象の値がfalsy（false、null、undefinedなど）であるか、オブジェクト型でない場合は、その時点で処理を打ち切って戻る
• 現在注目しているオブジェクトで、指定されたキーと値が一致していれば、そのオブジェクト自体を結果セットに追加する
• Object.keys()でキーの一覧を取得し、各プロパティの値に対して同じ検索関数を再帰的に呼び出す

最後に、収集したオブジェクトを格納した配列を呼び出し元へ返せば完成です。

コード例

const findObject = (obj = {}, key, value) => {
    const result = [];
    const recursiveSearch = (obj = {}) => {
        if (!obj || typeof obj !== 'object') {
            return;
        }
        if (obj[key] === value) {
            result.push(obj);
        }
        Object.keys(obj).forEach(function (k) {
            recursiveSearch(obj[k]);
        });
    };
    recursiveSearch(obj);
    return result;
};
console.log(findObject(obj, 'id', null));

コードのポイント

処理の中心となるのは内部関数recursiveSearchです。typeofによる型チェックで文字列や数値といった末端の値を除外しながら、オブジェクトや配列だけを再帰的に掘り下げていきます。条件に合致したオブジェクトは、参照ごとそのまま結果配列に追加されるため、見つかったオブジェクトの全体構造を後からそのまま利用できるのが大きな特徴です。

出力結果

[
    {
        id: null,
        title: 'foobar',
        child: {
            id: null,
            title: 'i should be in results array '
        }
    },
    {
        id: null,
        title: 'i should be in results array '
    },
    {
        id: null,
        title: 'i should be in results array too!'
    },
    {
        id: null,
        value: 'yo'
    },
    {
        id: null,
        value: 'yo2'
    }
]

このようにfindObject(obj, 'id', null)を実行すると、ネストの深い位置にあるオブジェクトも漏らすことなく、idがnullであるすべてのオブジェクトを配列として取得できました。