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

Updated on: 18-Jul-2020

591 Views

Kickstart Your Career

Get certified by completing the course

Get Started