de:modul:m307:learningunits:lu02:loesungen:04

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:loesungen:04 [2026/02/10 14:17] – vdemirde:modul:m307:learningunits:lu02:loesungen:04 [2026/05/27 10:04] (aktuell) – vdemir
Zeile 1: Zeile 1:
-====== LU02.L04 - JSON-File einlesen und statisch mittls Browser-Konsole ausgeben ======+====== LU02.L04 - JSON-File einlesen und statisch mittels Browser-Konsole ausgeben ======
  
 ===== Auftrag ===== ===== Auftrag =====
Zeile 10: Zeile 10:
  
 **lernende2.json** **lernende2.json**
 +<code javascript>
   {   {
     "lernende": [     "lernende": [
Zeile 27: Zeile 27:
     ]       ]  
   }   }
 +</code>
  
 ===== Lösungen als Browsewr-Konsolen-Output ===== ===== Lösungen als Browsewr-Konsolen-Output =====
Zeile 36: Zeile 36:
 ===== Lösungen des HTML/JS-Sourcecodes ===== ===== Lösungen des HTML/JS-Sourcecodes =====
  
-  <!DOCTYPE html> +<code html>5
-  <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> +
- +
- +
  
 +<!DOCTYPE html>
 +<!-- 
 +   Author: Volkan Demir, 17.03.26
 +   LU01.l04: Dynamischer Ausgabe von JSON-Daten mittels einer Schleife
 +   Das Ergebnis ist dann in der Browserkonsole sichtbar
 +-->
 +<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>
  
 +</code>
  
 ---- ----
  • de/modul/m307/learningunits/lu02/loesungen/04.1770729446.txt.gz
  • Zuletzt geändert: 2026/02/10 14:17
  • von vdemir