Dies ist eine alte Version des Dokuments!
LU01.A04 - 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.
Hinweis Bei dieser Teilaufgabe reicht es, wenn Sie die Daten statisch auslesen. Es braucht also keine Schleife.
index.html
Lösungen des HTML/JS-Sourcecodes
<!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>
