LU02.A07 - JSON-Daten im Webformularen ausgeben
Rahmenbedingungen
- Sozialform: Einzelarbeit
- Hilfsmittel: Openbooks
- Zeit: 40 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.
- JSON-Daten können nach Vorgaben gefiltert werden.
Ausgangslage
In der Aufgabe 6 dieses Kapitels haben Sie JSON-Daten im Browserfenster dynamisch ausgeben können. Bisher war diese Ausgabe in Rohform vorhanden, d.h. mit wenig bis keiner HTML-Formatierung.
Nachfolgend sehen Sie die HTML-Ausgabe einer Personenliste, bei der die Ausgabe nach allen Namen, die den Buchstaben M enthalten, gefiltert wurde. Den Quellcode für diese kleine Applikation können Sie unten bei der Aufgabengstellung herunterladen.
Auftrag
Bei dieser Aufgabe geht es darum sich mit den verschiedenen Technologien wie HTML, CSS und JavaScript in Kombination vertraut zu machen.
Ihr Auftrag besteht aus Teilaufgaben:
- Code importieren + Inhalt testen - 10 Min.
- JSON-Daten ergänzen (mehr Datensätze) - 5 Min.
- JSON-Daten erweiteren (weitere Hobbies) - 5 Min.
- Scripte auf JSON-Erweiterungen anpassen - 10 Min.
- Neues Filterfeld anlegen - 10 Min.
Teil 1: Code importieren + Inhalt testen
- Legen Sie im VS Code einen Ordner mit dem Namen lu02_L07 an.
- Copieren Sie die den Inhalt dieses nachfolgenden komprimierten Zip-Files in diesen Ordner: data.json, script.js, styles.css und index.html.
- Führen Sie das File index.html im Browser aus bzw. lassen Sie sich die Liste im Browser-Fenster ausgeben.
- Filtern Sie die Liste nach Namen und Hobbies.
Teil 2: JSON-Daten ergänzen
- Aktuell sind 10 Datensätze im JSON-File. Legen Sie weitere mindestens 10 Datensätze (Personen an).
- Testen Sie die Änderung im Browserfenster (anzeigen + filtern).
Teil 3: JSON-Daten erweiteren
- Aktuell sind 4 Hobbies vorhanden: Lesen, Fussball, Malen, Schwimmen.
- Überschreiben Sie die einige Datensätze Ihrer Wahl mit den neuen Hobbies Gamen und Reisen.
- Hinweis: Die neuen Hobbies werden zwar angezeigt, man kann aber aktuell nicht nach diesen Filtern, weil die Filter noch nicht angepasst wurden.
Teil 4: Scripte auf JSON-Erweiterungen anpassen
- Damit wir nach den Hobbies filtern können, müssen wir uns index.html anpassen.
- Ergänzen Sie also im entsprechenden div des HTML-Formulars die Liste der Checkboxen mit den neuen Hobbies Gamen und Reisen.
- Testen Sie die Filter-Erweitung: die Filter-Liste sollte nun die zwei neuen Hobbies Gamen und Reisen enthalten.
- Testen Sie die Funktion des Filters: Die Liste sollten nun auch nach den Hobbies Gamen und Reisen gefiltert werden können.
