JavaScriptでJSONオブジェクトのネストされた値を配列に変換する方法

この記事では、ネストされたJSONオブジェクトから特定のプロパティ（ここでは「rssi」）の値だけを取り出し、配列の配列として整理する方法を解説します。

対象となるJSONオブジェクト

まず、次のようなJSONオブジェクトを想定します。

const obj = {
  "test1": [{
    "1": {
      "rssi": -25,
    }
  }, {
    "2": {
      "rssi": -25,
    }
  }],
  "test2": [{
    "15": {
      "rssi": -10,
    }
  }, {
    "19": {
      "rssi": -21,
    }
  }]
};

このオブジェクトには、「test1」と「test2」という2つのキーがあり、それぞれの値は複数の要素を持つ配列になっています。さらに各要素は、数字のキーと「rssi」プロパティを持つオブジェクトで構成されています。

実現したいこと

このようなオブジェクトを引数として受け取るJavaScript関数を作成します。関数は、ネストされたすべてのオブジェクトが持つ「rssi」プロパティの値を、対応するネストした配列（配列の中に配列）へマッピングします。

つまり、上記のオブジェクトの場合、期待される出力は次のようになります。

const output = [[-25, -25], [-10, -21]];

コード例

実際のコードを見てみましょう。

const obj = {
  "test1": [{
    "1": {
      "rssi": -25,
    }
  }, {
    "2": {
      "rssi": -25,
    }
  }],
  "test2": [{
    "15": {
      "rssi": -10,
    }
  }, {
    "19": {
      "rssi": -21,
    }
  }]
};

const mapToValues = (object = {}) => {
  const res = [];
  for (let key in object) {
    let obj = object[key];
    let aux = [];
    for (let i = 0; i < obj.length; i++) {
      for (let x in obj[i]) {
        aux.push(obj[i][x].rssi);
      }
    }
    res.push(aux);
  }
  return res;
};

console.log(mapToValues(obj));

コードの仕組み

• 外側の for...in ループ： オブジェクトの各キー（「test1」「test2」）を順番に処理し、それぞれの値（配列）を取得します。
• 内側の for ループ： 配列の各要素に対して反復処理を行います。
• 最も内側の for...in ループ： 各要素内のキー（「1」「2」「15」「19」など）を取得し、そのオブジェクトから「rssi」の値を取り出して aux 配列に追加します。
• 結果の組み立て： キーごとの aux 配列を res 配列にpushし、最終的に返却します。

より簡潔な代替手段：Object.values を使う方法

Object.values() と map() を組み合わせると、同じ処理をより簡潔に書くこともできます。

const mapToValues = (object = {}) =>
  Object.values(object).map(arr =>
    arr.map(item => Object.values(item)[0].rssi)
  );

console.log(mapToValues(obj));

こちらの書き方は、ネストの深さや構造が固定されている場合に特に有効です。可読性が高く、モダンなJavaScriptらしいアプローチと言えます。

出力結果

どちらの方法でも、コンソールには次のように出力されます。

[ [ -25, -25 ], [ -10, -21 ] ]

まとめ

ネストされたJSONデータから必要な値だけを抜き出す処理は、APIレスポンスの整形など実務でもよく登場します。for...in ループを使った手続き的な方法と、Object.values() × map() を使った宣言的な方法の両方を理解しておくと、状況に応じて柔軟に対応できるでしょう。