How to Access an Array of Objects in JavaScript [6 Ways]

by

Here are the six ways to access an array of objects in JavaScript:

  1. Using Array.forEach()
  2. Using Array.filter()
  3. Using Array.map()
  4. Using [ ] notation
  5. Using DOT notation
  6. Using for..in loop

Method 1: Using array forEach()

JavaScript array forEach() method is “used to call a function for each element in the array.” In addition, the forEach() method passes a callback function for each item of an array.

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

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

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 array filter()

JavaScript array filter() method is “used to create 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.

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.

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

Method 4: Using the Brackets notation ([])

You can access an object in an array using bracket notation and the object’s desired index. In type, the whole object is accessed, and only one of the properties of a specific object can’t be accessed.

let objArr = [
 {
   name: 'Krunal',
   age: 12
 },
 {
   name: 'Ankit',
   age: 15
 },
 {
   name: 'Rushabh',
   age: 20
 }
];

console.log("First Object in the Array using the [] notation:")
console.log(objArr[0]);

Output

First Object in the Array using the [] notation:

{ name: 'Krunal', age: 12 }

Method 5: Using the DOT notation

This approach can’t be used directly to access the array of objects, but we need to use it with the “bracket notation.” With this method, we can access any specific property of a particular object in the array of objects but not the whole object.

let objArr = [
 {
   name: 'Krunal',
   age: 12
 },
 {
   name: 'Ankit',
   age: 15
 },
 {
   name: 'Rushabh',
   age: 20
 }
];

console.log("First Object in the Array using the [] notation:")
console.log(objArr[2].name);

Output

First Object in the Array using the [] notation:

Rushabh

Method 6: Using the for..in loop

The for..in loop is a type of loop used in JavaScript, and this can be used pretty well in accessing elements of the array. 

let objArr = [
 {
   name: 'Krunal',
   age: 12
 },
 {
   name: 'Ankit',
   age: 15
 },
 {
   name: 'Rushabh',
   age: 20
 }
];

for (var key in objArr) {
  console.log(objArr[key]);
}

Output

Using the for..in loop

That’s it.

1 thought on “How to Access an Array of Objects in JavaScript [6 Ways]”

  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!

Comments are closed.