Làm thế nào để phân tích cú pháp mảng các đối tượng bên trong một đối tượng khác bằng cách sử dụng bản đồ hoặc forEach?

Sau đây là đoạn mã để phân tích cú pháp mảng các đối tượng bên trong một đối tượng khác bằng cách sử dụng bản đồ hoặc forEach -

Ví dụ

<!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>