LU02.A05 - JSON-File einlesen und dynamsich im der Browser-Konsole ausgeben [BZZ

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== LU02.A05 - JSON-File einlesen und dynamsich im der Browser-Konsole ausgeben ======

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

===== Ausgangslage =====
Bei der A04 haben wir statisch rund 10 Datensätze in der Browserkonsole statisch ausgeben lassen. Das hat den grossen Nachteil, dass jeder Neuzugang bei in der JSON-Datei im HTML neu programiert werden muss. Wir wollen nun unser Script dynamisch gestalten, sodass alle gespeicherten JSON-Daten, unabhängig von Ihrer Anzahl, ausgegeben werden. 

===== Auftrag =====
Ersetzen Sie im nachfolgenden Script die Einzeleinträge durch Schleifen. 

**index.html**

  <!DOCTYPE html>
  <html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Lernende Konsole</title>
  </head>
  <body>
    <script>
      fetch("lernende.json")
        .then(response => response.json())
        .then(data => {
          console.log("------- Lernende/r 1 ------- ");
          console.log("id:", data.lernende[0].id); 
          console.log("Name:", data.lernende[0].name, data.lernende[0].nachname);
          console.log("Hobbies:", data.lernende[0].hobbies[0], 
                                  data.lernende[0].hobbies[1],
                                  data.lernende[0].hobbies[2]);
          //                       
          console.log("------- Lernende/r 2 ------- ");
          console.log("id:", data.lernende[1].id); 
          console.log("Name:", data.lernende[1].name, data.lernende[1].nachname);
          console.log("Hobbies:", data.lernende[1].hobbies[0],
                                  data.lernende[1].hobbies[1],
                                  data.lernende[1].hobbies[2]);
          //
          console.log("------- Lernende/r 3 ------- ");
          console.log("id:", data.lernende[2].id);
          console.log("Name:", data.lernende[2].name, data.lernende[2].nachname);
          console.log("Hobbies:", data.lernende[2].hobbies[0],
                                  data.lernende[2].hobbies[1],
                                  data.lernende[2].hobbies[2]);
          //
          console.log("------- Lernende/r 4 ------- ");
          console.log("id:", data.lernende[3].id);
          console.log("Name:", data.lernende[3].name, data.lernende[3].nachname);
          console.log("Hobbies:", data.lernende[3].hobbies[0],
                                 data.lernende[3].hobbies[1],
                                 data.lernende[3].hobbies[2]);
          //
          console.log("------- Lernende/r 5 ------- ");
          console.log("id:", data.lernende[4].id);
          console.log("Name:", data.lernende[4].name, data.lernende[4].nachname);
          console.log("Hobbies:", data.lernende[4].hobbies[0],
                                 data.lernende[4].hobbies[1],
                                 data.lernende[4].hobbies[2]);
          //
          console.log("------- Lernende/r 6 ------- ");
          console.log("id:", data.lernende[5].id);
          console.log("Name:", data.lernende[5].name, data.lernende[5].nachname);
          console.log("Hobbies:", data.lernende[5].hobbies[0],
                                 data.lernende[5].hobbies[1],
                                 data.lernende[5].hobbies[2]);
          //
          console.log("------- Lernende/r 7 ------- ");
          console.log("id:", data.lernende[6].id);
          console.log("Name:", data.lernende[6].name, data.lernende[6].nachname);
          console.log("Hobbies:", data.lernende[6].hobbies[0],
                                  data.lernende[6].hobbies[1],
                                 data.lernende[6].hobbies[2]);
          //
          console.log("------- Lernende/r 8 ------- ");
          console.log("id:", data.lernende[7].id);
          console.log("Name:", data.lernende[7].name, data.lernende[7].nachname);
          console.log("Hobbies:", data.lernende[7].hobbies[0],
                                 data.lernende[7].hobbies[1],
                                 data.lernende[7].hobbies[2]);
          //
          console.log("------- Lernende/r 9 ------- ");
          console.log("id:", data.lernende[8].id);
          console.log("Name:", data.lernende[8].name, data.lernende[8].nachname);
          console.log("Hobbies:", data.lernende[8].hobbies[0],
                                 data.lernende[8].hobbies[1],
                                 data.lernende[8].hobbies[2]);
          //
          console.log("------- Lernende/r 10 ------- ");
          console.log("id:", data.lernende[9].id);
          console.log("Name:", data.lernende[9].name, data.lernende[9].nachname);
          console.log("Hobbies:", data.lernende[9].hobbies[0],
                                 data.lernende[9].hobbies[1],
                                 data.lernende[9].hobbies[2]);
          //
          console.log("------- Lernende/r 11 ------- ");
          console.log("id:", data.lernende[10].id);
          console.log("Name:", data.lernende[10].name, data.lernende[10].nachname);
          console.log("Hobbies:", data.lernende[10].hobbies[0],
                                 data.lernende[10].hobbies[1],
                                 data.lernende[10].hobbies[2]);
          //
          console.log("------- Lernende/r 12 ------- ");
          console.log("id:", data.lernende[11].id);
          console.log("Name:", data.lernende[11].name, data.lernende[11].nachname);
          console.log("Hobbies:", data.lernende[11].hobbies[0],
                                 data.lernende[11].hobbies[1],
                                 data.lernende[11].hobbies[2]);
          //
        })
        .catch(err => {
          console.error("Fehler beim Laden:", err);
        });
     </script>
  </body>
  </html>







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

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