javascript - 循环遍历 json 对象并提取数据 - js

Question

我想从一个包含大量饮料及其信息的 API 中获取数据。 我是个菜鸟。我设法访问信息(如代码示例中所示)，但我似乎无法想出一种正确的方法来循环它并按良好顺序收集相关数据(每种饮料的新对象)。

该文件有一个名为“drinks”的对象。其中有更多从“0”到“4”的对象。我想要每个人的名称、ID、类别。

API返回:

drinks  
0:  {…}
1:  {…}
2:  {…}
3:  {…}
4:  {…}

每个数字都是一个包含大量信息的对象，即名称、ID、类别等。

当 console.log(drinkX) 时我得到:

Object { drink: "Margarita", id: "13060", category: "Ordinary Drink" }
Object { drink: "Blue Margarita", id: "11118", category: "Ordinary Drink" }
Object { drink: "Tommy's Margarita", id: "17216", category: "Ordinary Drink" }
Object { drink: "Whitecap Margarita", id: "16158", category: "Other/Unknown" }
Object { drink: "Strawberry Margarita", id: "12322", category: "Ordinary Drink" }

但我似乎无法仅访问一个对象，因为 console.log(drinkX) 返回所有对象。例如，我也不能只访问一个名称。

这就是我所做的。如何为每种饮料创建一个新对象，以便我可以轻松访问每种饮料/名称/类别？

      let url = 'https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita';
  fetch(url)
  .then((res) => { return res.json() })
  .then((data) => {
      let result = `<h2> Drink Info From API</h2>`;
      for( i=0; i <= 4; i++){
        let drinkX = {
          drink: data.drinks[i].strDrink,
          id: data.drinks[i].idDrink,
          category: data.drinks[i].strCategory

        };
          console.log(drinkX);
      }
          })

Answer 1

不是=< 。应该是<=另外，不是 data.for(..)仅for(..)

 let url = 'https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita';
      fetch(url)
      .then((res) => { return res.json() })
      .then((data) => {
          let result = `<h2> Drink Information </h2>`;
          for(let i=0; i <= data.drinks.length; i++){
            let drinkName = data.drinks[i].strDrink;
          console.log(drinkName)
          }
    });