====== 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. 

{{:de:modul:m307:learningunits:lu02:aufgaben:lu03_a07_1.png?400|HTML-Formular eine JSON-Personenliste}}

===== 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 {{:de:modul:m307:learningunits:lu02:aufgaben:lu02_l07.zip | 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.
  - 





===== Lösungen =====
[[de:modul:m307:learningunits:lu02:loesungen:07|LU01.L07]]

----
[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir