LU02.L04 - JSON-File einlesen und statisch mittels Browser-Konsole ausgeben

Auftrag

Ihr Auftrag besteht darin den Inhalt der Datei lernende2.json mit 10 Datensätze in der Browser-Konsole ausgeben zu lassen.

Die benötigten Dateien finden Sie in dieser Zip-Datei mit den relevanten Arbeits-Files.

Hinweis Bei dieser Teilaufgabe reicht es, wenn Sie die Daten statisch auslesen. Es braucht also keine Schleife.

lernende2.json

  {
    "lernende": [
      { "id": "00", "name": "Anna", "nachname": "Keller", "alter": 19, "bms": true,  "hobbies": ["Lesen", "Joggen", "Kochen"] },
      { "id": "01", "name": "Luca", "nachname": "Meier", "alter": 18, "bms": false, "hobbies": ["Gaming", "Mountainbike", "Musik"] },
      { "id": "02", "name": "Sophie", "nachname": "Hofstetter", "alter": 20, "bms": true, "hobbies": ["Fotografie", "Yoga", "Reisen"] },
      { "id": "03", "name": "Tim", "nachname": "Schwarz", "alter": 17, "bms": false, "hobbies": ["Fussball", "Schach", "Filme"] },
      { "id": "04", "name": "Mia", "nachname": "Brunner", "alter": 18, "bms": true, "hobbies": ["Zeichnen", "Gitarre", "Backen"] },
      { "id": "04", "name": "Jonas", "nachname": "Weber", "alter": 19, "bms": false, "hobbies": ["Schwimmen", "Fitness", "Spiele"] },
      { "id": "05", "name": "Julia", "nachname": "Frei", "alter": 20, "bms": true, "hobbies": ["Tanzen", "Mode", "Fotobearbeitung"] },
      { "id": "06", "name": "Noah", "nachname": "Kunz", "alter": 18, "bms": false, "hobbies": ["E-Sport", "Klettern", "Trompete"] },
      { "id": "07", "name": "Emily", "nachname": "Gruber", "alter": 19, "bms": false, "hobbies": ["Lesen", "Kunst", "Volleyball"] },
      { "id": "08", "name": "Nico", "nachname": "Hug", "alter": 21, "bms": true, "hobbies": ["Laufen", "Gaming", "Kochen"] },
      { "id": "09", "name": "Leonie", "nachname": "Seiler", "alter": 18, "bms": false, "hobbies": ["Ballett", "Schreiben", "Reisen"] },
      { "id": "10", "name": "David", "nachname": "Bachmann", "alter": 22, "bms": true, "hobbies": ["Kraftsport", "Wandern", "Barbecue"] }
    ]  
  }

Lösungen als Browsewr-Konsolen-Output

Das Ergebnis der Ausgabe sieht dann wie folgt aus:

Lösungen des HTML/JS-Sourcecodes

5
 
<!DOCTYPE html>
<!-- 
   Author: Volkan Demir, 17.03.26
   LU01.l04: Dynamischer Ausgabe von JSON-Daten mittels einer Schleife
   Das Ergebnis ist dann in der Browserkonsole sichtbar
-->
<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>

Volkan Demir