LU01.A05 - JSON-File einlesen und dynamsich im der Browser-Konsole ausgeben

Rahmenbedingungen

Ausgangslage

Bei der A04 haben wir statisch rund 10 Datensätze in der Browserkonsole statisch ausgeben lassen. Das hat den grossen Nachteil, dass jeder Neuzugang bei in der JSON-Datei im HTML neu programiert werden muss. Wir wollen nun unser Script dynamisch gestalten, sodass alle gespeicherten JSON-Daten, unabhängig von Ihrer Anzahl, ausgegeben werden.

Auftrag

Ersetzen Sie im nachfolgenden Script die Einzeleinträge durch Schleifen.

index.html 

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Lernende Konsole</title>
</head>
<body>
  <script>
    fetch("lernende.json")
      .then(response => response.json())
      .then(data => {
        console.log("------- Lernende/r 1 ------- ");
        console.log("id:", data.lernende[0].id); 
        console.log("Name:", data.lernende[0].name, data.lernende[0].nachname);
        console.log("Hobbies:", data.lernende[0].hobbies[0], 
                                data.lernende[0].hobbies[1],
                                data.lernende[0].hobbies[2]);
        //                       
        console.log("------- Lernende/r 2 ------- ");
        console.log("id:", data.lernende[1].id); 
        console.log("Name:", data.lernende[1].name, data.lernende[1].nachname);
        console.log("Hobbies:", data.lernende[1].hobbies[0],
                                data.lernende[1].hobbies[1],
                                data.lernende[1].hobbies[2]);
        //
        console.log("------- Lernende/r 3 ------- ");
        console.log("id:", data.lernende[2].id);
        console.log("Name:", data.lernende[2].name, data.lernende[2].nachname);
        console.log("Hobbies:", data.lernende[2].hobbies[0],
                                data.lernende[2].hobbies[1],
                                data.lernende[2].hobbies[2]);
        //
        console.log("------- Lernende/r 4 ------- ");
        console.log("id:", data.lernende[3].id);
        console.log("Name:", data.lernende[3].name, data.lernende[3].nachname);
        console.log("Hobbies:", data.lernende[3].hobbies[0],
                               data.lernende[3].hobbies[1],
                               data.lernende[3].hobbies[2]);
        //
        console.log("------- Lernende/r 5 ------- ");
        console.log("id:", data.lernende[4].id);
        console.log("Name:", data.lernende[4].name, data.lernende[4].nachname);
        console.log("Hobbies:", data.lernende[4].hobbies[0],
                               data.lernende[4].hobbies[1],
                               data.lernende[4].hobbies[2]);
        //
        console.log("------- Lernende/r 6 ------- ");
        console.log("id:", data.lernende[5].id);
        console.log("Name:", data.lernende[5].name, data.lernende[5].nachname);
        console.log("Hobbies:", data.lernende[5].hobbies[0],
                               data.lernende[5].hobbies[1],
                               data.lernende[5].hobbies[2]);
        //
        console.log("------- Lernende/r 7 ------- ");
        console.log("id:", data.lernende[6].id);
        console.log("Name:", data.lernende[6].name, data.lernende[6].nachname);
        console.log("Hobbies:", data.lernende[6].hobbies[0],
                                data.lernende[6].hobbies[1],
                               data.lernende[6].hobbies[2]);
        //
        console.log("------- Lernende/r 8 ------- ");
        console.log("id:", data.lernende[7].id);
        console.log("Name:", data.lernende[7].name, data.lernende[7].nachname);
        console.log("Hobbies:", data.lernende[7].hobbies[0],
                               data.lernende[7].hobbies[1],
                               data.lernende[7].hobbies[2]);
        //
        console.log("------- Lernende/r 9 ------- ");
        console.log("id:", data.lernende[8].id);
        console.log("Name:", data.lernende[8].name, data.lernende[8].nachname);
        console.log("Hobbies:", data.lernende[8].hobbies[0],
                               data.lernende[8].hobbies[1],
                               data.lernende[8].hobbies[2]);
        //
        console.log("------- Lernende/r 10 ------- ");
        console.log("id:", data.lernende[9].id);
        console.log("Name:", data.lernende[9].name, data.lernende[9].nachname);
        console.log("Hobbies:", data.lernende[9].hobbies[0],
                               data.lernende[9].hobbies[1],
                               data.lernende[9].hobbies[2]);
        //
        console.log("------- Lernende/r 11 ------- ");
        console.log("id:", data.lernende[10].id);
        console.log("Name:", data.lernende[10].name, data.lernende[10].nachname);
        console.log("Hobbies:", data.lernende[10].hobbies[0],
                               data.lernende[10].hobbies[1],
                               data.lernende[10].hobbies[2]);
        //
        console.log("------- Lernende/r 12 ------- ");
        console.log("id:", data.lernende[11].id);
        console.log("Name:", data.lernende[11].name, data.lernende[11].nachname);
        console.log("Hobbies:", data.lernende[11].hobbies[0],
                               data.lernende[11].hobbies[1],
                               data.lernende[11].hobbies[2]);
        //
      })
      .catch(err => {
        console.error("Fehler beim Laden:", err);
      });
   </script>
</body>
</html>

Lösungen

LU01.L05

Volkan Demir