[javascript] How can I get a collection of keys in a JavaScript dictionary?

I have a dictionary:

var driversCounter = {
    "one":   1,
    "two":   2,
    "three": 3,
    "four":  4,
    "five":  5
}

Now, I need to show it in a dropdownlist. How can I get the collection of keys in my dictionary?

This question is related to javascript dictionary

The answer is


For new browsers: Object.keys( MY_DICTIONARY ) will return an array of keys. Else you may want to go the old school way:

var keys = []
for(var key in dic) keys.push( key );

Simply use Object.keys():

_x000D_
_x000D_
var driversCounter = {_x000D_
                      "one": 1,_x000D_
                      "two": 2,_x000D_
                      "three": 3,_x000D_
                      "four": 4,_x000D_
                      "five": 5_x000D_
                     }_x000D_
console.log(Object.keys(driversCounter));
_x000D_
_x000D_
_x000D_


One option is using Object.keys():

Object.keys(driversCounter)

It works fine for modern browsers (however, Internet Explorer supports it starting from version 9 only).

To add compatible support you can copy the code snippet provided in MDN.


If you can use jQuery then

var keys = [];
$.each(driversCounter, function(key, value) {
    keys.push(key);
});

console.log(JSON.stringify(keys));

Here follows the answer:

["one", "two", "three", "four", "five"]

And this way you wouldn't have to worry if the browser supports the Object.keys method or not.


To loop through the "dictionary" (we call it object in JavaScript), use a for in loop:

for(var key in driversCounter) {
    if(driversCounter.hasOwnProperty(key)) {
        // key                 = keys,  left of the ":"
        // driversCounter[key] = value, right of the ":"
    }
}

As others have said, you could use Object.keys(), but who cares about older browsers, right?

Well, I do.

Try this. array_keys from PHPJS ports PHP's handy array_keys function, so it can be used in JavaScript.

At a glance, it uses Object.keys if supported, but it handles the case where it isn't very easily. It even includes filtering the keys based on values you might be looking for (optional) and a toggle for whether or not to use strict comparison === versus typecasting comparison == (optional).


With a modern JavaScript engine you can use Object.keys(driversCounter).


This will work in all JavaScript implementations:

var keys = [];

for (var key in driversCounter) {
    if (driversCounter.hasOwnProperty(key)) {
        keys.push(key);
    }
}

Like others mentioned before you may use Object.keys, but it may not work in older engines. So you can use the following monkey patch:

if (!Object.keys) {
    Object.keys = function (object) {
        var keys = [];

        for (var key in object) {
            if (object.hasOwnProperty(key)) {
                keys.push(key);
            }
        }
    }
}

A different approach would be to using multi-dimensional arrays:

var driversCounter = [
    ["one", 1], 
    ["two", 2], 
    ["three", 3], 
    ["four", 4], 
    ["five", 5]
]

and access the value by driverCounter[k][j], where j=0,1 in the case.
Add it in a drop down list by:

var dd = document.getElementById('your_dropdown_element');
for(i=0;i<driversCounter.length-1;i++)
{
    dd.options.add(opt);
    opt.text = driversCounter[i][0];
    opt.value = driversCounter[i][1];
}