Obtener la clave y el valor del objeto en JavaScript?

Question

Dada una matriz de objetos JavaScript, ¿cómo puedo obtener la clave y el valor de cada objeto?

El código siguiente muestra lo que me gustaría hacer, pero, obviamente, no funciona:

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

Así que, ¿cómo se puede conseguir que this.key y this.value para cada entrada en la matriz?

Answer 1

Cambie su objeto.

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

Como regla general:

• Un objeto tiene datos y estructura.
• 'Adidas', 'Nike', 100 y 50 son de datos.
• Las claves de objeto son estructura. Usar datos como la clave del objeto es semánticamente incorrecta. Evítalo.

No hay semántica en {Nike: 50}. ¿Qué es "Nike"? ¿Qué es 50?

{key: 'Nike', value: 50} es un poco mejor, ya que ahora puede iterar una matriz de estos objetos y los valores están en lugares predecibles. Esto hace que sea fácil escribir el código que los maneja.

Mejor aún sería {vendor: 'Nike', itemsSold: 50}, porque ahora los valores no están solo en lugares predecibles, sino que también tienen nombres significativos. Técnicamente, eso es lo mismo que arriba, pero ahora una persona también entendería lo que se supone que significan los valores.

Answer 2

$.each(top_brands, function() { 
    var key = Object.keys(this)[0]; 
    var value = this[key]; 
    brand_options.append($("<option />").val(key).text(key + " " + value)); 
}); 

Answer 3

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

Pero si la estructura de datos es var top_brands = {'Adidas': 100, 'Nike': 50};, entonces lo será mucho más sencillo.

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

O utilice el jQuery cada uno:

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

Answer 4

Si esto es todo lo que el objeto se va a almacenar, entonces mejor literal sería

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

Entonces todo lo que necesita es un for...in lazo.

for (var key in top_brands){ 
    console.log(key, top_brands[key]); 
    } 

Answer 5

Object.keys(top_brands).forEach(function(key) { 
    var value = top_brands[key]; 
    // use "key" and "value" here... 
}); 

Por cierto, tenga en cuenta que Object.keys y forEach no están disponibles en los navegadores antiguos, pero se debe usar algún polyfill de todos modos.

Answer 6

for (var i in a) { 
    console.log(a[i],i) 
}