Challenge: 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
- Fetch data from
https://dogapi.dog/api/v2/breeds
; - Parse the JSON response;
- If the data is successfully fetched, proceed to the next step;
- If an error occurs while fetching data, display
"Failed to load breeds. Please try again later."
in theerror-message
element.
index.html
index.css
index.js
- Use
fetch('https://dogapi.dog/api/v2/breeds')
to fetch data fromhttps://dogapi.dog/api/v2/breeds
; - Use
response.json()
to parse the JSON response; - After parsing the data in the following
then
block, call thedisplayBreeds
function and providedata.data
as an argument; - In the
catch
block, handle any potential errors.
index.html
index.css
index.js
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Awesome!
Completion rate improved to 2.22
Challenge: Fetch and Use API Data
Svep för att visa menyn
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
- Fetch data from
https://dogapi.dog/api/v2/breeds
; - Parse the JSON response;
- If the data is successfully fetched, proceed to the next step;
- If an error occurs while fetching data, display
"Failed to load breeds. Please try again later."
in theerror-message
element.
index.html
index.css
index.js
- Use
fetch('https://dogapi.dog/api/v2/breeds')
to fetch data fromhttps://dogapi.dog/api/v2/breeds
; - Use
response.json()
to parse the JSON response; - After parsing the data in the following
then
block, call thedisplayBreeds
function and providedata.data
as an argument; - In the
catch
block, handle any potential errors.
index.html
index.css
index.js
Tack för dina kommentarer!