JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript】mapとforEachを使ってオブジェクト内のオブジェクト配列を解析する方法

JavaScriptでは、map() や forEach() といった配列メソッドを活用することで、オブジェクトの中にネストされたオブジェクトの配列(JSON形式のデータなど)を効率的に解析・処理できます。

以下は、mapとforEachを組み合わせて、オブジェクト内のオブジェクト配列を解析し、画面に表示するサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 18px;
      font-weight: 500;
      color: rebeccapurple;
   }
</style>
</head>
<body>
<h1>Parse array of objects inside object</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to parse the json object</h3>
<script>
   let json = {
      storeData: [
         {
            items: [
               {
                  itemID: 12,
                  cost: {
                costNum: 100,
               },
            },
            {
               itemID: 22,
               cost: {
                  costNum: 250,
               },
            },
            {
               itemID: 19,
               cost: {
                  costNum: 350,
               },
            },
         ],
      },
   ],
};
let resEle = document.querySelector(".result");
document.querySelector(".Btn").addEventListener("click", () => {
   let sum = 0;
   json.storeData.map((ele) => ({
      itemPrice: ele.items.forEach((item) => {
         resEle.innerHTML +=
         "itemID : " +
         item.itemID +
         " : costNum : " +
         item.cost.costNum +
         "<br>";
      }),
   }));
});
</script>
</body>
</html>

実行結果

上記のコードを実行すると、ブラウザには次のように表示されます。

【JavaScript】mapとforEachを使ってオブジェクト内のオブジェクト配列を解析する方法

「CLICK HERE」ボタンをクリックすると、JSONデータが解析され、各アイテムのID(itemID)と価格(costNum)が一覧で表示されます。

【JavaScript】mapとforEachを使ってオブジェクト内のオブジェクト配列を解析する方法

コードの解説

このサンプルの処理の流れは以下の通りです。

  • データ構造： 変数 json は、storeData(店舗データ)の中に items(商品リスト)という配列を持つ入れ子構造になっています。
  • 外側のループ： map() を使って storeData の各要素を1件ずつ取り出します。
  • 内側のループ： forEach() を使って items 配列の各商品から itemID と cost.costNum を取得し、innerHTML に連結して画面へ表示しています。
  • 補足： クリックイベント内で宣言している sum 変数は現在未使用ですが、sum += item.cost.costNum; のように加算処理を追加すれば合計金額の算出にも利用できます。

map() と forEach() の違い

メソッド特徴主な用途
forEach()各要素に対して処理を実行するのみ。戻り値は undefinedDOMへの出力やログ表示など、副作用を伴う反復処理
map()各要素を変換した結果を新しい配列として返すデータの変換・加工を行い、その結果を再利用したい場合

なお、本サンプルのように戻り値を利用しないケースでは、外側のループも forEach() に統一した方がコードの意図がより明確になります。目的に応じて両者を使い分けることが、可読性の高いJavaScriptを書くためのポイントです。

  1. JavaScriptのmapとforEachを使って、オブジェクト内にネストされたオブジェクト配列を解析する方法

    本記事では、JavaScriptのmapメソッドとforEachメソッドを組み合わせて、あるオブジェクトの中にネストされた（入れ子になった）オブジェクトの配列を解析する方法を解説します。APIレスポンスなどでよく見られる「オブジェクトの中に配列があり、その配列の中にさらにオブジェクトがある」という構造のJSONデータは、外側の配列にmapを、内側の配列の走査にforEachを使うことで、各要素の値に簡単にアクセスできます。コード例<!DOCTYPE html> <html lang="en"> <head> <meta charse

  2. JavaScriptのオブジェクト配列に配列メソッドを適用する方法

    JavaScriptでは、オブジェクトが格納された配列に対しても、通常の配列と同じようにpop()、push()、splice()などの標準的な配列メソッドをそのまま使用できます。オブジェクト配列はあくまで「配列」であるため、要素としてオブジェクトが入っていても配列操作のAPIは共通で動作します。 コード例 以下は、JavaScriptオブジェクトの配列に対して配列メソッドを使用するサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8