Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m307:learningunits:lu01:aufgaben:04 [2025/12/15 09:57] – vdemir
+++ de:modul:m307:learningunits:lu01:aufgaben:04 [2025/12/15 12:36] (aktuell) – vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU01.A04 - JSON-File einlesen und im der Browser-Konsole ausgeben ======
+====== LU01.A04 - JSON-File einlesen und statisch im der Browser-Konsole ausgeben ======
 ===== Rahmenbedingungen =====
@@ Zeile 7: / Zeile 7: @@
   * Erwartetes Resultat:
     * JavaScript-File, dass eine JSON-Datei einliest und ausgibt.
-    * HTML-File, dass das vom JS verarbeitete JSON-File im im Browser ausgibt.
+    * HTML-File, welches den Inhalt der JSON-Datei in der Browser-Konsole ausgibt.
 ===== Ausgangslage =====
-Nachdem wir im Backend ein JSON-File angelegt und auf der Server-Konsole ausgeben habe, ist es jetzt an der Zeit den JSON-Inhalt auch im Frontend, mittels einer HTML-Datei ausgeben zu lassen, da das die Schnittstelle ist zum Endkunden. Ihre Lehrperson hat Ihnen dies in einer Demonstration vorgezeigt, allerdings mit nur einem JSON-Datensatz.
+Nachdem wir im Backend ein JSON-File angelegt und auf der Server-Konsole ausgeben habe, ist es jetzt an der Zeit den JSON-Inhalt auch im Frontend, mittels einer HTML-Datei ausgeben zu lassen, da das die Schnittstelle ist zum Endkunden. Ich meine, der Kunde sollte definitiv nicht direkt mit dem Backend arbeiten müssen, das fände ich als Endkunde gar nicht lustig und würde nie wieder etwas bei diesem Shop kaufen.
-Die Files zu dieser Demonstration finden Sie {{ :de:modul:m307:learningunits:lu01:aufgaben:lu01_l00_e_json_demo.zip | Download der Dateien zur Demonstration}} als Download.
+Wie dem auch sei, Ihre Lehrperson hat Ihnen demonstriert, wie 2 JSON-Datensätze in der Browserkonsole ausgegeben werden.
+===== Auftrag =====
+Ihr Auftrag besteht darin den Inhalt der Datei //lernende2.json// mit 10 Datensätze in der Browser-Konsole ausgeben zu lassen.
-===== Auftrag 1 =====
+Die benötigten Dateien finden Sie in dieser {{ :de:modul:m307:learningunits:lu01:aufgaben:lu01_l00_e_json_demo.zip | Zip-Datei mit den relevanten Arbeits-Files}}.
-Ihr Auftrag besteht darin auf Basis der in der Zip-Datei bereitgestellten die bestehende HTML- und JavaScript-Datei so umzubauen, sodass die unten gezeigt neue JSON-Datei mit 20 Einträgen in der Browserkonsole angezeigt wird. Bei dieser Teilaufgabe reicht es, wenn Sie die Daten statisch auslesen. Es braucht also keine Schleife.
-**lenernede2.json**
+**Hinweis**
+Bei dieser Teilaufgabe reicht es, wenn Sie die Daten statisch auslesen. Es braucht also keine Schleife.
+**lernende2.json**
   {
     "lernende": [
-      { "name": "Anna", "nachname": "Keller", "alter": 19, "bms": true,  "hobbies": ["Lesen", "Joggen", "Kochen"] },
+      { "id": "00", "name": "Anna", "nachname": "Keller", "alter": 19, "bms": true,  "hobbies": ["Lesen", "Joggen", "Kochen"] },
-      { "name": "Luca", "nachname": "Meier", "alter": 18, "bms": false, "hobbies": ["Gaming", "Mountainbike", "Musik"] },
+      { "id": "01", "name": "Luca", "nachname": "Meier", "alter": 18, "bms": false, "hobbies": ["Gaming", "Mountainbike", "Musik"] },
-      { "name": "Sophie", "nachname": "Hofstetter", "alter": 20, "bms": true, "hobbies": ["Fotografie", "Yoga", "Reisen"] },
+      { "id": "02", "name": "Sophie", "nachname": "Hofstetter", "alter": 20, "bms": true, "hobbies": ["Fotografie", "Yoga", "Reisen"] },
-      { "name": "Tim", "nachname": "Schwarz", "alter": 17, "bms": false, "hobbies": ["Fussball", "Schach", "Filme"] },
+      { "id": "03", "name": "Tim", "nachname": "Schwarz", "alter": 17, "bms": false, "hobbies": ["Fussball", "Schach", "Filme"] },
-      { "name": "Mia", "nachname": "Brunner", "alter": 18, "bms": true, "hobbies": ["Zeichnen", "Gitarre", "Backen"] },
+      { "id": "04", "name": "Mia", "nachname": "Brunner", "alter": 18, "bms": true, "hobbies": ["Zeichnen", "Gitarre", "Backen"] },
-      { "name": "Jonas", "nachname": "Weber", "alter": 19, "bms": false, "hobbies": ["Schwimmen", "Fitness", "Spiele"] },
+      { "id": "05", "name": "Jonas", "nachname": "Weber", "alter": 19, "bms": false, "hobbies": ["Schwimmen", "Fitness", "Spiele"] },
-      { "name": "Julia", "nachname": "Frei", "alter": 20, "bms": true, "hobbies": ["Tanzen", "Mode", "Fotobearbeitung"] },
+      { "id": "06", "name": "Julia", "nachname": "Frei", "alter": 20, "bms": true, "hobbies": ["Tanzen", "Mode", "Fotobearbeitung"] },
-      { "name": "Noah", "nachname": "Kunz", "alter": 18, "bms": false, "hobbies": ["E-Sport", "Klettern", "Trompete"] },
+      { "id": "07", "name": "Noah", "nachname": "Kunz", "alter": 18, "bms": false, "hobbies": ["E-Sport", "Klettern", "Trompete"] },
-      { "name": "Emily", "nachname": "Gruber", "alter": 19, "bms": false, "hobbies": ["Lesen", "Kunst", "Volleyball"] },
+      { "id": "08", "name": "Emily", "nachname": "Gruber", "alter": 19, "bms": false, "hobbies": ["Lesen", "Kunst", "Volleyball"] },
-      { "name": "Nico", "nachname": "Hug", "alter": 21, "bms": true, "hobbies": ["Laufen", "Gaming", "Kochen"] },
+      { "id": "09", "name": "Nico", "nachname": "Hug", "alter": 21, "bms": true, "hobbies": ["Laufen", "Gaming", "Kochen"] },
-      { "name": "Leonie", "nachname": "Seiler", "alter": 18, "bms": false, "hobbies": ["Ballett", "Schreiben", "Reisen"] },
+      { "id": "10", "name": "Leonie", "nachname": "Seiler", "alter": 18, "bms": false, "hobbies": ["Ballett", "Schreiben", "Reisen"] },
-      { "name": "David", "nachname": "Bachmann", "alter": 22, "bms": true, "hobbies": ["Kraftsport", "Wandern", "Barbecue"] },
+      { "id": "11", "name": "David", "nachname": "Bachmann", "alter": 22, "bms": true, "hobbies": ["Kraftsport", "Wandern", "Barbecue"] }
-      { "name": "Laura", "nachname": "Zingg", "alter": 17, "bms": false, "hobbies": ["Serien", "Basteln", "Skifahren"] },
-      { "name": "Elias", "nachname": "Arnold", "alter": 19, "bms": true, "hobbies": ["Musik", "Nintendo", "Velo"] },
-      { "name": "Sarah", "nachname": "Fischer", "alter": 20, "bms": false, "hobbies": ["Fotografie", "Reiten", "Sprachen"] },
-      { "name": "Jan", "nachname": "Hess", "alter": 18, "bms": true, "hobbies": ["Fussball", "Tech", "Motorrad"] },
-      { "name": "Marie", "nachname": "Ammann", "alter": 19, "bms": false, "hobbies": ["K-Pop", "Zeichnen", "Kochen"] },
-      { "name": "Finn", "nachname": "Roth", "alter": 18, "bms": true, "hobbies": ["Schwimmen", "Skaten", "Gamen"] },
-      { "name": "Zoe", "nachname": "Marti", "alter": 17, "bms": false, "hobbies": ["Tanzen", "Make-up", "Reisen"] },
-      { "name": "Samuel", "nachname": "Ingold", "alter": 21, "bms": true, "hobbies": ["Basketball", "Filme", "Coding"] }
     ]
   }
-===== Auftrag 2 =====
-Versuchen Sie nun die //lernenden2.json//-Datei dynamisch, d.h. unter Verwendung von Schleifen auszulesen.
 ===== Lösungen =====
 [[de:modul:m307:learningunits:lu01:Lösungen:04|LU01.L04]]