How to Read an Array of Objects in JavaScript

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 present in a parent array.

JavaScript 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.

JavaScript array filter()

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.

To filter the objects/elements in an array in JavaScript,  use the filter() method.

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.

JavaScript array map()

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

It returns a new array, with each item resulting from a callback function.

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' ]

Conclusion

We can read an array of objects using an array.forEach(), array.filter(), and array.map() functions. We saw all the ways to read the array of objects. There are many other ways like for loop, while loop for the reading array of objects, but they are not efficient ways.

That’s it for this tutorial.

1 thought on “How to Read an Array of Objects in JavaScript”

  1. Greetings! I’ve been reading your web site for a long time now and finally got the courage to go ahead and give you a shout out from Lubbock Tx! Just wanted to tell you keep up the great work!

    Reply

Leave a Comment