Convert an Object to an Array of Objects in JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

Convert an Object to an Array of Objects #

Use the Object.values() method to convert an object to an array of objects, e.g. const arr = Object.values(obj). The Object.values method takes an object as a parameter and returns an array containing the object's property values.

index.js
const obj = { emp1: { id: 1, name: 'Alice', }, emp2: { id: 2, name: 'Bob', }, }; // ✅ Using Object.values() const arrOfObj1 = Object.values(obj); console.log(arrOfObj1); // 👉️ [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}] // ✅ Using Object.keys() const arrOfObj2 = Object.keys(obj).map(key => obj[key]); console.log(arrOfObj2); // 👉️ [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}] // ✅ Using Object.entries() const arrOfObj3 = Object.entries(obj).map(entry => entry[1]); console.log(arrOfObj3); // 👉️ [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}] // 🚨 Preserving nested keys const withNestedKeys = Object.entries(obj).map(entry => { return {[entry[0]]: entry[1]}; }); // 👇️ [{emp1: {id: 1, name: 'Alice'}}, {emp2: {id: 2, name: 'Bob'}}] console.log(withNestedKeys);

Our first example uses the Object.values method to convert the object to an array of objects.

The Object.values method returns an array containing the object's own (none of the inherited) enumerable property values.

Notice that the keys of the object get automatically removed. If you need to preserve the keys, look at the last code snippet.

Here's an example of using the Object.values() method without nested properties.

index.js
// 👇️ ['Tom', 'Chile'] console.log(Object.values({name: 'Tom', country: 'Chile'}));

Our second example uses the Object.keys() method, which returns an array of the object's keys.

index.js
const obj = { emp1: { id: 1, name: 'Alice', }, emp2: { id: 2, name: 'Bob', }, }; const arrOfObj2 = Object.keys(obj).map(key => obj[key]); console.log(arrOfObj2); // 👉️ [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}] // 👇️ ['name', 'country'] console.log(Object.keys({name: 'Tom', country: 'Chile'}));

To get an array of objects, we had to use the Array.map method to iterate over the array of keys and returned the value of each key.

The function we passed to the map method gets called with each element (key) in the array. Whatever we return from the function gets added to the new array that the map method returns.

The third example uses the Object.entries method. The method returns an array of key-value pair arrays.

index.js
const obj = { emp1: { id: 1, name: 'Alice', }, emp2: { id: 2, name: 'Bob', }, }; // 👉️ [['emp1', {id: 1, name: 'Alice'}], ['emp2', {id: 2, name: 'Bob'}]] console.log(Object.entries(obj));

Then, we used the map method to return only the value of each key.

index.js
const obj = { emp1: { id: 1, name: 'Alice', }, emp2: { id: 2, name: 'Bob', }, }; const arrOfObj3 = Object.entries(obj).map(entry => entry[1]); console.log(arrOfObj3); // 👉️ [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}]

The last example uses the Object.entries method, to preserve the nested keys of the object when converting it to an array of objects.

index.js
const obj = { emp1: { id: 1, name: 'Alice', }, emp2: { id: 2, name: 'Bob', }, }; // ✅ With nested keys const withNestedKeys = Object.entries(obj).map(entry => { return {[entry[0]]: entry[1]}; }); // 👇️ [{emp1: {id: 1, name: 'Alice'}}, {emp2: {id: 2, name: 'Bob'}}] console.log(withNestedKeys);

We used the map method to iterate over the array.

On each iteration, we return an object and preserve the key-value pair structure from the original object.

Further Reading #

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.