Как получить API с помощью JavaScript, чтобы найти все продукты с ABV от 5% до 11% и варить после 2015 года

Question

Я пытаюсь использовать API выборки Javascript и выводить полученный json, и найти все продукты с ABV от 5% до 11%, сваренные после 2015 года, с панк API.

Я не уверен, как извлечь его и повторить для фильтрации.

const results = document.querySelector("#results");

fetch("https://api.punkapi.com/v2/beers?brewed_after=12-2015&abv_gt=5&abv_lt=11")
  .then(response => response.json())
  .then((data) => {

    data.Search.forEach((result) => {
      const beers = `<li>
        <img src="${result.Name}" alt="">
        <p>${result.Picture}</p>
      </li>`;
      results.insertAdjacentHTML("beforeend", beers);
    });
  });

Answer 1

Возможно, вы захотите отобразить данные, извлеченные из API с помощью какого-либо поиска, примененного к нему.

Это может помочь вам:

var results = document.getElementById("results");

fetch("https://api.punkapi.com/v2/beers?brewed_after=12-2015&abv_gt=5&abv_lt=11")
  .then(response => response.json())
  .then((data) => {
  
    data.forEach((result) => {
      var brewed = result.first_brewed; 
      var brewed_year = parseInt(brewed.substring(brewed.indexOf("/")+1));   
      var ingredients = result.ingredients.malt;

      if((result.abv > 5 && result.abv<11) && brewed_year>=2015) {
        const beers = '<li><img src="'+result.image_url+'" alt=""><p>'+result.name+' - '+ingredients[0].name+'</p></li>';
        results.insertAdjacentHTML("beforeend", beers);  
      }
      
    });
  });

<style>
img { width:50px; }
</style>

<ul id="results">
</ul>