Dies ist eine alte Version des Dokuments!
LU01.A04 - JSON-File einlesen und im Browser ausgeben
Rahmenbedingungen
- Sozialform: Einzelarbeit
- Hilfsmittel: Openbooks
- Zeit: 35 Minuten
- Erwartetes Resultat:
- JavaScript-File, dass eine JSON-Datei einliest und ausgibt.
- HTML-File, dass das vom JS verarbeitete JSON-File im im Browser 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.
Die Files zu dieser Demonstration finden Sie Download der Dateien zur Demonstration als Download.
Auftrag 1
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
{
"lernende": [
{ "name": "Anna", "nachname": "Keller", "alter": 19, "bms": true, "hobbies": ["Lesen", "Joggen", "Kochen"] },
{ "name": "Luca", "nachname": "Meier", "alter": 18, "bms": false, "hobbies": ["Gaming", "Mountainbike", "Musik"] },
{ "name": "Sophie", "nachname": "Hofstetter", "alter": 20, "bms": true, "hobbies": ["Fotografie", "Yoga", "Reisen"] },
{ "name": "Tim", "nachname": "Schwarz", "alter": 17, "bms": false, "hobbies": ["Fussball", "Schach", "Filme"] },
{ "name": "Mia", "nachname": "Brunner", "alter": 18, "bms": true, "hobbies": ["Zeichnen", "Gitarre", "Backen"] },
{ "name": "Jonas", "nachname": "Weber", "alter": 19, "bms": false, "hobbies": ["Schwimmen", "Fitness", "Spiele"] },
{ "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"] },
{ "name": "Emily", "nachname": "Gruber", "alter": 19, "bms": false, "hobbies": ["Lesen", "Kunst", "Volleyball"] },
{ "name": "Nico", "nachname": "Hug", "alter": 21, "bms": true, "hobbies": ["Laufen", "Gaming", "Kochen"] },
{ "name": "Leonie", "nachname": "Seiler", "alter": 18, "bms": false, "hobbies": ["Ballett", "Schreiben", "Reisen"] },
{ "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.
