JavaScriptでネストされたJSONオブジェクトから指定キーの値を取得する方法

JavaScriptでAPIのレスポンスなどを扱っていると、ネスト（入れ子）されたJSONオブジェクトから特定のキーに対応する値を取り出したい場面がよくあります。この記事では、そのようなネストされたJSONから目的の値を取得する関数の実装方法を解説します。

前提となるデータ構造

まず、次のようなネストされたJSONオブジェクトを例として考えます。

const obj = {
  "prop": [
    {
      "key": "FOO",
      "value": "Foo is wonderfull, foo is great"
    },
    {
      "key": "BAR",
      "value": "Bar is bad, really bad"
    }
  ]
};

このオブジェクトでは、「prop」というプロパティの中に配列が格納されており、その各要素は「key」と「value」というペアを持っています。

実装したい処理

ここで求められているのは、以下のようなJavaScript関数です。

• 第1引数：上記のようなネストされたオブジェクト
• 第2引数：検索対象となるキーの文字列

この関数は、指定されたキーに該当する要素を見つけ、その要素が持つ「value」プロパティの値を返す必要があります。

実装コード

実際のコードは以下の通りです。

const obj = {
  "prop": [
    {
      "key": "FOO",
      "value": "Foo is wonderfull, foo is great"
    },
    {
      "key": "BAR",
      "value": "Bar is bad, really bad"
    }
  ]
};
const findByKey = (obj, key) => {
  const arr = obj['prop'];
  if(arr.length){
    const result = arr.filter(el => {
      return el['key'] === key;
    });
    if(result && result.length){
      return result[0].value;
    }
    else{
      return '';
    }
  }
}
console.log(findByKey(obj, 'BAR'));

コードの解説

この関数の処理の流れを順番に見ていきましょう。

1. 配列の取得：まず obj['prop'] でネストされた配列を取り出します。
2. 要素の絞り込み：filter() メソッドを使い、el['key'] === key という条件に一致する要素だけを抽出します。厳密等価演算子（===）で比較しているため、型の不一致による誤マッチも防げます。
3. 結果の判定：一致する要素が存在すれば、その最初の要素（result[0]）のvalueプロパティを返します。
4. 該当なしの場合：一致する要素がなければ空文字 '' を返し、エラーを回避します。

出力結果

上記のコードを実行すると、コンソールには以下のように出力されます。

Bar is bad, really bad

'BAR'というキーを渡したことで、対応するvalueである「Bar is bad, really bad」が正しく取得できていることがわかります。

よりシンプルな代替案：find()メソッド

なお、最初の1件だけが必要な場合は、filter() の代わりに find() を使うとコードがより簡潔になります。

const findByKey = (obj, key) => {
  const found = obj['prop']?.find(el => el.key === key);
  return found?.value ?? '';
};

find() は条件に一致した最初の要素のみを返すため、無駄な走査が発生せず、パフォーマンス面でも有利です。また、オプショナルチェイニング（?.）やnullish合体演算子（??）を組み合わせることで、データが存在しない場合の安全なフォールバック処理も一行で実現できます。