LU02.A07 - JSON-Daten im Webformularen ausgeben

Dies ist eine alte Version des Dokuments!

Sozialform: Einzelarbeit
Hilfsmittel: Openbooks
Zeit: 40 Minuten
Erwartetes Resultat:
- JavaScript-File, dass eine JSON-Datei einliest und ausgibt.
- HTML-File, welches den Inhalt der JSON-Datei in der Browser-Konsole ausgibt.
- JSON-Daten können nach Vorgaben gefiltert werden.

In der Aufgabe 6 dieses Kapitels haben Sie JSON-Daten im Browserfenster dynamisch ausgeben können. Bisher war diese Ausgabe in Rohform vorhanden, d.h. mit wenig bis keiner HTML-Formatierung.

Nachfolgend sehen Sie die HTML-Ausgabe einer Personenliste, bei der die Ausgabe nach allen Namen, die den Buchstaben M enthalten, gefiltert wurde. Den Quellcode für diese kleine Applikation können Sie unten bei der Aufgabengstellung herunterladen.

Bei dieser Aufgabe geht es darum sich mit den verschiedenen Technologien wie HTML, CSS und JavaScript in Kombination vertraut zu machen.

Ihr Auftrag besteht aus vier Teilaufgaben:

Code importieren + Inhalt testen
JSON-Daten ergänzen (mehr Datensätze)
JSON-Daten erweiteren (weitere Hobbies)
Webformular auf Erweiterungen anpassen

Legen Sie im VS Code einen Ordner mit dem Namen lu02_L07 an.
Copieren Sie die den Inhalt dieses nachfolgenden komprimierten Zip-Files in diesen Ordner: data.json, script.js, styles.css und index.html.
Führen Sie das File index.html im Browser aus.

Aufgabe
- Lassen Sie das nachfolgende Script laufen und analysieren die einzelnen Codeteile.
Aufgabe
- Kommentieren Ihre Erkenntnisse im Code durch entsprechende HTML- oder JS-Codeeinträge.
Experiementiertips
- Ergänzen Sie das JSON-File durch weitere Zeilen und lassen Sie es sich im Browser anzeigen.
- Ergänzen Sie das JSON-File durch weitere Subarrays, z.b. jeder Person erhält eine Adresse, oder die Lieblingslieder einer Person, …
- Verändern Sie die HTML-Formatierung, sodass die Daten anders dargestellt werden. Versuchen Sie also Ihr Wissen aus dem 1. Lehrjahr hier anzuwenden.

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>

LU01.L06

Volkan Demir

LU02.A07 - JSON-Daten im Webformularen ausgeben

Rahmenbedingungen

Ausgangslage

Auftrag

Teilauftrag 1: Code importieren + Inhalt testen

Lösungen

BZZ - Modulwiki