цикл по объекту json и извлечение данных - js

Question

Я хочу взять данные из API, который имел тонну напитков и их информацию.Я нуб.Мне удалось получить доступ к информации (как показано в примере кода), но я, похоже, не могу придумать, как правильно ее обойти и собрать соответствующие данные в хорошем порядке (новый объект для каждого напитка).

В файле есть объект, называемый «напитки».у которого было больше объектов, которые идут от "0" до "4".От каждого я хочу имя, идентификатор, категорию.

Возвращает API:

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

каждое число - это объект с большим количеством информации, т.е. имя, идентификатор, категория и т. Д.

Я получаю, когда 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

Я бы предложил использовать объектно-ориентированное программирование.

Объекты создаются в цикле 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()}` );

Answer 2

Поскольку API возвращает объект JSON (Массив объектов).Вы можете использовать цикл for ... для итерации каждого объекта и доступа к информации.

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

Не =<.Должно быть <= Кроме того, не 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)
          }
    });