de:modul:m307:learningunits:lu02:aufgaben:05

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m307:learningunits:lu02:aufgaben:05 [2026/02/09 13:42] – gelöscht - Externe Bearbeitung (Unbekanntes Datum) 127.0.0.1de:modul:m307:learningunits:lu02:aufgaben:05 [2026/02/09 16:49] (aktuell) – ↷ Links angepasst, weil Seiten im Wiki verschoben wurden 216.73.216.51
Zeile 1: Zeile 1:
 +====== LU02.A05 - JSON-File einlesen und dynamsich im der Browser-Konsole 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 =====
 +Bei der A04 haben wir statisch rund 10 Datensätze in der Browserkonsole statisch ausgeben lassen. Das hat den grossen Nachteil, dass jeder Neuzugang bei in der JSON-Datei im HTML neu programiert werden muss. Wir wollen nun unser Script dynamisch gestalten, sodass alle gespeicherten JSON-Daten, unabhängig von Ihrer Anzahl, ausgegeben werden. 
 +
 +===== Auftrag =====
 +Ersetzen Sie im nachfolgenden Script die Einzeleinträge durch Schleifen. 
 +
 +**index.html**
 +
 +  <!DOCTYPE html>
 +  <html lang="de">
 +  <head>
 +    <meta charset="UTF-8">
 +    <title>Lernende Konsole</title>
 +  </head>
 +  <body>
 +    <script>
 +      fetch("lernende.json")
 +        .then(response => response.json())
 +        .then(data => {
 +          console.log("------- Lernende/r 1 ------- ");
 +          console.log("id:", data.lernende[0].id); 
 +          console.log("Name:", data.lernende[0].name, data.lernende[0].nachname);
 +          console.log("Hobbies:", data.lernende[0].hobbies[0], 
 +                                  data.lernende[0].hobbies[1],
 +                                  data.lernende[0].hobbies[2]);
 +          //                       
 +          console.log("------- Lernende/r 2 ------- ");
 +          console.log("id:", data.lernende[1].id); 
 +          console.log("Name:", data.lernende[1].name, data.lernende[1].nachname);
 +          console.log("Hobbies:", data.lernende[1].hobbies[0],
 +                                  data.lernende[1].hobbies[1],
 +                                  data.lernende[1].hobbies[2]);
 +          //
 +          console.log("------- Lernende/r 3 ------- ");
 +          console.log("id:", data.lernende[2].id);
 +          console.log("Name:", data.lernende[2].name, data.lernende[2].nachname);
 +          console.log("Hobbies:", data.lernende[2].hobbies[0],
 +                                  data.lernende[2].hobbies[1],
 +                                  data.lernende[2].hobbies[2]);
 +          //
 +          console.log("------- Lernende/r 4 ------- ");
 +          console.log("id:", data.lernende[3].id);
 +          console.log("Name:", data.lernende[3].name, data.lernende[3].nachname);
 +          console.log("Hobbies:", data.lernende[3].hobbies[0],
 +                                 data.lernende[3].hobbies[1],
 +                                 data.lernende[3].hobbies[2]);
 +          //
 +          console.log("------- Lernende/r 5 ------- ");
 +          console.log("id:", data.lernende[4].id);
 +          console.log("Name:", data.lernende[4].name, data.lernende[4].nachname);
 +          console.log("Hobbies:", data.lernende[4].hobbies[0],
 +                                 data.lernende[4].hobbies[1],
 +                                 data.lernende[4].hobbies[2]);
 +          //
 +          console.log("------- Lernende/r 6 ------- ");
 +          console.log("id:", data.lernende[5].id);
 +          console.log("Name:", data.lernende[5].name, data.lernende[5].nachname);
 +          console.log("Hobbies:", data.lernende[5].hobbies[0],
 +                                 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>
 +  </html>
 +
 +
 +
 +
 +
 +
 +
 +===== Lösungen =====
 +[[de:modul:m307:learningunits:lu02:loesungen:05|LU01.L05]]
 +
 +----
 +[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir
 +
 +
 +