Converting Object to Array using ES6 features
JavascriptArraysEcmascript 6Javascript Problem Overview
Given a javascript object, how can I convert it to an array in ECMAScript-6 ?
For example, given:
var inputObj = {a:'foo', b:[1,2,3], c:null, z:55};
The expected output would be:
['foo', [1,2,3], null, 55]
The order of the elements in the result is not important to me.
Javascript Solutions
Solution 1 - Javascript
Use (ES5) Array::map
over the keys
with an arrow function (for short syntax only, not functionality):
let arr = Object.keys(obj).map((k) => obj[k])
True ES6 style would be to write a generator, and convert that iterable into an array:
function* values(obj) {
for (let prop of Object.keys(obj)) // own properties, you might use
// for (let prop in obj)
yield obj[prop];
}
let arr = Array.from(values(obj));
Regrettably, no object iterator has made it into the ES6 natives.
Solution 2 - Javascript
just use Object.values
Object.values(inputObj); // => ['foo', [1,2,3], null, 55]
Solution 3 - Javascript
I like the old school way:
var i=0, arr=[];
for (var ob in inputObj)
arr[i++]=ob;
Old school wins the jsperf test by a large margin, if not the upvotes. Sometimes new additions are "mis-features."
Solution 4 - Javascript
This can be achieved using the Array Comprehension syntax:
[for (key of Object.keys(inputObj)) inputObj[key]]
Usage example:
var inputObj = {a:'foo', b:[1,2,3], c:null, z:55};
var arr = [for (key of Object.keys(inputObj)) inputObj[key]];
console.log(arr);
// prints [ 'foo', [ 1, 2, 3 ], null, 55 ]
Solution 5 - Javascript
ES7 way:
let obj = { a: "foo", b: "bar", c: 1, d: [1, 2, 3, 4] }
Object.values(obj)
// output --> ['foo', 'bar', 1, [1, 2, 3, 4]
Solution 6 - Javascript
Update August 2020
As a summary, in ES6, there are three (3) variations to convert an Object to an Array as follows:
const MyObjects = { key1: 'value 1', key2: 'value 2', };
// Method 1: Converts the keys to Array
// --------------------------------------
Object.keys(MyObjects);
// ['key1', 'key2']
// Method 2 Converts the Values to Array
// --------------------------------------
Object.values(MyObjects);
// ['value 1', 'value 2']
// Method 3 Converts both Values and Keys
// --------------------------------------
Object.entries(MyObjects);
// [ ['key1', 'value 1'], ['key2', 'value 2'] ]
Converting an Array back to an Object can be done as follows:
const array = [ ['one', 1], ['two', 2], ];
Object.fromEntries(array);
// { one: 1, two: 2 }
Solution 7 - Javascript
Array.map
equivalent of @Bergi's arrow function (see MDN for more about Array.map
).
Edit 2020: converted to snippet and added an alternative
const obj = {
a: 'foo',
b: [1, 2, 3],
c: null,
z: 55
},
nwArr = Object.keys(obj).map(k => obj[k]),
// Alternative
nwArr2 = Object.fromEntries(Object.entries(obj));
nwArr.a = "bar";
nwArr2.a = "foobar"
console.log(`obj.a: ${obj.a}, nwArr.a: ${nwArr.a}, nwArr2.a: ${nwArr2.a}`);
Solution 8 - Javascript
const address = {
street: "bew1111",
city: "err111",
country: "ind11"
};
const address2 = {
street: "bewscxsd",
city: "errdc",
country: "indcdsc"
};
we have two objects here and I am going to use 2 methods for assign both objects into Array
-
Object.entries()
-
Object.keys()
1st one starts here-----
var firstar = Object.entries(address);
here I assigned address into firstar
and when you will run this you will get output like this
(3) [Array(2), Array(2), Array(2)]
2nd one starts here
var secstar = Object.keys(address2);
here I assigned address2 into secstar
and when you will run this you will get output like this
(3) ["street", "city", "country"]