de:modul:m307:learningunits:lu01:aufgaben:05

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m307:learningunits:lu01:aufgaben:05 [2025/12/15 10:34] – angelegt vdemirde:modul:m307:learningunits:lu01:aufgaben:05 [2025/12/15 10:40] (aktuell) – vdemir
Zeile 1: Zeile 1:
-====== LU01.A04 - JSON-File einlesen und dynamsich im der Browser-Konsole ausgeben ======+====== LU01.A05 - JSON-File einlesen und dynamsich im der Browser-Konsole ausgeben ======
  
 ===== Rahmenbedingungen ===== ===== Rahmenbedingungen =====
Zeile 14: Zeile 14:
 ===== Auftrag ===== ===== Auftrag =====
 Ersetzen Sie im nachfolgenden Script die Einzeleinträge durch Schleifen.  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>
  
  
-{{ :de:modul:m307:learningunits:lu01:aufgaben:lu01_l00_e_json_demo.zip |}} 
  
-**Hinweis** 
-Bei dieser Teilaufgabe reicht es, wenn Sie die Daten statisch auslesen. Es braucht also keine Schleife. 
  
-**lernende2.json** 
  
-  { 
-    "lernende": [ 
-      { "id": "00", "name": "Anna", "nachname": "Keller", "alter": 19, "bms": true,  "hobbies": ["Lesen", "Joggen", "Kochen"] }, 
-      { "id": "01", "name": "Luca", "nachname": "Meier", "alter": 18, "bms": false, "hobbies": ["Gaming", "Mountainbike", "Musik"] }, 
-      { "id": "02", "name": "Sophie", "nachname": "Hofstetter", "alter": 20, "bms": true, "hobbies": ["Fotografie", "Yoga", "Reisen"] }, 
-      { "id": "03", "name": "Tim", "nachname": "Schwarz", "alter": 17, "bms": false, "hobbies": ["Fussball", "Schach", "Filme"] }, 
-      { "id": "04", "name": "Mia", "nachname": "Brunner", "alter": 18, "bms": true, "hobbies": ["Zeichnen", "Gitarre", "Backen"] }, 
-      { "id": "05", "name": "Jonas", "nachname": "Weber", "alter": 19, "bms": false, "hobbies": ["Schwimmen", "Fitness", "Spiele"] }, 
-      { "id": "06", "name": "Julia", "nachname": "Frei", "alter": 20, "bms": true, "hobbies": ["Tanzen", "Mode", "Fotobearbeitung"] }, 
-      { "id": "07", "name": "Noah", "nachname": "Kunz", "alter": 18, "bms": false, "hobbies": ["E-Sport", "Klettern", "Trompete"] }, 
-      { "id": "08", "name": "Emily", "nachname": "Gruber", "alter": 19, "bms": false, "hobbies": ["Lesen", "Kunst", "Volleyball"] }, 
-      { "id": "09", "name": "Nico", "nachname": "Hug", "alter": 21, "bms": true, "hobbies": ["Laufen", "Gaming", "Kochen"] }, 
-      { "id": "10", "name": "Leonie", "nachname": "Seiler", "alter": 18, "bms": false, "hobbies": ["Ballett", "Schreiben", "Reisen"] }, 
-      { "id": "11", "name": "David", "nachname": "Bachmann", "alter": 22, "bms": true, "hobbies": ["Kraftsport", "Wandern", "Barbecue"] } 
-    ]   
-  } 
  
  
 ===== Lösungen ===== ===== Lösungen =====
-[[de:modul:m307:learningunits:lu01:Lösungen:04|LU01.L04]]+[[de:modul:m307:learningunits:lu01:Lösungen:05|LU01.L05]]
  
 ---- ----
  • de/modul/m307/learningunits/lu01/aufgaben/05.1765791244.txt.gz
  • Zuletzt geändert: 2025/12/15 10:34
  • von vdemir