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

Answer 2

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

Answer 3

我建议使用面向对象编程。

正在forEach循环中创建对象。我还添加了一个'findBeverageById'方法，以说明如何搜索饮料数组并在某处使用它。

class Beverage{
  constructor( id, name, category ){
    this.id = parseInt( id );
    this.name = name;
    // category probably doesn't really belong in the beverage class,
    // but I put it here for this answer
    this.category = category; 
  }
  
  getName(){
    return this.name;
  }
  
  getCategory(){
    return this.category;
  }
}

// manages an array of beverages
class BeverageManager{
  constructor(){
    this.beverages = [];
  }
  
  addBeverage( beverage ){
    this.beverages.push( beverage );
  }
  
  findBeverageById( index){
      return this.beverages.find( beverage => beverage.id === index );
  }
}

const drinks = [
  { 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" }
];

let beverageManager = new BeverageManager();
// create beverages and store them in objects
drinks.forEach( drink => {
  let beverage = new Beverage( drink.id, drink.drink, drink.category);
  beverageManager.addBeverage( beverage );
});


// Try it out on 2 drinks
let foundBeverage = beverageManager.findBeverageById( 11118 );
console.log( `Found a(n) ${foundBeverage.getCategory()} called ${foundBeverage.getName()}` );

foundBeverage = beverageManager.findBeverageById( 16158 );
console.log( `Found a(n) ${foundBeverage.getCategory()} called ${foundBeverage.getName()}` );

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

3 个答案: