LU01.A06 - JSON-File einlesen und dynamsich im der Browser-Fenster ausgeben

Rahmenbedingungen

Ausgangslage

Bisher haben wir nur Daten in der Server- oder der Browserkonsole ausgegeben. Nun wollen wir Daten im tatäschlichen Fenster anzeigen lassen, also für den Endkunden einsehbar machen.

Das nachfolgene Script index.html erzeugt die folgende Bildschirmausgabe.

Auftrag

Lassen Sie das nachfolgende Script laufen und kommentieren Ihre Erkenntnisse im Code durch entsprechende HTML- oder JS-Codeeinträge.

index.html 

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Lernende Anzeige</title>
</head>
<body>
<h1>Lernende</h1>
<div id="ausgabe"></div>
<script>
  fetch("lernende2.json")
    .then(response => response.json())
    .then(data => {
    //
    const ausgabe = document.getElementById("ausgabe");
    for (let i = 0; i < data.lernende.length; i++) {
      const lernenderDiv = document.createElement("div");
      const ueberschrift = document.createElement("h2");
      ueberschrift.textContent = "Lernende/r " + (i + 1);
      //
      const idP = document.createElement("p");
      idP.textContent = "ID: " + data.lernende[i].id;
      //
      const nameP = document.createElement("p");
      nameP.textContent = "Name: " + data.lernende[i].name + " " + data.lernende[i].nachname;
      //
      const hobbyTitel = document.createElement("p");
      hobbyTitel.textContent = "Hobbies:";
      //
      const hobbyListe = document.createElement("ul");
      //
      for (let j = 0; j < data.lernende[i].hobbies.length; j++) {
        const hobbyItem = document.createElement("li");
        hobbyItem.textContent = data.lernende[i].hobbies[j];
        hobbyListe.appendChild(hobbyItem);
      }
      //
      lernenderDiv.appendChild(ueberschrift);
      lernenderDiv.appendChild(idP);
      lernenderDiv.appendChild(nameP);
      lernenderDiv.appendChild(hobbyTitel);
      lernenderDiv.appendChild(hobbyListe);
      //
      ausgabe.appendChild(lernenderDiv);
      }
    })
    .catch(err => {
      console.error("Fehler beim Laden:", err);
  });
</script>
</body>
</html>

Lösungen

LU01.L06

Volkan Demir