Syntax error How do we loop through array of arrays containing objects in JavaScript?

How do we loop through array of arrays containing objects in JavaScript?

Following is the code to loop through array of arrays containing objects in 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>Loop through array of arrays containing objects in JavaScript</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click the above button to loop throught the arrObj
</h3>
<script>
   let BtnEle = document.querySelector(".Btn");
   let resEle = document.querySelector(".result");
   let arrObj = [
      [
         { name: "Rohan", age: 22 },
         { name: "Mohan", age: 12 },
         { name: "Shawn", age: 14 },
      ],
      [
         { id: 12, price: 44 },
         { id: 23, price: 45 },
         { id: 91, price: 14 },
      ],
   ];
   BtnEle.addEventListener("click", () => {
      arrObj.forEach((item) => {
         item.forEach((object) => {
            for (let i in object) {
               resEle.innerHTML += i + " : " + object[i] + " ";
            }
            resEle.innerHTML += "";
         });
      });
   });
</script>
</body>
</html>

Output

The above code will produce the following output −

On clicking the ‘CLICK HERE’ button −

Updated on: 2020-07-18T09:16:06+05:30

534 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements