JavaScriptでJSON配列を通常のJSONオブジェクトに変換する方法

はじめに

APIのレスポンスなどでは、「key」と「value」のペアを持つオブジェクトが配列として格納された、深くネストしたJSONデータによく遭遇します。例えば、次のような配列です。

const arr = [{
   "key": "name",
   "value": "john"
},
{
   "key": "number",
   "value": "1234"
},
{
   "key": "price",
   "value": [{
      "item": [{
         "item": [{
            "key": "quantity",
            "value": "20"
         },
         {
            "key": "price",
            "value": "200"
         }]
      }]
   }]
}];

このような構造は、階層が深く「item」や「value」が入れ子になっているため、そのままでは扱いづらいものです。そこで、この配列を入力として受け取り、キーに対して値が直接紐づくシンプルなオブジェクトへと変換するJavaScript関数を作成することを考えます。

期待する出力

上記の配列を変換すると、出力は次のようになるべきです。

const output = {
   "name": "john",
   "number": "1234",
   "price": {
      "quantity": "20",
      "price": "200"
   }
};

変換処理の実装

鍵となるのは再帰処理です。要素に「item」プロパティが存在する限り、より深い階層へと処理を進めていき、valueが配列である場合は新しいオブジェクトを生成して、そこに子要素を埋め込んでいきます。具体的なコードは以下の通りです。

const arr = [{
   "key": "name",
   "value": "john"
},
{
   "key": "number",
   "value": "1234"
},
{
   "key": "price",
   "value": [{
      "item": [{
         "item": [{
            "key": "quantity",
            "value": "20"
         },
         {
            "key": "price",
            "value": "200"
         }]
      }]
   }]
}];
const simplify = (arr = []) => {
   const res = {};
   const recursiveEmbed = function(el){
      if ('item' in el) {
         el.item.forEach(recursiveEmbed, this);
         return;
      };
      if (Array.isArray(el.value)) {
         this[el.key] = {};
         el.value.forEach(recursiveEmbed, this[el.key]);
         return;
      };
      this[el.key] = el.value;
   };
   arr.forEach(recursiveEmbed, res);
   return res;
};
console.log(simplify(arr));

コードの解説

• simplify関数：引数として配列を受け取り、結果を格納するための空オブジェクトresを用意します。
• recursiveEmbed関数：要素にitemプロパティがある場合は、その子要素たちに対して自分自身を再帰的に呼び出し、さらに深い階層をたどります。
• valueが配列の場合：this[el.key]に新しい空オブジェクトを代入し、そのオブジェクトをコンテキスト（this）として再帰処理を実行することで、ネストした構造をそのままオブジェクトの階層へと反映させます。
• それ以外の場合：this[el.key] = el.valueによって、キーと値を単純に対応付けます。

ここでのポイントは、forEachの第二引数にオブジェクトを渡すことで、コールバック内のthisを自由に制御できる点です。これにより、再帰の各段階で「どこに値を書き込むべきか」を自然に切り替えながら処理を進められます。

実行結果

このコードをコンソールで実行すると、出力は次のようになります。

{
   name: 'john',
   number: '1234',
   price: { quantity: '20', price: '200' }
}

このように、複雑に入れ子になったkey/value形式のJSON配列でも、再帰的な処理を組み合わせることで、扱いやすいフラットなJSONオブジェクトへと簡単に変換できます。同様の構造のデータを扱う際には、ぜひこのパターンを活用してみてください。