Afficher la reponse .json par ricem - page 1

Bonjour,

je suis le cours sur Créez des pages web dynamiques avec JavaScript, j'ai suivi pas par pas, mais ça ne veut pas fonctionner je vous donne mon code :

!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>

Le fichier .json

[
    {
        "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"
    }
]

et le fichier Js

/ // 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);
    }

dans la console il me mets

Uncaught SyntaxError: await is only valid in async functions, async generators and modules

je cherche depuis plusieurs jours...

-
Edité par ricem 21 juillet 2024 à 17:27:24

ricem

21 juillet 2024 à 17:08:49

Ricem

Ymox

24 juillet 2024 à 10:17:52

Salut

Le fichier JavaScript est-il complet, ou l'accolade de fin manquante (pour fermer la fonction) est un souci de copié-collé ?

OC à changer • FAQ PHP • Et avant cela • Tutoriel WAMP • @Zeste de Savoir

FlorentDumoulin1

24 juillet 2024 à 13:39:57

Hello,

Du débutant au débutant, je n'ai pas mis à jour l'écriture du début (2 constantes au lieu de .then) et ça fonctionne chez moi (pour peu que j'ouvre le index.html avec LiveServer). La partie du cours qui parle du .then implique une interaction avec une API.

Donc 1ère ligne à remplacer par :

const bidule = await fetch("jiji.json");

const machin = await bidule.json();

1 août 2024 à 14:37:57

Bonjour, du coup j'ai compris pourquoi cela ne fonctionnait pas, je mélangeais le synchrone et le asynchrone...j'ai lu quelque tuto et ça va mieux...l'url est dans le même dossier donc pas besoin asynchrone, il répondra de suite.

Du coup le array s"affiche bien dans la console, mais je ne sais toujours pas faire la liaison pour afficher le résultat à l'écran ?

Afficher la reponse .json

Afficher la reponse .json

Supprimer

Modérer

Signaler le message aux modérateurs