Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Herausforderung: Abrufen und Verwenden von API-Daten | Asynchrones JavaScript und API-Integration
Fortgeschrittene JavaScript-Beherrschung

bookHerausforderung: Abrufen und Verwenden von API-Daten

Aufgabe

Eine Webseite soll eine Liste von Hunderassen und deren Informationen anzeigen, die von der Dog API abgerufen werden. Wenn der Benutzer auf die Schaltfläche "Rassen laden" klickt, sollen die Daten von der API abgerufen und die Informationen zu den Rassen (Name, Beschreibung und Lebensspanne) auf der Webseite angezeigt werden. Mögliche Fehler sind zu behandeln und Rückmeldungen im HTML bereitzustellen.

Daten von der API abrufen: Wenn die Schaltfläche "Rassen laden" geklickt wird

  1. Daten von https://dogapi.dog/api/v2/breeds abrufen;
  2. Die JSON-Antwort parsen;
  3. Wenn die Daten erfolgreich abgerufen wurden, mit dem nächsten Schritt fortfahren;
  4. Falls beim Abrufen der Daten ein Fehler auftritt, im Element "Failed to load breeds. Please try again later." die Meldung error-message anzeigen.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Verwenden von fetch('https://dogapi.dog/api/v2/breeds') zum Abrufen der Daten von https://dogapi.dog/api/v2/breeds;
  • Verwenden von response.json() zum Parsen der JSON-Antwort;
  • Nach dem Parsen der Daten im folgenden then-Block die Funktion displayBreeds aufrufen und data.data als Argument übergeben;
  • Im catch-Block mögliche Fehler behandeln.
index.html

index.html

index.css

index.css

index.js

index.js

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 7

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you show me the HTML structure for displaying the breeds and error messages?

What should the `displayBreeds` function do with the breed data?

Do you need help writing the JavaScript to fetch and display the breeds?

Awesome!

Completion rate improved to 2.22

bookHerausforderung: Abrufen und Verwenden von API-Daten

Swipe um das Menü anzuzeigen

Aufgabe

Eine Webseite soll eine Liste von Hunderassen und deren Informationen anzeigen, die von der Dog API abgerufen werden. Wenn der Benutzer auf die Schaltfläche "Rassen laden" klickt, sollen die Daten von der API abgerufen und die Informationen zu den Rassen (Name, Beschreibung und Lebensspanne) auf der Webseite angezeigt werden. Mögliche Fehler sind zu behandeln und Rückmeldungen im HTML bereitzustellen.

Daten von der API abrufen: Wenn die Schaltfläche "Rassen laden" geklickt wird

  1. Daten von https://dogapi.dog/api/v2/breeds abrufen;
  2. Die JSON-Antwort parsen;
  3. Wenn die Daten erfolgreich abgerufen wurden, mit dem nächsten Schritt fortfahren;
  4. Falls beim Abrufen der Daten ein Fehler auftritt, im Element "Failed to load breeds. Please try again later." die Meldung error-message anzeigen.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Verwenden von fetch('https://dogapi.dog/api/v2/breeds') zum Abrufen der Daten von https://dogapi.dog/api/v2/breeds;
  • Verwenden von response.json() zum Parsen der JSON-Antwort;
  • Nach dem Parsen der Daten im folgenden then-Block die Funktion displayBreeds aufrufen und data.data als Argument übergeben;
  • Im catch-Block mögliche Fehler behandeln.
index.html

index.html

index.css

index.css

index.js

index.js

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 7
some-alt