de:modul:m307:learningunits:lu01:aufgaben:06

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m307:learningunits:lu01:aufgaben:06 [2025/12/15 11:27] – angelegt vdemirde:modul:m307:learningunits:lu01:aufgaben:06 [2025/12/15 11:56] (aktuell) – vdemir
Zeile 11: Zeile 11:
 ===== Ausgangslage ===== ===== 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. 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.
 +
 +{{:de:modul:m307:learningunits:lu01:aufgaben:lu01_l06_1.jpg?600|}}
  
 ===== Auftrag ===== ===== Auftrag =====
-Passen Sie den nachfolgenden Mustersourcecode so an, sodass die JSON-Daten im Browerfenster eingezeigt werden. Die entsprechenden Input haben Sie innerhalb des Moduls 288 in der //HTML-DOM// erhalten. +Lassen Sie das nachfolgende Script laufen und kommentieren Ihre Erkenntnisse im Code durch entsprechende HTML- oder JS-Codeeinträge.
  
 **index.html** **index.html**
Zeile 22: Zeile 25:
   <head>   <head>
     <meta charset="UTF-8">     <meta charset="UTF-8">
-    <title>Lernende Konsole</title>+    <title>Lernende Anzeige</title>
   </head>   </head>
   <body>   <body>
-    <script> +  <h1>Lernende</h1> 
-      fetch("lernende.json") +  <div id="ausgabe"></div> 
-        .then(response => response.json()) +  <script> 
-        .then(data => { +    fetch("lernende2.json") 
-          console.log("------- Lernende/r 1 ------- "); +      .then(response => response.json()) 
-          console.log("id:", data.lernende[0].id);  +      .then(data => { 
-          console.log("Name:", data.lernende[0].name, data.lernende[0].nachname); +      // 
-          console.log("Hobbies:", data.lernende[0].hobbies[0],  +      const ausgabe = document.getElementById("ausgabe"); 
-                                  data.lernende[0].hobbies[1], +      for (let i = 0; i < data.lernende.length; i++) { 
-                                  data.lernende[0].hobbies[2]); +        const lernenderDiv = document.createElement("div"); 
-          //                        +        const ueberschrift = document.createElement("h2"); 
-          console.log("------- Lernende/r 2 ------- "); +        ueberschrift.textContent = "Lernende/r " + (i + 1); 
-          console.log("id:", data.lernende[1].id);  +        // 
-          console.log("Name:", data.lernende[1].name, data.lernende[1].nachname); +        const idP = document.createElement("p"); 
-          console.log("Hobbies:", data.lernende[1].hobbies[0], +        idP.textContent = "ID: " + data.lernende[i].id; 
-                                  data.lernende[1].hobbies[1], +        // 
-                                  data.lernende[1].hobbies[2]); +        const nameP = document.createElement("p"); 
-          // +        nameP.textContent = "Name: " + data.lernende[i].name + " " + data.lernende[i].nachname; 
-          console.log("------- Lernende/r 3 ------- "); +        // 
-          console.log("id:", data.lernende[2].id); +        const hobbyTitel = document.createElement("p"); 
-          console.log("Name:", data.lernende[2].name, data.lernende[2].nachname); +        hobbyTitel.textContent = "Hobbies:"; 
-          console.log("Hobbies:", data.lernende[2].hobbies[0], +        // 
-                                  data.lernende[2].hobbies[1], +        const hobbyListe = document.createElement("ul"); 
-                                  data.lernende[2].hobbies[2]); +        // 
-          // +        for (let j = 0; j < data.lernende[i].hobbies.length; j++) { 
-          console.log("------- Lernende/r 4 ------- "); +          const hobbyItem = document.createElement("li"); 
-          console.log("id:", data.lernende[3].id); +          hobbyItem.textContent = data.lernende[i].hobbies[j]; 
-          console.log("Name:", data.lernende[3].name, data.lernende[3].nachname); +          hobbyListe.appendChild(hobbyItem); 
-          console.log("Hobbies:", data.lernende[3].hobbies[0], +        } 
-                                 data.lernende[3].hobbies[1], +        // 
-                                 data.lernende[3].hobbies[2]); +        lernenderDiv.appendChild(ueberschrift); 
-          // +        lernenderDiv.appendChild(idP); 
-          console.log("------- Lernende/r 5 ------- "); +        lernenderDiv.appendChild(nameP); 
-          console.log("id:", data.lernende[4].id); +        lernenderDiv.appendChild(hobbyTitel); 
-          console.log("Name:", data.lernende[4].name, data.lernende[4].nachname); +        lernenderDiv.appendChild(hobbyListe); 
-          console.log("Hobbies:", data.lernende[4].hobbies[0], +        // 
-                                 data.lernende[4].hobbies[1], +        ausgabe.appendChild(lernenderDiv); 
-                                 data.lernende[4].hobbies[2]); +        } 
-          // +      }) 
-          console.log("------- Lernende/r 6 ------- "); +      .catch(err => { 
-          console.log("id:", data.lernende[5].id); +        console.error("Fehler beim Laden:", err); 
-          console.log("Name:", data.lernende[5].name, data.lernende[5].nachname); +    }); 
-          console.log("Hobbies:", data.lernende[5].hobbies[0], +  </script>
-                                 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>   </body>
   </html>   </html>
- 
- 
- 
- 
- 
  
  
 ===== Lösungen ===== ===== Lösungen =====
-[[de:modul:m307:learningunits:lu01:Lösungen:05|LU01.L05]]+[[de:modul:m307:learningunits:lu01:Lösungen:06|LU01.L06]]
  
 ---- ----
  • de/modul/m307/learningunits/lu01/aufgaben/06.1765794441.txt.gz
  • Zuletzt geändert: 2025/12/15 11:27
  • von vdemir