Je veux prendre des données d'une API qui avait une tonne de boissons et de leurs informations. Je suis noob. J'ai réussi à accéder aux informations (comme indiqué dans l'échantillon de code) mais je ne peux pas sembler penser à une bonne façon de boucler et collecter les données pertinentes en bon état (nouvel objet pour chaque boisson).
Le fichier a Un objet appelé "boissons". qui avaient plus d'objets qui vont de "0" à "4". De chacun je veux le nom, l'identifiant, la catégorie.
API renvoie: Chaque numéro est un objet avec beaucoup d'informations, c'est-à-dire que c.- ID, catégorie ect. i obtenir quand console.log (buvez): mais je ne peux pas sembler accéder à un seul objet parce que console.log (buvez) les retourne tous. Je ne peux pas y accéder qu'un seul nom par exemple. C'est ce que j'ai fait. Comment créer un nouvel objet pour chaque boisson pour que je puisse facilement accéder à chaque boisson / nom / nom / catégorie individuelle?
3 Réponses :
pas p> = . Devrait être non, pas data.for (..) code> uniquement pour (..) code>
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)
}
});
Merci Man, j'ai un peu changé le code et j'ai fait la question plus précise concernant la gestion des informations que je reçois de l'API.
Je suggérerais d'utiliser la programmation orientée objet.
Les objets sont créés dans la boucle de Foreach. J'ai également ajouté une méthode 'FindBevereverageByID' pour illustrer la manière dont vous pourriez rechercher dans la gamme de boissons et l'utiliser quelque part. P>
p>
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()}` );C'est une excellente réponse. Merci ! Je pensais quelque peu comprendre ce que vous avez fait ici, j'ai besoin d'en apprendre davantage sur "constructeur" et "ceci". En outre, ma principale lutte est maintenant comment puis-je atteindre "const boissons" (dans votre exemple) de cette API.
const boissons est censé imiter la réponse JSON que vous obtenez de votre demande HTTP. ( const est assez similaire dans la fonctionnalité de var et let ) Si vous souhaitez en savoir plus sur OOP Lire la documentation MDN: développeur.mozilla.org/en-us/docs/learn/javascript/Objects . Après cela, vous voudrez peut-être envisager d'examiner les modèles de conception.
Au fur et à mesure que API renvoie un objet JSON (tableau d'objets). Vous pouvez utiliser pour ... de boucle pour itérer chaque objet et accéder aux informations.
p>
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);
}
Pourriez-vous imprimer la réponse de l'API et de vos résultats attendus?
ofc. J'ai édité la question et j'ai ajouté des exemples. @Samuelvaillant