Bonjour,
Je test un code api, sauf que rien ne fonctionne comme il le faut...
rien ne s'affiche, je fais un console log pour vérifier si le fetch fonctionne...même ça je n'y arrive pas
je vous mets mes codes :
merci.
Je test un code api, sauf que rien ne fonctionne comme il le faut...
rien ne s'affiche, je fais un console log pour vérifier si le fetch fonctionne...même ça je n'y arrive pas
je vous mets mes codes :
!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="fruits.css">
<script src="fruits.js" defer></script>
<title>Fruits rouges</title>
</head>
<body>
<h1>Les fruits rouges :</h1>
<main>
<section class="liste">
<ul>
<ul>
<li><a href="">Cerise</a></li>
<li><a href="">Fraise</a></li>
<li><a href="">Framboise</a></li>
<li> <a href="">Mûre</a></li>
</ul>
</ul>
</section>
<section class="contenu">
</section>
</main>
</body>
</html>[
{
"titre": "Cerise",
"description": "La cerise est le fruit comestible du cerisier, il s'agit d'un fruit charnu à noyau de forme sphérique, généralement de couleur rouge."
},
{
"titre": "Fraise",
"description": "La fraise est un petit fruit rouge issu des fraisiers, espèces de plantes herbacées appartenant au genre Fragaria"
},
{
"titre": "Framboise",
"description": "La framboise est un fruit rouge issu du framboisier, un arbrisseau de la famille des rosacées.."
},
{
"titre": "Mûre",
"description": "La mûre est un fruit comestible de la ronce commune, buisson épineux très envahissant du genre Rubus, de la famille des Rosacées, comme le framboisier"
}
]/ // Récupération des fruits depuis le fichier JSON
const fruits = await fetch("fruits.json").then(fruits => fruits.json());
console.log(fruits);
const affichage = fruits[0];
console.log(affichage);
// Fonction qui génère toute la page web
function genererFruits(fruits) {
for (let i = 0; i < fruits.length; i++) {
// On créer une balise h2 pour le titre
const titreElement = document.createElement("h2");
titreElement.innerText = affichage.titre;
// On créer une balise article pour la description
const articleElement = document.createElement("article");
articleElement.innerText = affichage.description;
// on selectionne la balise dans le code html
const contenu = document.querySelector(".contenu");
// On rattache les éléments au fichier html
contenu.appendChild(titreElement);
contenu.appendChild(articleElement);
}merci.