Uzyskaj klucz i wartość obiektu w JavaScript?

Question

Biorąc pod uwagę tablicę JavaScript obiektów, w jaki sposób mogę uzyskać klucz i wartość każdego obiektu?

Poniższy kod pokazuje, co chciałbym zrobić, ale oczywiście nie działa:

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

Tak, jak mogę dostać this.key i this.value dla każdego wpisu w tablicy?

Answer 1

Zmień swój obiekt.

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

Jako zasada:

• Obiekt posiada dane i strukturę.
• 'Adidas', 'Nike', 100 i 50 są dane.
• Klucze obiektu to struktura. Używanie danych jako klucza obiektu jest semantycznie błędne. Unikaj tego.

Brak semantyki w {Nike: 50}. Co to jest "Nike"? Co to jest 50?

{key: 'Nike', value: 50} jest trochę lepszy, ponieważ teraz można iterować tablicę tych obiektów, a wartości są w przewidywalnych miejscach. Ułatwia to pisanie kodu, który je obsługuje.

Jeszcze lepiej byłoby {vendor: 'Nike', itemsSold: 50}, ponieważ teraz wartości są nie tylko przewidywalne, mają również znaczące nazwy. Technicznie jest to to samo, co powyżej, ale teraz osoba zrozumie również, jakie wartości mają na myśli.

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

Ale jeśli twoja struktura danych to var top_brands = {'Adidas': 100, 'Nike': 50};, wtedy rzecz będzie znacznie prostsza.

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

Albo użyć jQuery każda:

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

Answer 4

Jeśli to wszystko jest przedmiotem będzie przechowywać, a następnie najlepiej dosłowne byłoby

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

Wtedy wszystko czego potrzebujesz to for...in pętla.

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

Btw pamiętać, że Object.keys i forEach nie są dostępne w starożytnych przeglądarek, ale należy korzystać z niektórych PolyFill tak.

Answer 6

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