To convert an object to an array of objects in JavaScript, you can use any of the following methods –
- Use the Object.values() method to convert an object to an array of objects.
- Use the Object.keys() and map() method to convert an object to an array of objects.
- Use the Array.entries() and map() method to convert an object to an array of objects.
- Use the forEach() method to convert an object to an array of objects.
- Using Object.getOwnPropertyNames().
- Using a for…in loop
Let’s look at each of these methods in detail below.
Convert An Object To An Array Of Objects In JavaScript
In this introductory guide, we will explore four powerful techniques to convert an object into an array of objects. Each method presents its unique approach, catering to various programming styles and preferences.
1. Use the Object.values() method to convert an Object to an array of objects
The Object.values() method can be used to convert an object to an array of objects in JavaScript. This method returns an array of enumerable property values of the given object.
In the following example, we have an object and we use the Object.values() method to convert them to an array of objects.
var obj = {"student1″:{id:1, name:"John", marks:90}, "student2″:{id:2, name:"Smith", marks:80}};
console.log(Object.values(obj));
// Output
// [{ id: 1, name: ‘John’, marks: 90 } { id: 2, name: ‘Smith’, marks: 80 }]In this code, we initialize an object named obj. It contains two properties, "student1" and "student2", each of which holds an object with three key-value pairs: id, name, and marks. Each nested object represents a student with their respective information.
Here, the Object.values() method is applied to the obj object. This method retrieves all the values from the properties of the object and returns them as an array. In this case, it will collect the values of "student1" and "student2" (which are themselves objects) and form an array of these objects.
When we execute the console.log() statement, it will print the output to the console. The output shows an array of two objects, each representing a student’s information.
2. Use the Object.keys() and map() method to convert an Object to an array of objects
Another way to convert an object to an array of objects in JavaScript is to use the Object.keys() and map() method. The Object.keys() method returns an array of enumerable property names of the given object.
In the following example, we have an object and we use the Object.keys() and map() method to convert them to an array of objects.
var obj = {"student1″:{id:1, name:"John", marks:90}, "student2″:{id:2, name:"Smith", marks:80}};
console.log(Object.keys(obj).map((key) => obj[key]));
// Output
// [{ id: 1, name: ‘John’, marks: 90 } { id: 2, name: ‘Smith’, marks: 80 }]Here, we first use the Object.keys() method to extract the keys of the obj object. The Object.keys() method returns an array containing the keys of the object. In this case, it will produce an array with the values ["student1", "student2"].
Next, we use the map() method on this array of keys. The map() method allows us to create a new array by applying a function to each element of the original array.
The map() method is provided with an arrow function that takes each key from the array returned by Object.keys(). The arrow function then uses the key to access the corresponding value in the obj object and returns that value. Essentially, this step is creating a new array that consists of the student objects stored in the obj object.
When we execute the console.log() statement, it will print the output to the console. The output shows an array of two objects, each representing a student’s information.
3. Use the Array.entries() and map() method to convert an Object to an array of objects
If you want to maintain the key-value pairs while converting an object to an array of objects, you can use the Array.entries() and map() method.
The Array.entries() method returns an array of arrays whose elements are the enumerable string-keyed property values of the given object that are also accessible using Object.entries().
In the following example, we have an object and we use the Array.entries() and map() method to convert them to an array of objects.
var obj = {"student1″:{id:1, name:"John", marks:90}, "student2″:{id:2, name:"Smith", marks:80}};
console.log(Object.entries(obj).map((entry) => entry[1]));// Output
[{
id: 1,
marks: 90,
name: “John”
}, {
id: 2,
marks: 80,
name: “Smith”
}]
Here, we use the Object.entries() method to transform the obj object into an array of key-value pairs. The Object.entries() method returns an array of arrays, where each inner array contains two elements: the key as the first element and the corresponding value as the second element.
Next, we use the map() method on this array of key-value pairs. The map() method allows us to create a new array by applying a function to each element of the original array.
The arrow function provided to the map() method takes each element of the array produced by Object.entries(), represented by entry. In this case, each entry is an array with two elements: the key and the corresponding value. The arrow function then returns the second element of each entry, which is the value.
You can also use Object.entries() to create an array of objects with both the key and the value –
var obj = {"student1″:{id:1, name:"John", marks:90}, "student2″:{id:2, name:"Smith", marks:80}};
console.log(Object.entries(obj).map((entry) => {
return {[entry[0]]: entry[1]};
}));Output
[{
student1: {
id: 1,
marks: 90,
name: “John”
}
}, {
student2: {
id: 2,
marks: 80,
name: “Smith”
}
}]
4. Use the forEach() method to convert an Object to an array of objects
Another way to convert an object to an array of objects is to use the forEach() method. The forEach() method executes a provided function once per array element.
In the following example, we have an object and we use the forEach() method to convert them to an array of objects.
var obj = {"student1″:{id:1, name:"John", marks:90}, "student2″:{id:2, name:"Smith", marks:80}};
var arr = [];
Object.keys(obj).forEach((key) => {
arr.push(obj[key]);
});
console.log(arr);Output
[{
id: 1,
marks: 90,
name: “John”
}, {
id: 2,
marks: 80,
name: “Smith”
}]
Here, we use the Object.keys() method to extract the keys of the obj object. The Object.keys() method returns an array containing the keys of the object. In this case, it will produce an array with the values ["student1", "student2"].
Next, we use the forEach() method on this array of keys. The forEach() method allows us to iterate through each element of the array and perform a specified action on each element.
Inside the forEach() method, we have an arrow function that takes each key from the array of keys returned by Object.keys(). The arrow function then uses the key to access the corresponding value in the obj object (e.g., obj["student1"] will give us the value { id: 1, name: "John", marks: 90 }). The retrieved value is then pushed into the arr array using the arr.push() method.
When we execute the console.log() statement, it will print the output to the console. The output will be an array containing the student objects extracted from the obj object.
The forEach() method efficiently iterated through the keys of the obj object, and for each key, it retrieved the corresponding value (student object) and added it to the arr array. As a result, the arr array contains all the student objects, effectively converting the obj object into an array of objects. This approach is another way to achieve the same result as using Object.values() or Object.entries() to convert an object to an array of objects in JavaScript.
5. Use Object.getOwnPropertyNames()
var obj = {
"student1": { id: 1, name: "John", marks: 90 },
"student2": { id: 2, name: "Smith", marks: 80 }
};
var arr = Object.getOwnPropertyNames(obj).map((key) => obj[key]);
console.log(arr);
The Object.getOwnPropertyNames() method returns an array of all properties (including non-enumerable properties) found directly in a given object. In this case, it returns an array containing the keys of the obj object. Then, the map() method is used to iterate through these keys and retrieve the corresponding values, resulting in an array of student objects, just like the other methods.
6. Use a for…in loop
var obj = {
"student1": { id: 1, name: "John", marks: 90 },
"student2": { id: 2, name: "Smith", marks: 80 }
};
var arr = [];
for (var key in obj) {
arr.push(obj[key]);
}
console.log(arr);
The for...in loop iterates over the enumerable properties of an object. Here, it goes through each key in the obj object, and for each key, the corresponding value (student object) is retrieved using obj[key] and added to the arr array. This loop achieves the same result as the forEach() method, converting the object to an array of objects.
Conclusion
In conclusion, there are several efficient methods to convert an object to an array of objects in JavaScript. Whether you prefer using Object.values(), Object.keys() with map(), Object.entries() with map(), forEach(), Object.getOwnPropertyNames(), or a for...in loop, each approach accomplishes the same task with slight variations in implementation.
JavaScript’s versatility empowers developers to select the method that aligns best with their coding style and project requirements. By mastering these techniques, you can easily manipulate data structures, enhancing your proficiency and problem-solving abilities in JavaScript programming.
I hope you found this article helpful. If you have any questions or comments, please feel free to post them below. Thanks for reading!