How to Access Array of Objects in JavaScript ?
Last Updated :
06 Sep, 2024
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.
How to Access an Array of Objects in JavaScript?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.
JavaScript
// 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]);
OutputFirst 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:
JavaScript
// 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);
OutputAccessing 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.
JavaScript
// 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);
});
OutputAccessing 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.
JavaScript
// 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);
});
OutputAccessing 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'.
JavaScript
// 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);
OutputUsing the filter method to access a specific value:
[ { name: 'jane', age: 15, gender: 'female' } ]
Similar Reads
How to compare Arrays of Objects in JavaScript? In JavaScript, comparing arrays of objects can be more complex than comparing primitive data types. We will discuss different ways to compare arrays of objects effectively, with detailed code examples and explanations.Syntax: Before going to detail the comparison techniques, let's first understand h
5 min read
How to Convert Object to Array in JavaScript? In this article, we will learn how to convert an Object to an Array in JavaScript. Given an object, the task is to convert an object to an Array in JavaScript. Objects and Arrays are two fundamental data structures. Sometimes, it's necessary to convert an object to an array for various reasons, such
4 min read
How to Push an Array into Object in JavaScript? To push an array into the Object in JavaScript, we will be using the JavaScript Array push() method. First, ensure that the object contains a property to hold the array data. Then use the push function to add the new array in the object.Understanding the push() MethodThe array push() method adds one
2 min read
How to use forEach with an Array of Objects in JavaScript ? Using the forEach() method with an array of objects in JavaScript is essential for iterating over collections and performing operations on each object. This guide explores effective techniques to utilize forEach() for array manipulation, enhancing your coding skills. Syntax: array.forEach( function(
3 min read
How to Store an Object Inside an Array in JavaScript ? Storing an object inside an array in JavScript involves placing the object as an element within the array. The array becomes a collection of objects, allowing for convenient organization and manipulation of multiple data structures in a single container. Following are the approaches through which it
3 min read
How to Get a List of Array Keys in JavaScript? Here are the different methods to get a list of associative array keys in JavaScript1. Using JavaScript for each loopIn this method, traverse the entire associative array using a for each loop and display the key elements of the array. javascriptlet a = {Newton: "Gravity",Albert: "Energy",Edison: "B
3 min read
How to Traverse Array of Objects and Access the Properties in JavaScript? Here are the various methods to traverse an array of objects and access the properties in JavaScript1. Using forâ¦in loopThe for...in loop is used to iterate over the enumerable properties of an object. JavaScriptconst a = [ {name: 'Saritha', sub: 'Maths'}, {name: 'Sarthak', sub: 'Science'}, {name: '
4 min read
How to Convert String of Objects to Array in JavaScript ? This article will show you how to convert a string of objects to an array in JavaScript. You have a string representing objects, and you need to convert it into an actual array of objects for further processing. This is a common scenario when dealing with JSON data received from a server or stored i
3 min read
How to Convert an Object into Array of Objects in JavaScript? Here are the different methods to convert an object into an array of objects in JavaScript1. Using Object.values() methodObject.values() method extracts the property values of an object and returns them as an array, converting the original object into an array of objects.JavaScriptconst a = { java:
3 min read
How to get dynamic access to an object property in JavaScript ? In JavaScript, an object is a collection of properties, where each property consists of a key-value pair. Objects are a fundamental data type in JavaScript. You can create an object in JavaScript in the following ways: By using the object literal notation, which is a comma-separated list of key-valu
7 min read