Open In App

How to loop through an array containing multiple objects and access their properties in JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

It’s easy to loop through the array of elements as we can access the elements by the array indexes. But it is not the case with objects as the object is a pair of keys and values indexing doesn’t work with an array of objects.

So the process of looping through the array of objects is different from the traditional looping of the array. There are different methods like object.keys(), object.values(), object.entries() in Javascript to access the keys and values of objects easily. 

There are many ways to loop through the array of objects. Let’s look at them one by one:

Approach 1: Using for…in loop

The properties of the object can be iterated over using a for..in loop. The value of each key of the object can be found by using the key as the index of the object.

Example: This example shows the implementation of the above-explained approach.

Javascript




const Teachers = [
    {
        name: 'saritha',
        subject: 'Maths'
    },
    {
        name: 'ahim',
        subject: 'science'
    },
    {
        name: 'sneha',
        subject: 'Social'
    }]
 
Teachers.forEach(teacher => {
    for (let value in teacher) {
        console.log(`${teacher[value]}`)
    }
})


Output

saritha
Maths
ahim
science
sneha
Social

Approach 2: Using forEach() Method

The arr.forEach() method calls the provided function once for each element of the array. The provided function may perform any kind of operation on the elements of the given array. 

Example: This example shows the implementation of the above-explained approach.

Javascript




const arr = [{ x:1 }, { x: 2 }, { x: 3 }];
 
arr.forEach((element, index, array) => {
    console.log(element.x);   
});


Output

1
2
3

Approach 3: Using Object.keys() Method

The Object.keys() method in JavaScript returns an array whose elements are strings corresponding to the enumerable properties. The Object.keys() method returns only the own property names.

Example: This example shows the implementation of the above-explained approach.

Javascript




const Teachers = [
    {
        name: 'saritha',
        subject: 'Maths'
    },
    {
        name: 'ahim',
        subject: 'science'
    },
    {
        name: 'sneha',
        subject: 'Social'
    }]
 
for (let teacher in Object.keys(Teachers)) {
    for (let key in Teachers[teacher]) {
        console.log(Teachers[teacher][key]);
    }
}


Output

saritha
Maths
ahim
science
sneha
Social

Approach 4: Using object.values() Method

The Object.values() method is used to return an array whose elements are the enumerable property values found on the object. we iterate through that array and get only the properties of that object.

Example: This example shows the implementation of the above-explained approach.

Javascript




const Teachers = [
    {
        name: 'saritha',
        subject: 'Maths'
    },
    {
        name: 'ahim',
        subject: 'science'
    },
    {
        name: 'sneha',
        subject: 'Social'
    }]
 
for (const value of Object.values(Teachers)) {
    for (let v in value) {
        console.log(value[v]);
    }
}


Output

saritha
Maths
ahim
science
sneha
Social

Approach 5: Using the object.entries() method

The Object.entries() method in JavaScript returns an array consisting of enumerable property [key, value] pairs of the object. we iterate through that array using for..in loop and get only the properties of that object.

Example: This example shows the implementation of the above-explained approach.

Javascript




const Teachers = [
    {
        name: 'saritha',
        subject: 'Maths'
    },
    {
        name: 'ahim',
        subject: 'science'
    },
    {
        name: 'sneha',
        subject: 'Social'
    }]
 
for (const entry of Object.entries(Teachers)) {
    for (let value in entry[1]) {
        console.log(entry[1][value]);
    }
}


Output

saritha
Maths
ahim
science
sneha
Social

Approach 6: Using Lodash _.forEach()

The _.forEach() method iterates over elements of collection and invokes iteratee for each element.

Step to install:

npm i --save lodash

Example: This example shows the implementation of the above-explained approach.

Javascript




const _ = require('lodash');        // or, use lodash
 
const Teacher = [
    { name: 'Marry', age: 23 },
    { name: 'Sam', age: 20 },
    { name: 'Julie', age: 18 }
];
 
_.forEach(Teacher, (value, _) => console.log(value));


Output:

{ name: 'Marry', age: 23 }
{ name: 'Sam', age: 20 }
{ name: 'Julie', age: 18 }


Last Updated : 04 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads