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 print object array in JavaScript?
In this tutorial, we will learn how to print object arrays in JavaScript.
An array of objects is a collection that stores multiple objects with similar structure in a single variable. Each object can contain multiple properties, making it useful for storing complex data like user information, product details, or any structured data.
Let's explore different methods to print arrays of objects in JavaScript.
Using JSON.stringify() Method
The JSON.stringify() method converts JavaScript objects into JSON strings, making it perfect for displaying arrays of objects in a readable format.
Syntax
JSON.stringify(value, replacer, space)
Parameters
- value ? The array of objects to convert
- replacer ? Optional. A function or array that filters/transforms the output
- space ? Optional. Number of spaces (1-10) or string for indentation
Example
<html>
<body>
<pre id="output"></pre>
<script>
let fruits = [
{name: "Orange", price: 1.50, category: "citrus"},
{name: "Apple", price: 0.99, category: "pome"},
{name: "Banana", price: 0.79, category: "tropical"}
];
// Display with formatting
document.getElementById("output").innerHTML = JSON.stringify(fruits, null, 2);
</script>
</body>
</html>
[
{
"name": "Orange",
"price": 1.5,
"category": "citrus"
},
{
"name": "Apple",
"price": 0.99,
"category": "pome"
},
{
"name": "Banana",
"price": 0.79,
"category": "tropical"
}
]
Using console.table() Method
The console.table() method displays arrays and objects as interactive tables in the browser console. This method is supported by all modern browsers except Internet Explorer.
Syntax
console.table(data, columns)
Parameters
- data ? The array of objects to display
- columns ? Optional. Array of column names to display specific properties only
Example
<html>
<body>
<p>Open the browser console (F12) to see the table output</p>
<script>
let employees = [
{id: 1, name: "John", department: "Engineering", salary: 75000},
{id: 2, name: "Sarah", department: "Marketing", salary: 65000},
{id: 3, name: "Mike", department: "Sales", salary: 55000}
];
// Display all columns
console.log("All employee data:");
console.table(employees);
// Display specific columns only
console.log("Names and departments only:");
console.table(employees, ["name", "department"]);
</script>
</body>
</html>
Using forEach() with console.log()
For simple console output, you can iterate through the array and log each object individually.
Example
<html>
<body>
<p>Check the console for individual object output</p>
<script>
let books = [
{title: "JavaScript Guide", author: "Mozilla", year: 2023},
{title: "Clean Code", author: "Robert Martin", year: 2008},
{title: "Design Patterns", author: "Gang of Four", year: 1994}
];
console.log("Books in the collection:");
books.forEach((book, index) => {
console.log(`Book ${index + 1}:`, book);
});
</script>
</body>
</html>
Comparison of Methods
| Method | Output Location | Formatting | Browser Support |
|---|---|---|---|
JSON.stringify() |
Web page or console | JSON format with indentation | All browsers |
console.table() |
Console only | Interactive table | Modern browsers (not IE) |
forEach() + console.log() |
Console only | Individual object logs | All browsers |
Conclusion
Use JSON.stringify() for webpage display, console.table() for debugging with tabular format, and forEach() for simple console logging. Choose based on your output requirements and browser compatibility needs.
21K+ Views
