Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Завдання: Отримання та Використання Даних API | Асинхронний JavaScript та Інтеграція API
Просунуте Володіння JavaScript

bookЗавдання: Отримання та Використання Даних API

Завдання

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

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

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

index.html

index.css

index.css

index.js

index.js

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

index.html

index.css

index.css

index.js

index.js

copy

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

Як ми можемо покращити це?

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

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

Запитати АІ

expand

Запитати АІ

ChatGPT

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

Awesome!

Completion rate improved to 2.22

bookЗавдання: Отримання та Використання Даних API

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

Завдання

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

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

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

index.html

index.css

index.css

index.js

index.js

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

index.html

index.css

index.css

index.js

index.js

copy

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

Як ми можемо покращити це?

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

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