Hey zusammen,
ich teste gerade die Fetch API mit JavaScript aus über die ich asynchron Daten vom Server lade. Um genau zu sein eine JSON-Datei welche ich dann in einer Tabelle darstelle.
Nun ist es so, dass außerhalb der for-Schleife beim console.log die Daten aus der JSON-Datei ausgegeben werden. Beim Zweiten console.log innerhalb der for-Schleife wird kein Wert mehr in der Konsole ausgegeben, als wäre die Variable data nie vorhanden.
Ich verstehe nicht wie das sein kann. Hat jemand von euch eine Idee?
JavaScript
"use strict";
document.addEventListener("DOMContentLoaded", async(event) => {
let config = {
method: "GET",
headers: {
"Accept": "application/json"
}
};
let response = await fetch("data.json", config);
let data = await response.json();
console.log(data); // this get output in the console
let table = document.createElement("table");
for(let i = 0; i < data.length; i++){
let person = data[i];
console.log(data); // this don't get output in the console
let tr = document.createElement("tr");
tr.innerHTML = `
<td>${person.name}</td>
<td>${person.age}</td>
<td>${person.email}</td>
`;
table.appendChild(tr);
}
document.getElementById("container").appendChild(table);
});Schöne Grüße,
Stef
