jquery - How to get the key of a keyvalue JavaScript object - Stack Overflow

admin管理员组

文章数量:1129424

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()?

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()?

• javascript
• jquery

Share Improve this question Follow edited Sep 16, 2022 at 21:37 Heretic Monkey 12.1k77 gold badges6060 silver badges130130 bronze badges asked Jun 7, 2011 at 16:45 sprugmansprugman 19.8k3636 gold badges115115 silver badges164164 bronze badges 2

• 6 what is wrong with for ... in? – Matt Commented 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 Commented Jun 7, 2011 at 17:08

Add a comment  | 

21 Answers 21

Sorted by: Reset to default 257

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
  });

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

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.

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

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
})

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

// 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

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];

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])    
    
    })
    

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

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;
});

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!

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];

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

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'}, ...]

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

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]);
});

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"

for showing as a string, simply use:

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

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);
    }
}

Vanilla JavaScript Solution

You can use Object.entries() & .map().

const myData = {
    name: 'Amoos',
    age: 28,
    skills: [
      { id: 1, value: "React" },
      { id: 2, any_label: "PHP" }
    ],
    booleanKey: false,
    ignoredKey: true
}

const getKeyValue = (data, keys=[], nestedKey='value') => {
  let result = ''
  const resp = Object.entries(data).map( item => {
    const [key, val] = item
    if(!keys.includes(key)) return
    
    if(!!val && typeof val === "object") { 
      const innerResp = val.map( v => {
        return v.value || v[nestedKey]
      } )
      result += `${key}: ${innerResp.join(' ')} \n`
      return
    }
    result += `${key}: ${val} \n`
  })
  return result
}

console.log( 
  getKeyValue(myData, ['name', 'age', 'skills', 'booleanKey'], 'any_label')
)

本文标签： jqueryHow to get the key of a keyvalue JavaScript objectStack Overflow