Wypisanie wartości z Json w tabeli

Wypisanie wartości z Json w tabeli
Yolo
Yolo
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.

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Desu
DE
Desu
DE
  • Rejestracja:ponad 9 lat
  • Ostatnio:11 miesięcy
  • Postów:1788
0
edytowany 1x, ostatnio: Desu
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
kreis84
K8
kreis84
K8
  • Rejestracja:ponad 14 lat
  • Ostatnio:około 4 lata
0

Może tak:

Kopiuj
for(var prop in data)
{
    $(table).find(tbody).append( "" + prop + "</td>" + data[prop] + "</td></tr>" );
}
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Yolo
Yolo
0

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

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
adhed
AD
adhed
AD
  • Rejestracja:ponad 11 lat
  • Ostatnio:około 19 godzin
  • Postów:481
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.

Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Maciej Cąderek
Maciej Cąderek
Maciej Cąderek
Maciej Cąderek
  • Rejestracja:ponad 9 lat
  • Ostatnio:ponad 3 lata
  • Lokalizacja:Warszawa
  • Postów:1264
0

Polecam zrobić to za pomocą template strings:

Kopiuj
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.

edytowany 1x, ostatnio: Maciej Cąderek
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto