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 convert Object's array to an array using JavaScript?
Converting an array of objects to a flat array is a common task in JavaScript. There are several approaches to extract all values from objects and create a single array containing those values.
Let's understand the problem with an example:
Given Array of Objects:
let carObj = [
{ name: "John", car: "Ford" },
{ name: "Mark", car: "BMW" },
{ name: "Ben", car: "Toyota" }
]
Expected Output:
["John", "Ford", "Mark", "BMW", "Ben", "Toyota"]
There are multiple ways to achieve this conversion:
Using for...of loop with Object.values()
Using Array.map() method
Using Array.flatMap() method
Using for...of Loop with Object.values()
The for...of loop iterates through each object, and Object.values() extracts all values from each object. We use the spread operator to flatten the values into a single array.
Steps
Create an empty array to store the resulting values
Loop through the array of objects using for...of loop
Extract values from each object using Object.values()
Push the values into the result array using the spread operator
Example
<html>
<head>
<title>Convert Object Array to Flat Array</title>
</head>
<body>
<h3>Converting Object Array to Flat Array using for...of loop</h3>
<script>
// Array of objects
let carObj = [
{ name: "John", car: "Ford" },
{ name: "Mark", car: "BMW" },
{ name: "Ben", car: "Toyota" }
];
// Initialize empty array
let flatArray = [];
// Loop through objects and extract values
for (let obj of carObj) {
flatArray.push(...Object.values(obj));
}
// Display result
document.write("Original Array: " + JSON.stringify(carObj) + "<br><br>");
document.write("Flat Array: [" + flatArray.join(", ") + "]");
</script>
</body>
</html>
Using Array.map() Method
Array.map() creates a new array by calling a function on every element. However, when extracting all values, we typically need to combine it with Array.flat() or use it to extract specific properties.
Example - Extracting Specific Properties
<html>
<head>
<title>Extract Properties using Array.map()</title>
</head>
<body>
<h3>Extracting specific properties using Array.map()</h3>
<script>
// Array of objects
let carObj = [
{ name: "John", car: "Ford" },
{ name: "Mark", car: "BMW" },
{ name: "Ben", car: "Toyota" }
];
// Extract names and cars separately
let names = carObj.map(item => item.name);
let cars = carObj.map(item => item.car);
// Combine into single array
let combined = [...names, ...cars];
document.write("Names: [" + names.join(", ") + "]<br>");
document.write("Cars: [" + cars.join(", ") + "]<br>");
document.write("Combined: [" + combined.join(", ") + "]");
</script>
</body>
</html>
Using Array.flatMap() Method
Array.flatMap() is the most elegant solution as it maps and flattens in one step.
<html>
<head>
<title>Using flatMap() Method</title>
</head>
<body>
<h3>Converting using Array.flatMap() method</h3>
<script>
// Array of objects
let carObj = [
{ name: "John", car: "Ford" },
{ name: "Mark", car: "BMW" },
{ name: "Ben", car: "Toyota" }
];
// Use flatMap to extract and flatten values
let flatArray = carObj.flatMap(obj => Object.values(obj));
document.write("Original: " + JSON.stringify(carObj) + "<br><br>");
document.write("Flat Array: [" + flatArray.join(", ") + "]");
</script>
</body>
</html>
Comparison
| Method | Readability | Performance | Browser Support |
|---|---|---|---|
| for...of loop | Good | Fast | Excellent |
| Array.map() | Good | Medium | Excellent |
| Array.flatMap() | Best | Fast | Modern browsers |
Conclusion
Use Array.flatMap() for the most concise solution, or for...of loop with Object.values() for better browser compatibility. Both approaches effectively convert an array of objects into a flat array of values.
9K+ Views
