Article Categories

Selected Reading

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

Javascript Web Development Object Oriented Programming

In JavaScript, when working with nested arrays containing objects, you need to use nested loops to access each object's properties. This tutorial demonstrates multiple approaches to iterate through such complex data structures.

Understanding the Data Structure

An array of arrays containing objects has this structure:

let arrObj = [
    [
        { name: "Rohan", age: 22 },
        { name: "Mohan", age: 12 }
    ],
    [
        { id: 12, price: 44 },
        { id: 23, price: 45 }
    ]
];

Method 1: Using forEach() with Nested Loops

The most common approach uses forEach() to iterate through outer arrays and inner objects:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loop Array of Arrays with Objects</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 16px;
        font-weight: 500;
        color: rebeccapurple;
        margin: 20px 0;
        padding: 10px;
        border: 1px solid #ccc;
    }
</style>
</head>
<body>
<h1>Loop through array of arrays containing objects</h1>
<div class="result"></div>
<button class="btn">CLICK HERE</button>
<p>Click the button to loop through the nested array structure</p>

<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", () => {
        resEle.innerHTML = ""; // Clear previous results
        
        arrObj.forEach((subArray, arrayIndex) => {
            resEle.innerHTML += `<strong>Array ${arrayIndex + 1}:</strong><br>`;
            
            subArray.forEach((object, objIndex) => {
                resEle.innerHTML += `Object ${objIndex + 1}: `;
                
                for (let key in object) {
                    resEle.innerHTML += `${key}: ${object[key]} `;
                }
                resEle.innerHTML += "<br>";
            });
            resEle.innerHTML += "<br>";
        });
    });
</script>
</body>
</html>

Method 2: Using Traditional for Loops

For better performance with large datasets, use traditional for loops:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>For Loop Method</title>
</head>
<body>
<div id="output"></div>

<script>
    let arrObj = [
        [
            { name: "Alice", role: "Developer" },
            { name: "Bob", role: "Designer" }
        ],
        [
            { product: "Laptop", cost: 800 },
            { product: "Phone", cost: 600 }
        ]
    ];
    
    let output = document.getElementById("output");
    let result = "";
    
    // Outer loop for main arrays
    for (let i = 0; i < arrObj.length; i++) {
        result += `<h3>Group ${i + 1}:</h3>`;
        
        // Inner loop for objects within each array
        for (let j = 0; j < arrObj[i].length; j++) {
            let obj = arrObj[i][j];
            result += `Item ${j + 1}: `;
            
            // Loop through object properties
            for (let key in obj) {
                result += `${key} = ${obj[key]}, `;
            }
            result += "<br>";
        }
        result += "<br>";
    }
    
    output.innerHTML = result;
</script>
</body>
</html>

Method 3: Using flat() and forEach()

For simpler processing, you can flatten the structure first:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flat Method</title>
</head>
<body>
<div id="result"></div>

<script>
    let arrObj = [
        [
            { name: "John", age: 25 },
            { name: "Jane", age: 30 }
        ],
        [
            { city: "New York", population: 8000000 },
            { city: "London", population: 9000000 }
        ]
    ];
    
    let resultDiv = document.getElementById("result");
    let output = "";
    
    // Flatten the array and process all objects
    let flatArray = arrObj.flat();
    
    flatArray.forEach((obj, index) => {
        output += `Object ${index + 1}: `;
        
        Object.entries(obj).forEach(([key, value]) => {
            output += `${key}: ${value} `;
        });
        
        output += "<br>";
    });
    
    resultDiv.innerHTML = output;
</script>
</body>
</html>

Comparison of Methods

Method	Performance	Readability	Use Case
forEach() nested	Good	High	General purpose, easy to understand
for loops	Best	Medium	Large datasets, performance critical
flat() + forEach()	Good	High	When structure hierarchy doesn't matter

Key Points

Use nested loops to access objects within arrays of arrays
The for...in loop iterates through object properties
Object.entries() provides a cleaner way to access key-value pairs
Consider flattening the array structure if hierarchy isn't important

Conclusion

Looping through arrays of arrays containing objects requires nested iteration. Use forEach() for readability, traditional for loops for performance, or flat() when structure doesn't matter. Choose the method that best fits your specific use case and data processing requirements.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

589 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next