Syntax error Sum of nested object values in Array using JavaScript

Sum of nested object values in Array using JavaScript

Following is the code to sum nested object values in array using JavaScript −

Example

 Live Demo

<!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>Sum of nested object values in Array</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to sum the nested object values of json array
</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) => {
         sum += item.cost.costNum;
      }),
   }));
   resEle.innerHTML += "Total CostNum = " + sum + "<br>";
   });
</script>
</body>
</html>

Output

The above code will produce the following output −

On clicking the ‘CLICK HERE’ button −

Updated on: 2020-07-18T07:53:21+05:30

993 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements