Faire apparaitre ses Card depuis une API

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Betty
Messages : 1
Enregistré le : 09 mars 2023, 19:41

Faire apparaitre ses Card depuis une API

Message par Betty » 09 mars 2023, 19:50

Bonjour,

Je suis en formation dev web et nous avons comme TD d'utiliser une api.
Je dois réussir a afficher 6 cards en aléatoire avec le lien prévu pour ca : www.themealdb.com/api/json/v1/1/random.php

J'arrive a récupérer les 6 objets dans la console, mais je n'arrive pas a afficher les 6 Cards sur la page HTML.

Auriez-vous l'amabilité de m'aider pour enfin afficher ces 6 cards ! un grand MERCI si vous trouvez la solution !!!!!


Fichier Index.js

const apiKey = "1";

const urlStart = "https://www.themealdb.com/api/json/v1/1/search.php?s=";

const form = document.querySelector(".rechercher form");
const input = document.querySelector(".rechercher input");
const list = document.querySelector(".recette");

form.addEventListener("submit", onFormSubmitted);

function onFormSubmitted(event) {
event.preventDefault(apiKey);

let inputValue = input.value;

const url = `${urlStart}${inputValue}`;
console.log("URL", url);

fetch(url)
.then((response) => response.json())
.then(function (data) {
console.log(data);
});
}

console.log("recettes aléatoires");

for (let compteur = 0; compteur <= 5; compteur++) {
fetch(`https://www.themealdb.com/api/json/v1/1/random.php`)
.then((response) => response.json())
.then(function (data) {
// let Recette = new RecetteCard();
console.log(data);

const { meals, strMeal, strMealThumb, strInstructions } = data;

let Recette = new RecetteCard(
meals,
strMeal,
strMealThumb,
strInstructions
);

list.appendChild(Recette.content);
});
}



fichier RecetteCard qui appelle la classe

export class RecetteCard {
_titre;
_photo;
_instruction;

constructor(titre, photo, instruction) {
this._titre = titre;
this._photo = photo;
this._instruction = instruction;

console.log(
"New recettecarte",
this._titre,
this._photo,
this._instruction
);
}

get content() {
const recette = document.createElement("recette");
recette.classList.add("recette");

const markup = `

<img class= "recetteImage" data-name="${this._photo}" alt="gratin de boeuf">

<h5 class="recetteTitre" data-name="${this._titre}">

<p class="recetteInstruction"data-name="${this._instruction}"</p>


<a href="#" id="card1" class="btn btn-primary">Go somewhere</a>
`;

recette.innerHTML = markup;
return recette;
}
}



page html

!--
<div class="container text-center">
<div class="row align-items-start"> -->


<div class="col-sm-4">
<div class="recette">

<!--
<img class= "recetteImage" src="../assets/img/i16421-gratin-de-boeuf-et-gnocchi.webp" class="rounded" alt="gratin de boeuf">


<h5 class="recetteTitre">Gratin de bœuf et gnocchi</h5>
<p class="recetteInstruction">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" id="card1" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div> -->

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Faire apparaitre ses Card depuis une API

Message par webmaster » 14 mars 2023, 21:34

Bonjour,

Les objets de l'api n'étaient pas bien construits.
J'ai corrigé et simplifié le script :

Code : Tout sélectionner

<div class="container text-center">
    <div class="row align-items-start"> -->
    
    
    <div class="col-sm-4">
    <div class="recette">
    


    
    
    <h5 class="recetteTitre">Gratin de bœuf et gnocchi</h5>
    <p class="recetteInstruction">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" id="card1" class="btn btn-primary">Go somewhere</a>
    </div>
    </div>
    </div>

<script>

const apiKey = "1";

const urlStart = "https://www.themealdb.com/api/json/v1/1/search.php?s=";

const form = document.querySelector(".rechercher form");
const input = document.querySelector(".rechercher input");
const list = document.querySelector(".recette");


 {


let inputValue = "boeuf";

const url = `${urlStart}${inputValue}`;
console.log("URL", url);

fetch(url)
.then((response) => response.json())
.then(function (data) {
console.log(data);
});
}

console.log("recettes aléatoires");

for (let compteur = 0; compteur < 5; compteur++) {
    fetch(`https://www.themealdb.com/api/json/v1/1/random.php`)
    .then((response) => response.json())
    .then(function (data) {
        console.log(data.meals[0]);

        let  meals = data.meals[0].strMeal, 
        strMeal = data.meals[0].strMeal, 
        strMealThumb = data.meals[0].strMealThumb, 
        strInstructions  = data.meals[0].strInstructions;

        console.log(meals);
        let Recette = new RecetteCard(
            strMeal,
            strMealThumb,
            strInstructions
        );

        list.appendChild(Recette.content);
    });
}



 class RecetteCard {
_titre;
_photo;
_instruction;

constructor(titre, photo, instruction) {
this._titre = titre;
this._photo = photo;
this._instruction = instruction;

console.log(
"New recettecarte",
this._titre,
this._photo,
this._instruction
);
}

get content() {
const recette = document.createElement("recette");
recette.classList.add("recette");

const markup = `

<img class= "recetteImage" data-name="${this._photo}" alt="" src="${this._photo}">

<h5 class="recetteTitre" data-name="${this._titre}">${this._titre}

<p class="recetteInstruction"data-name="${this._instruction}"</p>${this._instruction}


<a href="#" id="card1" class="btn btn-primary">Go somewhere</a>
`;

recette.innerHTML = markup;
return recette;
}
}
</script>


TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre