Convert an Object to an Array of Objects in JavaScript

avatar

Borislav Hadzhiev

Wed Nov 03 20212 min read

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 return the value of each key.

The function we passed to the map method gets invoked with each element (key) in the array and whatever the function returns, 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 use the map method and on each iteration to return an object preserving the key-value pair structure from the original object.

Further Reading #

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee