Dies ist eine alte Version des Dokuments!
LU02.A06 - JSON-File einlesen und dynamsich mittels Browser-Fenster ausgeben
Rahmenbedingungen
- Sozialform: Einzelarbeit
- Hilfsmittel: Openbooks
- Zeit: 20 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.
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
Aufgabe 1 Lassen Sie das nachfolgende Script laufen und analysieren die einzelnen Codeteile.
Aufgabe 2 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>
