Parsing array of objects inside an object using maps or forEach using JavaScript?

Javascript Web Development Object Oriented Programming

Following is the code to parse array of objects inside an object using maps or forEach using JavaScript −

Example

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

Output

The above code will produce the following output −

On clicking the ‘CLICK HERE’ button −

AmitDiwan

Published on 18-Jul-2020 08:00:54

Previous Page Print Page