Wypisanie wartości z Json w tabeli

0

Po odwołaniu się do api otrzymuję taką odpowiedź:

{
"germany": 1,
"bangladesh": 1,
"cambodia": 1
}

Jak to przepisać do tabeli? Z samym przepisaniem nie mam problemu, tylko nie wiem jak przez to iterować (jquery each) aby dodać do tabeli wiersz zawierający dwie kolumny (nazwa i liczba).

Jakby to było coś takiego:

{
{"name": "bangladesh", "count": 1},
{"name": "germany", "count": 1},
{"name": "cambodia", "count": 1},
]

To bym zrobił:
$.each(data, function(i, item) {
$(table).find(tbody).append( "" + item.name + "</td>" + item.count + "</td></tr>" );
});​

Niestety nie wiem jak uzyskać wartości z tego pierwszego jsona.

0

Może tak:

for(var prop in data)
{
    $(table).find(tbody).append( "" + prop + "</td>" + data[prop] + "</td></tr>" );
}
0

Sprawdziłem wersję kreis84 i działa. Dziękuję.

0

Można to usprawnić, bo zauważ, że przy każdej iteracji na nowo szukasz elementu table, potem szukasz tbody i wrzucasz nowy element. W takiej małej tabelce nie ma to znaczenia, ale warto zapamiętać to na przyszłość, aby robić takie optymalizacje.

Tak samo używanie for...in często może być złudne i warto dodać warunek z hasOwnProperty() ale akurat w tym przykładzie nie będzie to konieczne. Wtedy faktycznie lepiej używać nowszego Object.keys() który zwraca nam properties tylko naszego obiektu.

0

Polecam zrobić to za pomocą template strings:

const rows = Object.keys(data).map(country => `
  <tr>
    <td>${country}</td>
    <td>${data[country]}</td>
  </tr>
`).join('')

W ten sposób przygotowujesz wszystkie wiersze w pamięci, a manipulację DOM-em robisz tylko raz. No i czytelniejsze to niż sklejanie stringów.

1 użytkowników online, w tym zalogowanych: 0, gości: 1