Fetch API - Daten werden nicht gefunden

Stef

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);

});

Alles anzeigen

Schöne Grüße,
Stef

Sempervivum

Auf dem Screenshot erkennt man, dass dein data ein Objekt ist, das unter dem Key persons ein Array enthält. Das bedeutet, dass Du dieses Array so ansprechen musst:

Code

const persons = data.persons;
for(let i = 0; i < persons.length; i++){
    let person = persons[i];

(ungetestet)

BTW: Für diese Aufgabe, eine Tabelle aus einem JSON zu erzeugen, läuft das Rad bereits

https://datatables.net/examples/ajax/deep.html

Stef

Hey Sempervivum,

danke dir für deine Unterstützung

Dies war die Lösung.

Danke dir für den Link zu Datatables

Schöne Grüße,
Stef

Jetzt mitmachen!