How to get all values of a Javascript Object by its keys?

Question

I have a Javascript object with some keys and values:

var obj = { 
    "key1" : "val1", 
    "key2" : "val2", 
    "key3" : "val3", 
    "key4" : ""
}

I want to iterate all keys and retrieving all values.

I tried 2 ways:

1) Using for(var key in keys)

var keys = Object.keys(obj);
for (var key in keys) {
    // ...
}

The problem with this solution is that keys object is an array, so I have to use obj[keys[key]]]. Not very pretty.

Furthermore, inspecting "key4", the return value is "0" instead of "" (empty).

2) Using forEach

Object.keys(obj).forEach(function(key){
    // ...
});

The problem in this case is that if I try to do:

Object.keys(obj).forEach(function(key){
    obj[key];  // <- obj is undefined !!
});

The "obj" variable is undefined in the foreach!

What's the best way to iterate in all keys for retrieving all values?

Thanks

Solution 1

Just use for in.

var obj = { 
  "key1" : "val1", 
  "key2" : "val2", 
  "key3" : "val3", 
  "key4" : ""
};

for (var key in obj) {

  console.log(key); // key1 and etc...
  console.log(obj[key]); // val1 and etc...
}

Solution 2

In your first example, you're using for-in to loop through an array, which is not generally a good idea. To loop through arrays, this answer has lots of options for you.

If you want to loop through all of an object's keys, use for-in on the object:

for (var key in obj) {
    var value = obj[key];
    // ...
}

Note that you'll see both the object's own properties and also ones it inherits from its prototype. If you just want own properties, you could add a guard:

for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        var value = obj[key];
        // ...
    }
}

...or use Object.keys (introduced in ES5, in 2009, so not on IE8; there's a shim if you need to support obsolete browsers like IE8):

Object.keys(obj).forEach(function(key) {
    var value = obj[key];
    // ...
});

In both cases, you'll only get the object's enumerable properties. If you need to include non-enumerable properties, reach for getOwnPropertyNames:

Object.getOwnPropertyNames(obj).forEach(function(key) {
    var value = obj[key];
    // ...
});

That will get the object's own (not inherited) property names, even if non-enumerable, as long as they're strings (which they always are in ES5 and earlier; in ES2015 and later, they're normally strings but can also be Symbol instances if you use Symbols).

getOwnPropertyNames was also introduced in ES5, but I don't think it can be shimmed, so you can't use it in IE8 or other obsolete browsers.

Solution 3

Update:

Object.values() may do the job.

Alternate approach:

Using ES6, Object.keys(obj).map(key => obj[key]) will return an array containing all the values.

Solution 4

Object.values() will provide an array of the objects property values.

 const object1 = {   a: 'somestring',   b: 42,   c: false };


 console.log(Object.values(object1)); // expected output: Array

 ["somestring", 42, false]

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

View more solutions

Comments

[Amadan]

Note that this is dangerous, as T.J. Crowder says, as it will also iterate over any inherited properties. For example, it will iterate five times instead of four if you do Object.prototype.foo = "bar".

[Lajos Arpad]

Please add an explanation to your answer.

[JimHawkins]

code only answers aren't very useful to the community. Please look at How to Answer

[Eduardo Melo]

You could secure this for in loop with Object.hasOwnProperty(), which checks if a given property is not inherited.