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

Answer 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...
}

Answer 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.