Вивчайте Завдання: Отримання та Використання Даних API | Асинхронний JavaScript та Інтеграція API

Завдання

Ви створюєте веб-сторінку, яка відображає список порід собак та їхню інформацію, отриману з Dog API. Коли користувач натискає кнопку "Завантажити породи", дані повинні бути отримані з API, а інформація про породи (назва, опис і тривалість життя) має відображатися на сторінці. Обробіть можливі помилки та надайте зворотний зв'язок у HTML.

Отримання даних з API: Коли натиснута кнопка "Завантажити породи"

Отримати дані з https://dogapi.dog/api/v2/breeds;
Розпарсити відповідь у форматі JSON;
Якщо дані успішно отримані, перейти до наступного кроку;
Якщо під час отримання даних виникла помилка, відобразити "Failed to load breeds. Please try again later." у елементі error-message.

index.html

index.css

index.js

Використовуйте fetch('https://dogapi.dog/api/v2/breeds') для отримання даних з https://dogapi.dog/api/v2/breeds;
Використовуйте response.json() для парсингу відповіді у форматі JSON;
Після парсингу даних у наступному блоці then викликайте функцію displayBreeds і передавайте як аргумент data.data;
У блоці catch обробляйте можливі помилки.

index.html

index.css

index.js

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 4. Розділ 7

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Awesome!

Completion rate improved to 2.22

Свайпніть щоб показати меню

Завдання

Отримання даних з API: Коли натиснута кнопка "Завантажити породи"

Отримати дані з https://dogapi.dog/api/v2/breeds;
Розпарсити відповідь у форматі JSON;
Якщо дані успішно отримані, перейти до наступного кроку;
Якщо під час отримання даних виникла помилка, відобразити "Failed to load breeds. Please try again later." у елементі error-message.

index.html

index.css

index.js

Використовуйте fetch('https://dogapi.dog/api/v2/breeds') для отримання даних з https://dogapi.dog/api/v2/breeds;
Використовуйте response.json() для парсингу відповіді у форматі JSON;
Після парсингу даних у наступному блоці then викликайте функцію displayBreeds і передавайте як аргумент data.data;
У блоці catch обробляйте можливі помилки.

index.html

index.css

index.js

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 4. Розділ 7