21

Given a JavaScript array of objects, how can I get the key and value of each object?

The code below shows what I'd like to do, but obviously doesn't work:

var top_brands = [ { 'Adidas' : 100 }, { 'Nike' : 50 }];
var brand_options = $("#top-brands");
$.each(top_brands, function() {
  brand_options.append($("<option />").val(this.key).text(this.key + " "  + this.value));
});

So, how can I get this.key and this.value for each entry in the array?

flossfan
  • 10,554
  • 16
  • 42
  • 53
  • You are looking for `for...in`, but the semantics of your loop are wrong as it stands. – Jon May 23 '12 at 10:54
  • 1
    If these are the only values in the objects, I suggest to change the structure to: `var top_brands = {'Adidas': 100, 'Nike': 50};` – Felix Kling May 23 '12 at 10:58
  • 1
    possible duplicate of [How to get all properties values of a Javascript Object (without knowing the keys)?](http://stackoverflow.com/questions/7306669/how-to-get-all-properties-values-of-a-javascript-object-without-knowing-the-key) – Felix Kling May 23 '12 at 10:59

6 Answers6

24

Change your object.

var top_brands = [ 
  { key: 'Adidas', value: 100 }, 
  { key: 'Nike', value: 50 }
];

var $brand_options = $("#top-brands");

$.each(top_brands, function(brand) {
  $brand_options.append(
    $("<option />").val(brand.key).text(brand.key + " " + brand.value)
  );
});

As a rule of thumb:

  • An object has data and structure.
  • 'Adidas', 'Nike', 100 and 50 are data.
  • Object keys are structure. Using data as the object key is semantically wrong. Avoid it.

There are no semantics in {Nike: 50}. What's "Nike"? What's 50?

{key: 'Nike', value: 50} is a little better, since now you can iterate an array of these objects and values are at predictable places. This makes it easy to write code that handles them.

Better still would be {vendor: 'Nike', itemsSold: 50}, because now values are not only at predictable places, they also have meaningful names. Technically that's the same thing as above, but now a person would also understand what the values are supposed to mean.

Tomalak
  • 332,285
  • 67
  • 532
  • 628
  • adding "key" and "value" is extraneous (and duplicative) especially if you need to pass a bunch of this across the web. modifying the obj is more than doubling the weight of the total json blob here. simple "for key in object" works fine here. – ekeyser Jan 29 '15 at 18:27
  • 1
    The weight of the JSON string is a different matter. Objects that have a predictable form and don't mix up structure and data are *way* easier to work with in code. `{Nike: 50}` might be smaller, but it has no *semantic* value. Additionally `for.. in` is not a safe way of iterating objects and you should not use it. – Tomalak Jan 29 '15 at 18:47
20
$.each(top_brands, function() {
  var key = Object.keys(this)[0];
  var value = this[key];
  brand_options.append($("<option />").val(key).text(key + " "  + value));
});
thecodeparadox
  • 86,271
  • 21
  • 138
  • 164
16

If this is all the object is going to store, then best literal would be

var top_brands = {
    'Adidas' : 100,
    'Nike'   : 50
    };

Then all you need is a for...in loop.

for (var key in top_brands){
    console.log(key, top_brands[key]);
    }
Graham
  • 6,484
  • 2
  • 35
  • 39
8
$.each(top_brands, function(index, el) {
  for (var key in el) {
    if (el.hasOwnProperty(key)) {
         brand_options.append($("<option />").val(key).text(key+ " "  + el[key]));
    }
  }
});

But if your data structure is var top_brands = {'Adidas': 100, 'Nike': 50};, then thing will be much more simple.

for (var key in top_brands) {
  if (top_brands.hasOwnProperty(key)) {
       brand_options.append($("<option />").val(key).text(key+ " "  + el[key]));
  }
}

Or use the jquery each:

$.each(top_brands, function(key, value) {
    brand_options.append($("<option />").val(key).text(key + " "  + value));
});
xdazz
  • 158,678
  • 38
  • 247
  • 274
3
for (var i in a) {
   console.log(a[i],i)
}
Paul Roub
  • 36,322
  • 27
  • 84
  • 93
Harish
  • 157
  • 2
  • 11
1
Object.keys(top_brands).forEach(function(key) {
  var value = top_brands[key];
  // use "key" and "value" here...
});

Btw, note that Object.keys and forEach are not available in ancient browsers, but you should use some polyfill anyway.

Jakob
  • 24,154
  • 8
  • 46
  • 57