Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to access properties of an array of objects in JavaScript?
In JavaScript, accessing properties of objects within an array is a common task. Whether you're working with a single object or an array of objects, there are several methods to retrieve property values effectively.
JavaScript objects are collections of key-value pairs called properties. When you have an array containing multiple objects, you need specific techniques to access the properties of each object. Let's explore the main approaches.
Using Dot Notation
Dot notation is the most straightforward way to access object properties when the property name is known and is a valid JavaScript identifier. The syntax is object.propertyName.
Syntax
var value = myObject.propertyName;
Example
Here's how to access properties of objects in an array using dot notation:
<html>
<head>
<title>Dot Notation Example</title>
</head>
<body>
<h3>Access properties of an array of objects using dot notation</h3>
<p id="output1"></p>
<script>
// Array of book objects
const books = [
{
title: "Chronicles of Economics",
author: "Anirban Maity",
price: 399,
publisher: "Geetam Publishers",
isbn: "Q123D8"
},
{
title: "Advanced JavaScript",
author: "Sarah Johnson",
price: 499,
publisher: "Tech Books",
isbn: "A456B9"
}
];
let output = document.getElementById("output1");
let result = "";
// Access properties using dot notation
for (let i = 0; i < books.length; i++) {
result += "Book " + (i + 1) + ":" + "<br>";
result += "Title: " + books[i].title + "<br>";
result += "Author: " + books[i].author + "<br>";
result += "Price: $" + books[i].price + "<br><br>";
}
output.innerHTML = result;
</script>
</body>
</html>
Using Square Bracket Notation
Square bracket notation is useful when property names are dynamic, contain special characters, or are stored in variables. The syntax is object["propertyName"].
Syntax
var value = myObject["propertyName"];
Example
This example demonstrates accessing object properties using square bracket notation:
<html>
<head>
<title>Square Bracket Notation Example</title>
</head>
<body>
<h3>Access properties using square bracket notation</h3>
<p id="output2"></p>
<script>
const books = [
{
title: "Day in the life of a National Swimmer",
author: "Amitanshu Maity",
price: 768,
publisher: "Honey Well Publishers",
isbn: "245F67"
}
];
let output = document.getElementById("output2");
let result = "";
// Property names in an array for dynamic access
const properties = ["title", "author", "price", "publisher", "isbn"];
properties.forEach(prop => {
result += prop.charAt(0).toUpperCase() + prop.slice(1) + ": " +
books[0][prop] + "<br>";
});
output.innerHTML = result;
</script>
</body>
</html>
Using Object Destructuring
Object destructuring provides a clean way to extract multiple properties from objects into separate variables. This is especially useful when you need to work with specific properties frequently.
Syntax
const { property1, property2 } = object;
Example
Here's how to use destructuring to access properties from objects in an array:
<html>
<head>
<title>Object Destructuring Example</title>
</head>
<body>
<h3>Access properties using object destructuring</h3>
<p id="output3"></p>
<script>
const books = [
{
title: "Let Us JavaScript",
author: "Neelanshu R",
price: 456,
publisher: "Trinity Publishers",
isbn: "F624RT"
},
{
title: "React Fundamentals",
author: "Mike Chen",
price: 399,
publisher: "Web Dev Press",
isbn: "R789X2"
}
];
let output = document.getElementById("output3");
let result = "";
// Using destructuring to extract properties
books.forEach((book, index) => {
const { title, author, price } = book;
result += `Book ${index + 1}: ${title} by ${author} - $${price}<br>`;
});
output.innerHTML = result;
</script>
</body>
</html>
Comparison of Methods
| Method | Use Case | Advantages |
|---|---|---|
| Dot Notation | Known property names | Clean, readable syntax |
| Square Brackets | Dynamic property names | Flexible, works with variables |
| Destructuring | Multiple properties needed | Concise, creates variables |
Conclusion
JavaScript offers multiple ways to access object properties within arrays. Use dot notation for simple, known properties, square brackets for dynamic access, and destructuring when extracting multiple properties. Choose the method that best fits your specific use case and coding style.
5K+ Views
