How to Read an Array of Objects in JavaScript

There are the following methods to read an array of objects in JavaScript.

1. Array.forEach(): The forEach() method calls a function for each item in the array.
2. Array.filter(): The filter() method constructs a new array filled with items that pass a check provided by the function.
3. Array.map(): The map() method creates an array by calling a particular function on each item in a parent array.

Method 1: Using the array forEach()

The array forEach() is a built-in JavaScript method that calls a function for each element in the array. In addition, the forEach() method passes a callback function for each item of an array.

Syntax

 array.forEach(function(currentValue,index,arr), thisVal)

Parameters

1. value(*required): It is the value is having the current element of the array.
2. index(optional): It is an index with the current index of the array.
3. arr(optional):  The arr has the array itself.
4. thisVal: The thisVal argument has the context to be passed as this to be used while executing the callback function.

Return value

 It does not return anything.

Example

const arr = [
  { name: "aksht", age: 23, skill: "ruby" },
  { name: "nidhi", age: 35, skill: "java" },
  { name: "guddu", age: 30, skill: "python" },
]

// here we pass one arrow function in forEach

arr.forEach((object, index) => {
 
 // object is giving the one by one object
  console.log(index, object.name, object.age, object.skill);
 
 // some logic based on your requirement
});

Output

0 aksht 23 ruby
1 nidhi 35 java
2 guddu 30 python

In this example, we are iterating an array of objects using the array.forEach() function.

Method 2: Using the array filter() function

JavaScript array filter() is a built-in method that creates a new array filled with items that pass a test provided by a function. The array filter() is a pure function that does not change the original array.

Syntax

 arr.filter(function(currentValue, index, arr), thisVal);

Parameters

1. value(*required): It is the value is having the current element of the array.
2. index(optional): It is an index with the current index of the array.
3. arr(optional):  The arr has the array itself.
4. thisVal: The thisVal argument has the context to be passed as this to be used while executing the callback function.

Return value

It creates a new array and stores the element that passed the test or condition and returns that array.

Example

const arr = [
 { name: "aksht", age: 23, skill: "ruby" },
 { name: "nidhi", age: 35, skill: "java" },
 { name: "guddu", age: 30, skill: "python" },
]

// return the array of objects which every object age is less than 31
let filteredArr = arr.filter((object) => {
 if (object.age < 31) return object;
})

console.log(filteredArr);

Output

[
   { name: 'aksht', age: 23, skill: 'ruby' },
   { name: 'guddu', age: 30, skill: 'python' }
]

In this example, we filter out the objects from an array whose age is less than 31 and print the output of an array of objects.

Method 3: Using the array map() function

JavaScript array map() is a built-in method that creates a new array populated with the results of calling a provided function on every element in the calling array. The map() method is used to accomplish a task for every item and store them in a new array.

Syntax

arr.map(function(currentValue, index, arr), thisVal);

Parameters

1. value(*required): It is the value is having the current element of the array.
2. index(optional): It is an index with the current index of the array.
3. arr(optional):  The arr has the array itself.
4. thisVal: The thisVal argument has the context to be passed as this to be used while executing the callback function.

Return value

Example

const arr = [
 { name: "aksht", age: 23, skill: "ruby" },
 { name: "nidhi", age: 35, skill: "java" },
 { name: "guddu", age: 30, skill: "python" },
];

let usernamesArr = arr.map((object) => {
 let username = `${object.name}_${object.age}_${object.skill}`
 return username;
})

console.log(usernamesArr);

Output

[ 'aksht_23_ruby', 'nidhi_35_java', 'guddu_30_python' ]

That’s it.

Niva Shah

Niva Shah is a Software Engineer with over eight years of experience. She has developed a strong foundation in computer science principles and a passion for problem-solving.