LU01.L05 - 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.
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 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ösungssourcecode mit einer äuseren Schleife (alle Fileeinträge)
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Lernende Konsole</title>
</head>
<body>
<script>
fetch("lernende2.json")
.then(response => response.json())
.then(data => {
for (let i = 0; i < data.lernende.length; i++) {
console.log("------- Lernende/r " + (i + 1) + " -------");
console.log("id:", data.lernende[i].id);
console.log(
"Name:",
data.lernende[i].name,
data.lernende[i].nachname
);
console.log(
"Hobbies:",
data.lernende[i].hobbies[0],
data.lernende[i].hobbies[1],
data.lernende[i].hobbies[2]
);
}
})
.catch(err => {
console.error("Fehler beim Laden:", err);
});
</script>
</body>
</html>
Lösungssourcecode mit einer äuseren (alle Sätze) und innerer Schleife (Hobbies)
<!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 => {
for (let i = 0; i < data.lernende.length; i++) {
console.log("------- Lernende/r " + (i + 1) + " -------");
console.log("id:", data.lernende[i].id);
console.log(
"Name:",
data.lernende[i].name,
data.lernende[i].nachname
);
console.log("Hobbies:");
for (let j = 0; j < data.lernende[i].hobbies.length; j++) {
console.log(" -", data.lernende[i].hobbies[j]);
}
}
})
.catch(err => {
console.error("Fehler beim Laden:", err);
});
</script>
</body>
</html>
Volkan Demir