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);
      }
          })

标签： javascriptjsonapiloopsobject

Answer 1

作为 API 返回 JSON 对象（对象数组）。您可以使用 for ... of 循环来迭代每个对象并访问信息。

var jsonObj = [{
		"drink": "Margarita",
		"id": "13060",
		"category": "Ordinary Drink"
	},
	{
		"drink": "Blue Margarita",
		"id": "11118",
		"category": "Ordinary Drink"
	},
	{
		"drink": "Tommy's Margarita",
		"id": "17216",
		"category": "Ordinary Drink"
	},
	{
		"drink": "Whitecap Margarita",
		"id": "16158",
		"category": "Other/Unknown"
	},
	{
		"drink": "Strawberry Margarita",
		"id": "12322",
		"category": "Ordinary Drink"
	}];
  
for (var obj of jsonObj) {
  console.log(obj.drink);
}