Słuchajcie mam głupi problem. Pisze aplikacje która pobiera API ze strony https://punkapi.com/documentation/v2. Aplikacja ma sobie pobierać na strone w której bedzie wyświetlało 5 piw na stronie głownej z paginacją opisem itd. I zatrzymałem się na tym jak mam pobrać "ingredients" opis. Niestety wyszystko inne mi sie wywołuje a tutaj jest jakby objekt i we wnętrzu ingredients sa pozostałe odnośniki:
"ingredients": {
"malt": [
{
"name": "Extra Pale",
"amount": {
"value": 5.3,
"unit": "kilograms"
}
}
],
Tak to wygląda a tutaj jest mój skrypt JS
var list = document.getElementById('list');
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
var data = JSON.parse(this.responseText);
console.log(data[0].image_url);
data.forEach(function(beer) {
var li = document.createElement('LI');
li.classList.add('beer');
var name = '<p class="beer-name">' + beer.name + '</p>';
var tagline = '<p class="tagline">' + beer.tagline + '</p>';
var description = '<h3><p class="description"> Description: </h3>' + beer.description + '</p>';
var abv = '<p>ABV: ' + beer.abv + '</p>';
var ingredients = '<p>Składniki: ' + beer.ingredients + '</p>'; // TUTAJ JEST PROBLEM. PYTANIE BRZMI JAK MAM TO WYWOŁAĆ POPRAWNIE Z TEGO PLIKU POWYŻEJ ???
var image = '<img height="300" src=' + beer.image_url + '>';
li.innerHTML = name + tagline + description + abv + ingredients + image;
list.appendChild(li);
});
}
};
xhr.open('GET', 'https://api.punkapi.com/v2/beers?page=2&per_page=5 ');
xhr.send();
I teraz moje pytanie w linii var ingredients jak powinien wyglądac prawidłowy zapis żebym mógł wyciągnać wszystko z tego jsona czyli kolejno "malt" "name" itd.... (17 linia)
Tutaj jest problem w prawidłowym zapisie bo reszta wywołań działa tylko że tamte nie są zagnieżdżone
.