How to Access Array of Objects in JavaScript ?

Accessing an array of objects in JavaScript is a common task that involves retrieving and manipulating data stored within each object. This is essential when working with structured data, allowing developers to easily extract, update, or process information from multiple objects within an array.

The approaches to access the array of objects in JavaScript are:

Using the Brackets notation

Using the brackets notation, you access objects in an array by specifying the array's name and the desired index. This method retrieves the entire object at the specified index. To access specific properties, combine it with dot notation for precision.

Syntax

arrayName[arrayIndex]

Example: The code below demonstrates how we can use the brackets notation to access the elements of the array of objects.

// Array of objects
let objArr = [
    {
        name: 'john',
        age: 12,
        gender: 'male'
    },
    {
        name: 'jane',
        age: 15,
        gender: 'female'
    },
    {
        name: 'julie',
        age: 20,
        gender: 'trans'
    }
];

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

First Object in the Array using the [] notation:
{ name: 'john', age: 12, gender: 'male' }

Using the DOT notation

Using DOT notation, you access specific properties of objects within an array by combining it with brackets notation. It directly retrieves individual properties, allowing precise access to the data inside objects at specific indices.

Syntax:

arrayName[arrayIndex].propertyName

Example: The code below demonstrates how we can use the DOT notation along with the brackets notation to access the elements of the array of objects:

// Array of objects
let objArr = [
    {
        name: 'john',
        age: 12,
        gender: 'male'
    },
    {
        name: 'jane',
        age: 15,
        gender: 'female'
    },
    {
        name: 'julie',
        age: 20,
        gender: 'trans'
    }
];

console.log("Accessing the value using the [] and DOT notations:")
console.log(objArr[1].gender);

Accessing the value using the [] and DOT notations:
female

Using forEach Loop

Using the forEach loop, you iterate over an array of objects, accessing each object individually. This approach allows you to work with entire objects or their specific properties, enabling manipulation or extraction of data within the loop.

Syntax:

arrayName.forEach(function(item) {
    console.log(item);
});

Example: The code below demonstrates how we can use the forEach loop to access the elements of the array of objects.

// Array of objects
let objArr = [
    {
        name: 'john',
        age: 12,
        gender: 'male'
    },
    {
        name: 'jane',
        age: 15,
        gender: 'female'
    },
    {
        name: 'julie',
        age: 20,
        gender: 'trans'
    }
];

console.log("Accessing the arrayusing the forEach loop:");
objArr.forEach(function (item) {
    console.log(item);
});

Accessing the arrayusing the forEach loop:
{ name: 'john', age: 12, gender: 'male' }
{ name: 'jane', age: 15, gender: 'female' }
{ name: 'julie', age: 20, gender: 'trans' }

Using map() Method

Using the map() method, you can access and transform elements in an array of objects. It applies a function to each object, returning a new array with modified data or specific properties from the original objects.

Syntax:

arrayName.map((item) => {
    console.log(item);
});

Example: In this example we uses map instead of forEach to iterate over objArr. While map returns a new array.

// Array of objects
let objArr = [
    {
        name: 'john',
        age: 12,
        gender: 'male'
    },
    {
        name: 'jane',
        age: 15,
        gender: 'female'
    },
    {
        name: 'julie',
        age: 20,
        gender: 'trans'
    }
];

console.log("Accessing the Array using the forEach loop:")
objArr.map((item) => {
    console.log(item);
});

Accessing the Array using the forEach loop:
{ name: 'john', age: 12, gender: 'male' }
{ name: 'jane', age: 15, gender: 'female' }
{ name: 'julie', age: 20, gender: 'trans' }

Using filter() Method

The filter() method in JavaScript is used to access and create a new array of objects that meet specific criteria. It filters the original array based on a condition, returning only the objects that satisfy the defined criteria.

Syntax:

arrayName.filter(function(item) {
    console.log(item);
});

Example: In this example, we are using filters objArr to find objects where name is 'jane'. It logs the filtered result, which includes only the object with name: 'jane'.

// Array of objects
let objArr = [
	{ name: 'john', age: 12, gender: 'male' },
	{ name: 'jane', age: 15, gender: 'female' },
	{ name: 'julie', age: 20, gender: 'trans' }
];


console.log("Using the filter method to access a specific value:");
const search = objArr.filter(item => item.name === 'jane');
console.log(search);

Using the filter method to access a specific value:
[ { name: 'jane', age: 15, gender: 'female' } ]