Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære 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

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 4. Kapitel 7

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Awesome!

Completion rate improved to 2.22

bookChallenge: Fetch and Use API Data

Stryg for at vise menuen

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

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 4. Kapitel 7
some-alt