🌐 fetch & API Demo

Live-Daten von jsonplaceholder.typicode.com/users – geladen per JavaScript fetch(). ✨

💡 Wie funktioniert's?

1️⃣ fetch(URL)

JavaScript sendet einen HTTP-GET Request an die API-URL und erhält eine Promise zurück.

2️⃣ .then(r => r.json())

Die Antwort wird als JSON geparst – aus Text werden echte JavaScript-Objekte.

3️⃣ DOM rendern

Die Daten werden mit createElement in den DOM eingefügt – kein Reload nötig!

4️⃣ .catch(err)

Fehlerbehandlung: Falls die API nicht erreichbar ist, wird eine Fehlermeldung angezeigt.

👥 Benutzer von der API

Die Liste wird live beim Laden der Seite von jsonplaceholder.typicode.com abgerufen:

Daten werden geladen…

📄 Quellcode-Erklärung

// 1. fetch aufrufen
fetch('https://jsonplaceholder.typicode.com/users')

  // 2. Antwort als JSON parsen
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP ' + response.status);
    }
    return response.json();
  })

  // 3. Daten in console.log prüfen & im DOM rendern
  .then(users => {
    console.log('API-Daten:', users);
    renderUsers(users);
  })

  // 4. Fehlerbehandlung
  .catch(error => {
    console.error('Fetch-Fehler:', error);
    showApiError(error.message);
  });