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> -->
Faire apparaitre ses Card depuis une API
Re: Faire apparaitre ses Card depuis une API
Bonjour,
Les objets de l'api n'étaient pas bien construits.
J'ai corrigé et simplifié le script :
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
https://www.toutjavascript.com/livre/index.php