pobieranie REST API :: 4programmers.net

0

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
.

0

Wklejam jakby coś jescze mój HTML

<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
     <title> PUNK API </title>
        <link rel="stylesheet" href="style.css"> </link>
        <script src="app.js" charset="uft-8"></script>

    </head>
<body>
    <div class="main-area">
    <h1 class="main-title">
      Here are some beers from Punk API
    </h1>
  <ul id="list">
  </ul>
</div>
 <script src="app.js" charset="uft-8"></script>
</body>
</html>

0

To, co dostajesz w ingredients to faktycznie "jakby obiekt". Składa się z kilku tablic. Jedną z nich jest na przykład "hops". Żeby wyciągnąć te dane, musisz przez elementy tej tablicy jakoś przeiterować i wyciągnąć sobie ten "name" czy "amount" z każdego elementu. W dużym uproszczeniu, na przykład tak:

var hops = beer.ingredients.hops;
for (i = 0; i < hops.length; i++) {
    console.log(hops[i].name);
    console.log(hops[i].amount.value);
    console.log(hops[i].amount.unit);
}

0

Wklejam jeszcze raz fragment tego JSONa z ingredients bo wyżej nie wkleił się cąły. Tam są wszystkie parametry tego obiektu nie mam pojecia jak to wywołać,

"ingredients": {
      "malt": [
        {
          "name": "Extra Pale",
          "amount": {
            "value": 5.3,
            "unit": "kilograms"
          }
        }
      ],
      "hops": [
        {
          "name": "Ahtanum",
          "amount": {
            "value": 17.5,
            "unit": "grams"
           },
           "add": "start",
           "attribute": "bitter"
         },
         {
           "name": "Chinook",
           "amount": {
             "value": 15,
             "unit": "grams"
           },
           "add": "start",
           "attribute": "bitter"
         },
         ...

0

Nie da się tego pobrać? A może jakoś inaczej da się to napisać żeby pobrać te parametry z api?

0

ok udało mi się po częsci wyciągnać składniki tylko teraz kolejno pokazuje Składniki: malt, hops, yeast teraz chciałbym np wyciagąć kolejno z malt -> name, hops -> name itd? Może te wyciagnac inne składniki. Tutaj problem jest z zapisem a ja nie mam pojecia jak się dostać do tego obiektu.
Wklejam JSON jeszcze raz:

"ingredients": {
      "malt": [
        {
          "name": "Extra Pale",
          "amount": {
            "value": 5.3,
            "unit": "kilograms"
          }
        }
      ],
      "hops": [
        {
          "name": "Ahtanum",
          "amount": {
            "value": 17.5,
            "unit": "grams"
           },
           "add": "start",
           "attribute": "bitter"
         },
         {
           "name": "Chinook",
           "amount": {
             "value": 15,
             "unit": "grams"
           },
           "add": "start",
           "attribute": "bitter"
         },

A tutaj mój JavaScript (problem w liniach 17 i 18):

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"> Opis: </h3>' + beer.description + '</p>';
      var abv = '<p>ABV: ' + beer.abv + '</p>';
      var ingredients = '<p>Składniki: ' + Object.keys(beer.ingredients).join(', ') + '</p>'; // PRZY TAKIM ZAPISIE WYŚWIETLA SKŁADNIKI: malt, hops, yeast
      var maltAmount = '<p>amount: ' +  Object.keys(beer.ingredients.malt[0].amount).join(', ') + '</p>'; // PRZY TAKIM ZAPISIE WYŚWIETLA: amount: value, unit A jak się dostać do wnętrza value i unit?
      var image = '<img height="300" src=' + beer.image_url + '>';
      li.innerHTML = name + tagline + description + abv + ingredients + maltAmount + image;
      list.appendChild(li);
    });

  }
};

xhr.open('GET', 'https://api.punkapi.com/v2/beers?page=2&per_page=5 ');
xhr.send();

0

dobra już sobie poradziłem po prostu trzeba to umieć poiterować poprawnie. Dziekuje za tak intensywną pomoc i mój monolog

1

Nie chce zakładac nowego wątku dlatego wklejam tutaj bo właściwie tego samego dotyczy. Zrobiłem sobie takie testowe pobieranie AJAXem API właściwie tego samego co wcześniej. Chce wyświetlić 5 kart z browarami na stronie głownej. I teraz moje pytanie co jest nie tak ? Wkleiłem z dokumentacji https://api.punkapi.com/v2/beers?page=2&per_page=5 z końcówką page=5 i zamiast 5 kart z piwami wyświetla mi 10. Co jest nie tak z tym kodem??

function createBeer (element){
	return document.createElement(element);

}

function append(parent, element){
	return parent.appendChild(element);
}

fetch('https://api.punkapi.com/v2/beers?page=2&per_page=5')
.then((resp) => resp.json())
.then (function (data) {
	let beers = data;
	return beers.map(function (beer){
		let li = createBeer('li'),
		img = createBeer('img'),
		p = createBeer('p');
		img.src = beer.image_url;
		p.innerHTML = `${beer.name} `;
		append(li, img);
		append(li, p);
		append(document.getElementById('list'), li);

	})
})
.catch(function (error) {
	console.log(error);
});

W HTMLu mam tak :

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Punk API</title>
  <script src="https://use.fontawesome.com/46b3527c74.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="app.js"></script>
  <style type="text/css">
  	ul li {
  list-style-type: none;
  margin: 0px .5rem 4rem .5rem;
  padding: 2rem;
  background-color: #f9f9f9;
  border: 1px solid #f2f2f2;
  box-shadow: 2px 2px 5px #999;
}

.main-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
  </style>

  </head>

  <body>
  <div class="main-area">
<h1> <b> Tutaj Randomowe piwa </b> </h1>
<ul id="list"></ul>
</div>
<script src="app.js"></script>
 </body>
 </head>

0

Na moje to coś namieszałeś.
Ten endpoint zwraca dokładnie 5 elementów, więc pewnie wcześniej w kodzie masz gdzieś ładowane 5 innych elementów i jak dorzucasz do DOM kolejne 5, to masz 10, tadam.

Albo nie zauważyłeś i 2 razy wywołujesz ten fragment kodu.

pobieranie REST API

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

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami