251

If I have a JS object like:

var foo = { 'bar' : 'baz' }

If I know that foo has that basic key/value structure, but don't know the name of the key, How can I get it? for ... in? $.each()?

2
  • 6
    what is wrong with for ... in?
    – Matt
    Jun 7, 2011 at 16:48
  • 1
    It feels indirect and you have to use hasOwnProperty. I guess I'll make a library function that does it....
    – sprugman
    Jun 7, 2011 at 17:08

20 Answers 20

253

You would iterate inside the object with a for loop:

for(var i in foo){
  alert(i); // alerts key
  alert(foo[i]); //alerts key's value
}

Or

Object.keys(foo)
  .forEach(function eachKey(key) { 
    alert(key); // alerts key 
    alert(foo[key]); // alerts value
  });
6
135

You can access each key individually without iterating as in:

var obj = { first: 'someVal', second: 'otherVal' };
alert(Object.keys(obj)[0]); // returns first
alert(Object.keys(obj)[1]); // returns second
1
  • 4
    You can now use spread operator for this purpose, it looks better: const [firstKey, ...rest] = Object.keys(obj);
    – Nerlin
    Dec 13, 2017 at 21:08
98

If you want to get all keys, ECMAScript 5 introduced Object.keys. This is only supported by newer browsers but the MDC documentation provides an alternative implementation (which also uses for...in btw):

if(!Object.keys) Object.keys = function(o){
     if (o !== Object(o))
          throw new TypeError('Object.keys called on non-object');
     var ret=[],p;
     for(p in o) if(Object.prototype.hasOwnProperty.call(o,p)) ret.push(p);
     return ret;
}

Of course if you want both, key and value, then for...in is the only reasonable solution.

4
  • p gives me the key but how do I get the value of the key? Thanks.
    – Si8
    Nov 22, 2017 at 17:24
  • 3
    For both keys and values, use the new Object.entries() developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
    – Kzqai
    Jun 7, 2019 at 16:35
  • perhaps it's an indication of my limited understanding, but this answer seems incredibly verbose (admittedly reusable) for something as simple as getting a key/value. Shouldn't @Michael Benin answer be marked as the best one? Aug 2, 2019 at 9:28
  • 10
    Erm... does anyone else clicking the first link get redirected to narcotics anonymous? Aug 27, 2019 at 14:45
88

Given your Object:

var foo = { 'bar' : 'baz' }

To get bar, use:

Object.keys(foo)[0]

To get baz, use:

foo[Object.keys(foo)[0]]

Assuming a single object

1
  • 1
    another way const [key, value] = Object.entries(foo)[0];
    – kiranvj
    May 2, 2022 at 5:14
40

This is the simplest and easy way. This is how we do this.

var obj = { 'bar' : 'baz' }
var key = Object.keys(obj)[0];
var value = obj[key];
     
 console.log("key = ", key) // bar
 console.log("value = ", value) // baz
Object.keys() is javascript method which return an array of keys when using on objects.

Object.keys(obj) // ['bar']

Now you can iterate on the objects and can access values like below-

Object.keys(obj).forEach( function(key) {
  console.log(obj[key]) // baz
})
2
  • You may get TypeError if you expect a key to be a number. Because keys are always strings.
    – Green
    May 13, 2020 at 18:02
  • @Green, Why would you expect a key to be a number ?
    – Halo
    Jul 22, 2022 at 6:24
36

A one liner for you:

const OBJECT = {
    'key1': 'value1',
    'key2': 'value2',
    'key3': 'value3',
    'key4': 'value4'
};

const value = 'value2';

const key = Object.keys(OBJECT)[Object.values(OBJECT).indexOf(value)];

window.console.log(key); // = key2
1
  • that's a naaasty one-liner, very powerful, thank you Aug 3, 2022 at 23:34
28
// iterate through key-value gracefully
const obj = { a: 5, b: 7, c: 9 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
}

Refer MDN

1
  • Highly underrated answer. You can also use the functional approach, Object.entries(object1).forEach(([key, value]) => { console.log(`${key}: ${value}`); }) Jan 2, 2022 at 23:39
20

I was having the same problem and this is what worked

//example of an Object
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};

//How to access a single key or value
var key = Object.keys(person)[0];
var value = person[key];
1
  • 13
    why not var value = person[key]; ? That way you don't have to know the key of the value you want to pull. Dec 14, 2016 at 16:01
14

best way to get key/value of object.

let obj = {
        'key1': 'value1',
        'key2': 'value2',
        'key3': 'value3',
        'key4': 'value4'
    }
    Object.keys(obj).map(function(k){ 
    console.log("key with value: "+k +" = "+obj[k])    
    
    })
    

9

I don't see anything else than for (var key in foo).

5

Since you mentioned $.each(), here's a handy approach that would work in jQuery 1.6+:

var foo = { key1: 'bar', key2: 'baz' };

// keys will be: ['key1', 'key2']
var keys = $.map(foo, function(item, key) {
  return key;
});
5

The easiest way is to just use Underscore.js:

keys

_.keys(object) Retrieve all the names of the object's properties.

_.keys({one : 1, two : 2, three : 3}); => ["one", "two", "three"]

Yes, you need an extra library, but it's so easy!

1
  • 4
    @lonesomeday yes, but underscore/lodash are useful in many other ways, so it's worth bringing up.
    – jcollum
    Dec 10, 2013 at 19:42
4

use for each loop for accessing keys in Object or Maps in javascript

for(key in foo){
   console.log(key);//for key name in your case it will be bar
   console.log(foo[key]);// for key value in your case it will be baz
}

Note: you can also use

Object.keys(foo);

it will give you like this output:

[bar];

4

Object.keys() The Object.keys() method returns an array of a given object's own enumerable properties, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).

var arr1 = Object.keys(obj);

Object.values() The Object.values() method returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).

var arr2 = Object.values(obj);

For more please go here

3

There is no way other than for ... in. If you don't want to use that (parhaps because it's marginally inefficient to have to test hasOwnProperty on each iteration?) then use a different construct, e.g. an array of kvp's:

[{ key: 'key', value: 'value'}, ...]
2

Well $.each is a library construct, whereas for ... in is native js, which should be better

2

You can use Object.keys functionality to get the keys like:

const tempObjects={foo:"bar"}

Object.keys(tempObjects).forEach(obj=>{
   console.log("Key->"+obj+ "value->"+tempObjects[obj]);
});
0

for showing as a string, simply use:

console.log("they are: " + JSON.stringify(foo));
0

If you are using AWS CloudFront Functions then this would work for you.

function handler(event) {
    var response = event.response;
    var headers = response.headers;
    if("x-amz-meta-csp-hash" in headers){ 
        hash=headers["x-amz-meta-csp-hash"].value;
        console.log('hash is ' + hash);
    }
}
0

Readable and simple solution:

const object1 = {
    first: 'I am first',
    second: 'I am second'
};

for (const [key, value] of Object.entries(object1)) {
    console.log(`${key}: ${value}`);
}

// expected output:
// "first: I am first"
// "second: I am second"

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.