Object to Array in Javascript

We may come across scenarios where we need to convert data into a particular format. Similarly, in javascript, we can convert an object to an array using Objects method in multiple ways as discussed below. Using the below approach, we can fetch data in key-value pairs.

ES6: Using Object.keys() to convert Object to array in JavaScript

ECMAScript 2015 or ES6 introduced Object.keys() method to fetch the key data (property)of an object. In the below example, we will fetch the property names of the object “Book”. In this way, we can convert an object to an array.

const Book = {
  Name : "Revolution 2020",
  Author : "Chethan Bhagat"
};

const propertyBook = Object.keys(Book);
console.log(propertyBook);
Output:
[ 'Name', 'Author' ]

ES7: Using Object.values() to convert an object to array in JavaScript

In ES6 rollout, we can only fetch property names but not their values. But, we may want to retrieve ts values as well. Hence, ES7 introduced an option to fetch the values as illustrated in the below example. The output obtained is thus in the form of an array. Here, we are using Object.keys() to get the property names and Object.values() to get the property values.

const Book = {
  Name : "Revolution 2020",
  Author : "Chethan Bhagat"
};

const propertyBook = Object.keys(Book);
const propertyValues = Object.values(Book);

console.log(propertyBook);
console.log(propertyValues);
Output:
[ 'Name', 'Author' ]
[ 'Revolution 2020', 'Chethan Bhagat' ]

ES7: Using Object.entries()

Sometimes, we may want to retrieve both property names and values using a single method. For this , ES7 rolled out Object.entries() method to fetch the object data in an array format, . In other words, this method returns an array of key-value pairs. We can get the individual array values by using for loop. This is the most suitable method to convert an object to an array in javascript.

const Book = {
  Name : "Revolution 2020",
  Author : "Chethan Bhagat"
};

const entries = Object.entries(Book);

console.log(entries);
for(i=0;i<entries.length;i++)
{
	console.log(entries[i]);
}
Output:
[ [ 'Name', 'Revolution 2020' ], [ 'Author', 'Chethan Bhagat' ] ]
[ 'Name', 'Revolution 2020' ]
[ 'Author', 'Chethan Bhagat' ]

Using map function

We can use Objet.keys() method along with the map() method to retrieve key-value data as an array. In the below example, we retrieve the key data using Object.keys() and then pass this to map() to get the data as key-value pair. Book[key] retrieves the value.

const Book = {
  Name : "Revolution 2020",
  Author : "Chethan Bhagat"
};
var array = Object.keys(Book)
      .map(function(key) {
        return [key,Book[key]]
        });
console.log(array);

Output:
[ [ 'Name', 'Revolution 2020' ], [ 'Author', 'Chethan Bhagat' ] ]

The Object.entries() method is more efficient since it is a one-liner that gives the same output.

References

Translate »