How might I extract the property values of a JavaScript object into an array?

JavascriptArraysJson

Javascript Problem Overview


Given a JavaScript object:

var dataObject = {
   object1: {id: 1, name: "Fred"}, 
   object2: {id: 2, name: "Wilma"}, 
   object3: {id: 3, name: "Pebbles"}
};

How do I efficiently extract the inner objects into an array? I do not need to maintain a handle on the object[n] IDs.

var dataArray = [
    {id: 1, name: "Fred"}, 
    {id: 2, name: "Wilma"}, 
    {id: 3, name: "Pebbles"}]

Javascript Solutions


Solution 1 - Javascript

var dataArray = Object.keys(dataObject).map(function(k){return dataObject[k]});

Solution 2 - Javascript

var dataArray = [];
for(var o in dataObject) {
    dataArray.push(dataObject[o]);
}

Solution 3 - Javascript

ES6 version:

var dataArray = Object.keys(dataObject).map(val => dataObject[val]);

Solution 4 - Javascript

Using underscore:

var dataArray = _.values(dataObject);

Solution 5 - Javascript

With jQuery, you can do it like this -

var dataArray = $.map(dataObject,function(v){
     return v;
});

Demo

Solution 6 - Javascript

ES2017 using Object.values:

const dataObject = {
    object1: {
        id: 1,
        name: "Fred"
    },
    object2: {
        id: 2,
        name: "Wilma"
    },
    object3: {
        id: 3,
        name: "Pebbles"
    }
};

const valuesOnly = Object.values(dataObject);

console.log(valuesOnly)

Solution 7 - Javascript

Assuming your dataObject is defined the way you specified, you do this:

var dataArray = [];
for (var key in dataObject)
	dataArray.push(dataObject[key]);

And end up having dataArray populated with inner objects.

Solution 8 - Javascript

Using the accepted answer and knowing that Object.values() is proposed in ECMAScript 2017 Draft you can extend Object with method:

if(Object.values == null) {
    Object.values = function(obj) {
        var arr, o;
        arr = new Array();
        for(o in obj) { arr.push(obj[o]); }
        return arr;
    }
}

Solution 9 - Javascript

[Editing and updating my answer. The other answers seem to overlap with mine pretty much, but, I thought I have another ago and provide an alternative].

I present 3 solutions to this problem, based on:

  • Object.keys
  • Object.values
  • Object.entries

Objects.keys() solution:

let keys = Object.keys(dataObject); // ["object1", "object2", "object3" ];
let keysToResult = keys.map( e => dataObject[e] ); // [{"id":1,"name":"Fred"},{"id":2,"name":"Wilma"},{"id":3,"name":"Pebbles"}]

Object.values solution:

let values = Object.values(dataObject); // [{"id":1,"name":"Fred"},{"id":2,"name":"Wilma"},{"id":3,"name":"Pebbles"}]

Object.entries solution:

let entries = Object.entries(dataObject); // [["object1",{"id":1,"name":"Fred"}],["object2",{"id":2,"name":Wilma"}],["object3",{"id":3,"name":"Pebbles"}]]
let entriesToResult = entries.map( ([k,v]) => v ); [{"id":1,"name":"Fred"},{"id":2,"name":"Wilma"},{"id":3,"name":"Pebbles"}]

All three solutions have their own features.

Object.keys() returns an array with insufficient result. So, we use Array.prototype.map to top up each value in the array to get close to what we want. In general, we can think of Object.keys() combined with map as a mechanism to customize our result list with what we want.

Object.values() is interesting since it discards the key and just returns the results only. In fact, for this problem, this is perfect since the answer requires no further processing.

Object.entries() returns more than what we want since it returns both keys and values. We need to use map to customize our result. In fact, we need to cut out the excess information.

Object.keys(), Object.values() and Object.entries() are all very useful functions which is why I wanted to show all 3 as a solution to this problem. Depending on your specific use case, you may find one to a better fit to solving your problem.

Solution 10 - Javascript

Maybe a bit verbose, but robust and fast

var result = [];
var keys = Object.keys(myObject);
for (var i = 0, len = keys.length; i < len; i++) {
    result.push(myObject[keys[i]]);
}

Solution 11 - Javascript

Object.values() method is now supported. This will give you an array of values of an object.

Object.values(dataObject)

Refer: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Object/values

Solution 12 - Javascript

In case you use d3. you can do d3.values(dataObject) which will give

enter image description here

Solution 13 - Javascript

I prefer to destruct object values into array:

[...Object.values(dataObject)]

var dataObject = {
   object1: {id: 1, name: "Fred"}, 
   object2: {id: 2, name: "Wilma"}, 
   object3: {id: 3, name: "Pebbles"}
};

var dataArray = [...Object.values(dataObject)];

Solution 14 - Javascript

This one worked for me

var dataArray = Object.keys(dataObject).map(function(k){return dataObject[k]});

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMatt NorrisView Question on Stackoverflow
Solution 1 - JavascriptAnonymousView Answer on Stackoverflow
Solution 2 - JavascriptMurali VPView Answer on Stackoverflow
Solution 3 - JavascriptThoranView Answer on Stackoverflow
Solution 4 - JavascriptrzymekView Answer on Stackoverflow
Solution 5 - JavascriptMohammad AdilView Answer on Stackoverflow
Solution 6 - JavascriptryanpcmcquenView Answer on Stackoverflow
Solution 7 - JavascriptMarko DumicView Answer on Stackoverflow
Solution 8 - JavascriptmarverixView Answer on Stackoverflow
Solution 9 - JavascriptStephen QuanView Answer on Stackoverflow
Solution 10 - JavascriptmartyglaubitzView Answer on Stackoverflow
Solution 11 - JavascriptSambhav SharmaView Answer on Stackoverflow
Solution 12 - JavascriptShankar ARULView Answer on Stackoverflow
Solution 13 - JavascriptsimPodView Answer on Stackoverflow
Solution 14 - Javascriptephantus okumuView Answer on Stackoverflow