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();