Fetch API: JSON-Daten laden und anzeigen

Dieses Beispiel zeigt den kompletten Workflow: Daten laden (simuliert mit einem Blob), JSON parsen, Fehler behandeln, als HTML rendern und live filtern. Da wir keinen Server benötigen, werden die JSON-Daten als Blob-URL bereitgestellt.

1. Daten laden mit fetch + async/await

Klicken Sie auf den Button, um den Ladevorgang zu starten. Die JSON-Daten werden per fetch() geladen, der Status wird live angezeigt:

async function ladeDaten() {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const daten = await response.json();
    return daten;
  } catch (error) {
    console.error('Fehler:', error.message);
    return null;
  }
}

2. Geladene Daten als Karten rendern

Die geladenen Objekte werden mit map() in HTML-Karten transformiert:

container.innerHTML = daten.map(obj => `
  <div class="karte">
    <h4>${obj.name}</h4>
    <p class="meta">${obj.datierung} | ${obj.kategorie}</p>
    <p>${obj.beschreibung}</p>
  </div>
`).join('');

3. Live-Suche mit filter()

Tippen Sie, um die Objekte in Echtzeit zu filtern:

suchfeld.addEventListener('input', (e) => {
  const begriff = e.target.value.toLowerCase();
  const gefiltert = alleDaten.filter(obj =>
    obj.name.toLowerCase().includes(begriff) ||
    obj.kategorie.toLowerCase().includes(begriff)
  );
  zeigeKarten(gefiltert);
});

4. Fehlerbehandlung demonstrieren

Was passiert, wenn der Ladevorgang fehlschlägt?