JavaScript · API · Початковий

Категорії

5 завдань

Отримайте категорії товарів та використовуйте їх для фільтрації списку продуктів.

Короткий вступ до теми та пояснення перед вправами (вправи нижче):

Ендпоінт категорій

#
/api/categories/ повертає ту саму пагіновану форму, що й /api/products/: ```javascript const BASE_URL = 'https://apilearn.tukas.dev'; async function main() { const response = await fetch(`${BASE_URL}/api/categories/`); const data = await response.json(); // data має форму {count, next, previous, results} console.log(data.count); // 13 console.log(data.results.length); // 13 (всі вміщуються на одній сторінці) console.log(data.results[0]); // {id: 6, name: "All Products", slug: "all"} } main(); ``` Об'єкт категорії: ```javascript { id: 7, name: "Kitchen", slug: "kitchen" } ``` Доступні slug-и категорій: ``` kitchen bedroom living-room dining-room office bathroom kids-room outdoor decor hardware storage lighting ``` Використовуйте `slug` при фільтрації продуктів за категорією: ```javascript // Правильно — slug малими літерами, безпечний для URL const params = new URLSearchParams({ category: 'kitchen' }); // Неправильно — slug має збігатися точно const params = new URLSearchParams({ category: 'Kitchen' }); ``` Повний приклад — отримуємо категорії, потім фільтруємо продукти: ```javascript const BASE_URL = 'https://apilearn.tukas.dev'; async function main() { const catResponse = await fetch(`${BASE_URL}/api/categories/`); const catData = await catResponse.json(); const firstSlug = catData.results[0].slug; const params = new URLSearchParams({ category: firstSlug }); const prodResponse = await fetch(`${BASE_URL}/api/products/?${params}`); const prodData = await prodResponse.json(); console.log(`${prodData.count} товарів у "${catData.results[0].name}"`); } main(); ```

Практичні паттерни з категоріями

#
Виводимо всі назви категорій та кількість товарів у кожній: ```javascript const BASE_URL = 'https://apilearn.tukas.dev'; async function listCategoriesWithCounts() { const catResponse = await fetch(`${BASE_URL}/api/categories/`); const catData = await catResponse.json(); for (const cat of catData.results) { const params = new URLSearchParams({ category: cat.slug, page_size: 1 }); const prodResponse = await fetch(`${BASE_URL}/api/products/?${params}`); const data = await prodResponse.json(); console.log(`${cat.name}: ${data.count} товарів`); } } listCategoriesWithCounts(); ``` Знаходимо категорію за назвою та виводимо її продукти: ```javascript const BASE_URL = 'https://apilearn.tukas.dev'; async function getProductsByCategory(categoryName) { const catResponse = await fetch(`${BASE_URL}/api/categories/`); const catData = await catResponse.json(); const cat = catData.results.find( c => c.name.toLowerCase() === categoryName.toLowerCase() ); if (!cat) { console.log(`Категорія "${categoryName}" не знайдена`); return []; } const params = new URLSearchParams({ category: cat.slug }); const prodResponse = await fetch(`${BASE_URL}/api/products/?${params}`); const prodData = await prodResponse.json(); console.log(`Знайдено ${prodData.count} товарів у "${cat.name}"`); return prodData.results; } async function main() { const products = await getProductsByCategory('bedroom'); console.log(products[0].name); } main(); ``` Будуємо map slug → name для швидкого пошуку: ```javascript const BASE_URL = 'https://apilearn.tukas.dev'; async function main() { const response = await fetch(`${BASE_URL}/api/categories/`); const data = await response.json(); const categoryMap = Object.fromEntries(data.results.map(c => [c.slug, c.name])); // { kitchen: "Kitchen", bedroom: "Bedroom", ... } console.log(categoryMap['bedroom']); // "Bedroom" } main(); ```

Довідник ендпоінтів категорій

#
**Ендпоінти** ``` GET /api/categories/ Список усіх категорій (пагінований) GET /api/products/?category= Фільтр продуктів за slug категорії ``` **Об'єкт категорії** ```javascript { id: 7, name: "Kitchen", slug: "kitchen" } ``` **Форма відповіді (аналогічна /api/products/)** ```javascript { count: 13, // всього категорій next: null, // null — всі 13 вміщуються на одній сторінці previous: null, results: [...] // масив об'єктів категорій } ``` **Поширені паттерни** ```javascript // Всі категорії const response = await fetch(`${BASE_URL}/api/categories/`); const data = await response.json(); const cats = data.results; // Загальна кількість console.log(data.count); // 13 // Пошук за slug const cat = cats.find(c => c.slug === 'bedroom'); // Пошук за назвою (без урахування регістру) const cat = cats.find(c => c.name.toLowerCase() === 'bedroom'); // Продукти у категорії const params = new URLSearchParams({ category: cat.slug }); const prodResponse = await fetch(`${BASE_URL}/api/products/?${params}`); const products = await prodResponse.json(); ```

Вправи:

01

Список усіх категорій

#

Отримайте `/api/categories/` і виведіть загальну кількість категорій (`count`) та `name` кожної.

const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // fetch /api/categories/ і вивести count + назви
}

main();
Рішення 
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const response = await fetch(`${BASE_URL}/api/categories/`);
  const data = await response.json();
  console.log(data.count);
  for (const cat of data.results) {
    console.log(cat.name);
  }
}

main();
02

Знайти категорію за назвою

#

Отримайте всі категорії, потім знайдіть ту, що називається "Bedroom", за допомогою `.find()` на `data.results`. Виведіть її `id`, `name` та `slug`.

const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // знайти категорію "Bedroom" і вивести id, name, slug
}

main();
Рішення 
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const response = await fetch(`${BASE_URL}/api/categories/`);
  const data = await response.json();
  const bedroom = data.results.find(c => c.name === 'Bedroom');
  console.log(bedroom.id);
  console.log(bedroom.name);
  console.log(bedroom.slug);
}

main();
03

Товари у категорії

#

Отримайте всі категорії, візьміть першу з `results`, потім отримайте її товари за допомогою `category=<slug>`. Виведіть назву категорії та кількість товарів.

const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // 1. отримати категорії (використати data.results)
  // 2. взяти slug першої категорії для фільтрації товарів
  // 3. вивести назву категорії та кількість товарів
}

main();
Рішення 
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const catResponse = await fetch(`${BASE_URL}/api/categories/`);
  const catData = await catResponse.json();
  const first = catData.results[0];

  const params = new URLSearchParams({ category: first.slug });
  const prodResponse = await fetch(`${BASE_URL}/api/products/?${params}`);
  const prodData = await prodResponse.json();

  console.log(first.name);
  console.log(prodData.count);
}

main();
04

Кількість товарів у кожній категорії

#

Для кожної категорії з `data.results` отримайте кількість товарів і виведіть `"НазваКатегорії: N товарів"`. Використовуйте `page_size=1`, щоб не завантажувати зайві дані.

const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // для кожної категорії в data.results: fetch count і вивести "Name: N products"
}

main();
Рішення 
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const catResponse = await fetch(`${BASE_URL}/api/categories/`);
  const catData = await catResponse.json();

  for (const cat of catData.results) {
    const params = new URLSearchParams({ category: cat.slug, page_size: 1 });
    const prodResponse = await fetch(`${BASE_URL}/api/products/?${params}`);
    const data = await prodResponse.json();
    console.log(`${cat.name}: ${data.count} products`);
  }
}

main();
05

Map slug → name для категорій

#

Отримайте всі категорії та побудуйте звичайний об'єкт, що відображає кожен `slug` на його `name`. Виведіть map і знайдіть назву для slug `"bedroom"`.

const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  // побудувати { slug: name } map з data.results
  // вивести map і знайти 'bedroom'
}

main();
Рішення 
const BASE_URL = 'https://apilearn.tukas.dev';

async function main() {
  const response = await fetch(`${BASE_URL}/api/categories/`);
  const data = await response.json();
  const categoryMap = Object.fromEntries(data.results.map(c => [c.slug, c.name]));
  console.log(categoryMap);
  console.log(categoryMap['bedroom']);
}

main();