Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m307:learningunits:lu02:aufgaben:06 [2026/02/09 16:49] – ↷ Links angepasst, weil Seiten im Wiki verschoben wurden 216.73.216.51
+++ de:modul:m307:learningunits:lu02:aufgaben:06 [2026/03/26 08:24] (aktuell) – vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU02.A06 - JSON-File einlesen und dynamsich im der Browser-Fenster ausgeben ======
+====== LU02.A06 - JSON-File einlesen und dynamsich mittels Browser-Fenster ausgeben ======
 ===== Rahmenbedingungen =====
@@ Zeile 17: / Zeile 17: @@
 ===== Auftrag =====
-Lassen Sie das nachfolgende Script laufen und kommentieren Ihre Erkenntnisse im Code durch entsprechende HTML- oder JS-Codeeinträge.
+  - **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**
+<code html>
-  <!DOCTYPE html>
+<!DOCTYPE html>
-  <html lang="de">
+<html lang="de">
-  <head>
+<head>
-    <meta charset="UTF-8">
+  <meta charset="UTF-8">
-    <title>Lernende Anzeige</title>
+  <title>Lernende Anzeige</title>
-  </head>
+</head>
-  <body>
+<body>
-  <h1>Lernende</h1>
+<h1>Lernende</h1>
-  <div id="ausgabe"></div>
+<div id="ausgabe"></div>
-  <script>
+<script>
-    fetch("lernende2.json")
+  fetch("lernende2.json")
-      .then(response => response.json())
+    .then(response => response.json())
-      .then(data => {
+    .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 ausgabe = document.getElementById("ausgabe");
+      const idP = document.createElement("p");
-      for (let i = 0; i < data.lernende.length; i++) {
+      idP.textContent = "ID: " + data.lernende[i].id;
-        const lernenderDiv = document.createElement("div");
+      //
-        const ueberschrift = document.createElement("h2");
+      const nameP = document.createElement("p");
-        ueberschrift.textContent = "Lernende/r " + (i + 1);
+      nameP.textContent = "Name: " + data.lernende[i].name + " " + data.lernende[i].nachname;
-        //
+      //
-        const idP = document.createElement("p");
+      const hobbyTitel = document.createElement("p");
-        idP.textContent = "ID: " + data.lernende[i].id;
+      hobbyTitel.textContent = "Hobbies:";
-        //
+      //
-        const nameP = document.createElement("p");
+      const hobbyListe = document.createElement("ul");
-        nameP.textContent = "Name: " + data.lernende[i].name + " " + data.lernende[i].nachname;
+      //
-        //
+      for (let j = 0; j < data.lernende[i].hobbies.length; j++) {
-        const hobbyTitel = document.createElement("p");
+        const hobbyItem = document.createElement("li");
-        hobbyTitel.textContent = "Hobbies:";
+        hobbyItem.textContent = data.lernende[i].hobbies[j];
-        //
+        hobbyListe.appendChild(hobbyItem);
-        const hobbyListe = document.createElement("ul");
+      }
-        //
+      //
-        for (let j = 0; j < data.lernende[i].hobbies.length; j++) {
+      lernenderDiv.appendChild(ueberschrift);
-          const hobbyItem = document.createElement("li");
+      lernenderDiv.appendChild(idP);
-          hobbyItem.textContent = data.lernende[i].hobbies[j];
+      lernenderDiv.appendChild(nameP);
-          hobbyListe.appendChild(hobbyItem);
+      lernenderDiv.appendChild(hobbyTitel);
-        }
+      lernenderDiv.appendChild(hobbyListe);
-        //
+      //
-        lernenderDiv.appendChild(ueberschrift);
+      ausgabe.appendChild(lernenderDiv);
-        lernenderDiv.appendChild(idP);
+      }
-        lernenderDiv.appendChild(nameP);
+    })
-        lernenderDiv.appendChild(hobbyTitel);
+    .catch(err => {
-        lernenderDiv.appendChild(hobbyListe);
+      console.error("Fehler beim Laden:", err);
-        //
+  });
-        ausgabe.appendChild(lernenderDiv);
+</script>
-        }
+</body>
-      })
+</html>
-      .catch(err => {
+</code>
-        console.error("Fehler beim Laden:", err);
-    });
-  </script>
-  </body>
-  </html>
 ===== Lösungen =====