How to loop through an array containing multiple objects and access their properties in JavaScript ?
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:
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
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);
});
|
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
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
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
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' );
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
Share your thoughts in the comments
Please Login to comment...