JavaScriptのmapとforEachを使って、オブジェクト内にネストされたオブジェクト配列を解析する方法
本記事では、JavaScriptのmapメソッドとforEachメソッドを組み合わせて、あるオブジェクトの中にネストされた（入れ子になった）オブジェクトの配列を解析する方法を解説します。
APIレスポンスなどでよく見られる「オブジェクトの中に配列があり、その配列の中にさらにオブジェクトがある」という構造の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>コードの解説
json.storeData.map()：外側のstoreData配列をループ処理します。ele.items.forEach()：各ストアデータが持つitems配列の要素を1件ずつ取り出します。item.itemIDとitem.cost.costNum：ネストされたプロパティにアクセスし、商品IDと価格を画面に表示します。
実行結果
上記のコードを実行すると、次のような出力が得られます。
「CLICK HERE」ボタンをクリックすると、JSONオブジェクトが解析され、各アイテムのIDと価格が表示されます。
-
JavaScriptのオブジェクト配列に配列メソッドを適用する方法
JavaScriptでは、オブジェクトが格納された配列に対しても、通常の配列と同じようにpop()、push()、splice()などの標準的な配列メソッドをそのまま使用できます。オブジェクト配列はあくまで「配列」であるため、要素としてオブジェクトが入っていても配列操作のAPIは共通で動作します。 コード例 以下は、JavaScriptオブジェクトの配列に対して配列メソッドを使用するサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
-
【JavaScript入門】複数のオブジェクトを1つにマージして単一のオブジェクト配列を作成する方法
JavaScriptでは、Object.assign()メソッドとスプレッド構文（...）を組み合わせることで、配列内の複数のオブジェクトを1つのオブジェクトに簡単にマージすることができます。 Object.assign()は、1つ以上のコピー元オブジェクトから、コピー先のオブジェクトへすべてのプロパティをコピーするためのメソッドです。スプレッド構文を使って配列の要素を展開することで、各オブジェクトのキーと値が1つのオブジェクトに統合されます。 コード例 以下のコードは、配列内の複数のオブジェクトを単一のオブジェクトにマージする例です。 <!DOCTYPE html> <ht