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:
- Using for…in loop
- Using forEach() Method
- Using Object.keys() Method
- Using object.values() Method
- Using object.entries() Method
- Using Lodash _.forEach()
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:
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]}`) }}) |
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:
Javascript
const arr = [{ x:1 }, { x: 2 }, { x: 3 }];arr.forEach((element, index, array) => { console.log(element.x); }); |
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:
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]); }} |
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:
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]); }} |
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.
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]); }} |
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:
Javascript
const _ = require('lodash'); // or, use lodashconst 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 }
