How to Traverse Array of Objects and Access the Properties in JavaScript?

Here are the various methods to traverse an array of objects and access the properties in JavaScript

1. Using for…in loop

The for...in loop is used to iterate over the enumerable properties of an object.

const a = [
    {name: 'Saritha', sub: 'Maths'},
    {name: 'Sarthak', sub: 'Science'},
    {name: 'Sneha', sub: 'Social'}
]

a.forEach(teacher => {
    for (let value in teacher) {
        console.log(`${teacher[value]}`)
    }
})

Saritha
Maths
Sarthak
Science
Sneha
Social

In this example:

• forEach() goes through each object in the array.
• for...in loops through the properties (name, sub) of each teacher object.
• teacher[value] accesses and logs the value of each property.

2. Using forEach() Method

The forEach() method executes a provided function once for each array element.

const a = [{ x:1 }, { x: 2 }, { x: 3 }];

a.forEach((element, index, array) => {
    console.log(element.x);    
});

1
2
3

In this example:

• forEach() is used to iterate over each object in the arr.
• element represents the current object (e.g., { x: 1 }, { x: 2 }).
• element.x accesses and logs the x property of each object.

3. Using Object.keys() Method

Object.keys() returns an array of a given object's own enumerable property names (keys).

const a = [
    {name: 'Saritha', sub: 'Maths'},
    {name: 'Sarthak', sub: 'Science'},
    {name: 'Sneha', sub: 'Social'}
]

for (let teacher in a) {
    for (let key in a[teacher]) {
        console.log(a[teacher][key]);
    }
}

Saritha
Maths
Sarthak
Science
Sneha
Social

In this example:

• The outer for...in loop iterates over the array, where each teacher is the index of an object in the array.
• The inner for...in loop iterates over the keys (name, subject) of each teacher object.
• a[teacher][key] accesses and logs the value of each property (like 'Saritha', 'Maths', etc.).

4. Using object.values() Method

Object.values() returns an array of a given object's own enumerable property values.

const a = [
    {name: 'Saritha', sub: 'Maths'},
    {name: 'Sarthak', sub: 'Science'},
    {name: 'Sneha', sub: 'Social'}
]

for (const value of Object.values(a)) {
    for (let v in value) {
        console.log(value[v]);
    }
}

Saritha
Maths
Sarthak
Science
Sneha
Social

In this example:

• Object.values(a) returns an array of the teacher objects.
• for...of loops through each teacher object.
• for...in loops over the properties (name, subject) of each teacher object.
• value[v] accesses and logs the values of the properties (name and subject).

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.

const a = [
    {name: 'Saritha', sub: 'Maths'},
    {name: 'Sarthak', sub: 'Science'},
    {name: 'Sneha', sub: 'Social'}
]

for (const entry of Object.entries(a)) {
    for (let value in entry[1]) {
        console.log(entry[1][value]);
    }
}

Saritha
Maths
Sarthak
Science
Sneha
Social

In this example:

• Object.entries(a) returns an array of [index, teacher] pairs.
• for...of loops through each pair, and for...in accesses the properties (name, subject) of each teacher object.
• entry[1][value] logs the property values.