Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Challenge: Fetch and Use API Data | Asynchronous JavaScript and API Integration
Advanced JavaScript Mastery

bookChallenge: Fetch and Use API Data

Task

You are building a webpage that displays a list of dog breeds and their information fetched from the Dog API. When the user clicks the "Load Breeds" button, data should be fetched from the API, and breed information (name, description, and life span) should be displayed on the webpage. Handle any potential errors and provide feedback in the HTML.

Fetch Data from API: When the "Load Breeds" button is clicked

  1. Fetch data from https://dogapi.dog/api/v2/breeds;
  2. Parse the JSON response;
  3. If the data is successfully fetched, proceed to the next step;
  4. If an error occurs while fetching data, display "Failed to load breeds. Please try again later." in the error-message element.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Use fetch('https://dogapi.dog/api/v2/breeds') to fetch data from https://dogapi.dog/api/v2/breeds;
  • Use response.json() to parse the JSON response;
  • After parsing the data in the following then block, call the displayBreeds function and provide data.data as an argument;
  • In the catch block, handle any potential errors.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 4. Hoofdstuk 7

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Awesome!

Completion rate improved to 2.22

bookChallenge: Fetch and Use API Data

Veeg om het menu te tonen

Task

You are building a webpage that displays a list of dog breeds and their information fetched from the Dog API. When the user clicks the "Load Breeds" button, data should be fetched from the API, and breed information (name, description, and life span) should be displayed on the webpage. Handle any potential errors and provide feedback in the HTML.

Fetch Data from API: When the "Load Breeds" button is clicked

  1. Fetch data from https://dogapi.dog/api/v2/breeds;
  2. Parse the JSON response;
  3. If the data is successfully fetched, proceed to the next step;
  4. If an error occurs while fetching data, display "Failed to load breeds. Please try again later." in the error-message element.
index.html

index.html

index.css

index.css

index.js

index.js

copy
  • Use fetch('https://dogapi.dog/api/v2/breeds') to fetch data from https://dogapi.dog/api/v2/breeds;
  • Use response.json() to parse the JSON response;
  • After parsing the data in the following then block, call the displayBreeds function and provide data.data as an argument;
  • In the catch block, handle any potential errors.
index.html

index.html

index.css

index.css

index.js

index.js

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 4. Hoofdstuk 7
some-alt