LU01.A04 - JSON-File einlesen und im der Browser-Konsole ausgeben

• Sozialform: Einzelarbeit
• Hilfsmittel: Openbooks
• Zeit: 20 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.

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.

Wie dem auch sei, Ihre Lehrperson hat Ihnen demonstriert, wie 2 JSON-Datensätze in der Browserkonsole ausgegeben werden.

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"] }
  ]  
}

Versuchen Sie nun die lernenden2.json-Datei dynamisch, d.h. unter Verwendung von Schleifen auszulesen.

LU01.L04

Volkan Demir