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

Параметри запиту

5 завдань

Фільтруйте, шукайте, сортуйте та переходьте по сторінках результатів API за допомогою URLSearchParams.

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

Фільтрація та сортування за допомогою URLSearchParams

#
/api/products/ приймає параметри запиту для фільтрації та сортування результатів. Найчистіший спосіб будувати їх у JavaScript — `URLSearchParams`: ```javascript const params = new URLSearchParams({ category: 'bedroom', ordering: 'price' }); const url = `https://apilearn.tukas.dev/api/products/?${params}`; // → https://apilearn.tukas.dev/api/products/?category=bedroom&ordering=price ``` Об'єкт params можна передавати безпосередньо до `fetch`, додавши його до рядка URL. `URLSearchParams` автоматично перетворюється на правильний рядок запиту через `.toString()` (який шаблонні рядки викликають неявно). Доступні параметри для `/api/products/`: ``` category Фільтр за slug категорії, наприклад "bedroom", "kitchen" ordering Сортування за полем: "price" (за зростанням), "-price" (за спаданням), "name", "-name" search Повнотекстовий пошук по назві та опису page Номер сторінки (за замовчуванням 1) page_size Результатів на сторінку (за замовчуванням 20, максимум 100) ``` Реальні slug-и категорій: ``` kitchen dining-room bedroom living-room office bathroom kids-room outdoor decor hardware storage lighting ``` Приклади: ```javascript // Найдешевші товари категорії bedroom new URLSearchParams({ category: 'bedroom', ordering: 'price' }) // Пошук товарів "oak", 20 на сторінку new URLSearchParams({ search: 'oak', page_size: 20 }) // Найдорожчі товари new URLSearchParams({ ordering: '-price' }) ```

Фільтрація, сортування та пошук — паттерни

#
Фільтрація за категорією: ```javascript const BASE_URL = 'https://apilearn.tukas.dev'; async function getProductsByCategory(category) { const params = new URLSearchParams({ category }); const response = await fetch(`${BASE_URL}/api/products/?${params}`); const data = await response.json(); return data.results; } const bedProducts = await getProductsByCategory('bedroom'); console.log(`Знайдено ${bedProducts.length} товарів категорії bedroom`); ``` Сортування — від найдешевших: ```javascript async function getCheapestProducts(n = 5) { const params = new URLSearchParams({ ordering: 'price', page_size: n }); const response = await fetch(`${BASE_URL}/api/products/?${params}`); const data = await response.json(); for (const p of data.results) { console.log(`${p.name}: ${p.price}`); } } getCheapestProducts(5); ``` Пошук: ```javascript async function searchProducts(query) { const params = new URLSearchParams({ search: query }); const response = await fetch(`${BASE_URL}/api/products/?${params}`); const data = await response.json(); console.log(`"${query}" знайдено: ${data.count} товарів`); return data.results; } searchProducts('oak'); ``` Комбінація кількох параметрів: ```javascript const params = new URLSearchParams({ category: 'dining-room', ordering: '-price', page_size: 5, }); const response = await fetch(`${BASE_URL}/api/products/?${params}`); const data = await response.json(); console.log(data.results.map(p => p.name)); ```

Довідник параметрів запиту

#
**Побудова URL** ```javascript // Скорочений запис об'єктом const params = new URLSearchParams({ category: 'bedroom', ordering: 'price' }); const url = `${BASE_URL}/api/products/?${params}`; // Додавання по одному const params = new URLSearchParams(); params.append('category', 'bedroom'); params.append('ordering', 'price'); ``` **Параметри /api/products/** ``` category string Фільтр за slug категорії (список нижче) ordering string "price" | "-price" | "name" | "-name" search string Повнотекстовий пошук page number Номер сторінки (за замовчуванням 1) page_size number Результатів на сторінку (за замовчуванням 20, максимум 100) ``` **Доступні slug-и категорій** ``` kitchen bedroom living-room dining-room office bathroom kids-room outdoor decor hardware storage lighting ``` **Форма пагінованої відповіді** ```javascript { count: 35, // всього результатів, що відповідають фільтру next: "...?page=2", // URL наступної сторінки або null previous: null, // URL попередньої сторінки або null results: [...] // масив товарів для цієї сторінки } ``` **Комбінація category + ordering + search** ```javascript const params = new URLSearchParams({ category: 'bedroom', ordering: '-price', search: 'oak', }); ```

Вправи:

01

Фільтрація за категорією

#

Отримайте всі товари категорії "bedroom" за допомогою `URLSearchParams`. Виведіть кількість результатів та назву першого товару.

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

async function main() {
  // URLSearchParams для фільтрації category='bedroom'
  // вивести count та назву першого товару
}

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

async function main() {
  const params = new URLSearchParams({ category: 'bedroom' });
  const response = await fetch(`${BASE_URL}/api/products/?${params}`);
  const data = await response.json();
  console.log(data.count);
  console.log(data.results[0].name);
}

main();
02

Сортування за ціною

#

Отримайте 5 найдешевших товарів за допомогою `ordering=price` та `page_size=5`. Виведіть назву і ціну кожного.

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

async function main() {
  // ordering=price, page_size=5
  // вивести назву і ціну кожного
}

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

async function main() {
  const params = new URLSearchParams({ ordering: 'price', page_size: 5 });
  const response = await fetch(`${BASE_URL}/api/products/?${params}`);
  const data = await response.json();
  for (const p of data.results) {
    console.log(p.name, p.price);
  }
}

main();
03

Пошук товарів

#

Знайдіть товари за запитом "oak" за допомогою параметра `search`. Виведіть загальну кількість знайдених та назву кожного.

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

async function main() {
  // search=oak, вивести count та кожну назву
}

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

async function main() {
  const params = new URLSearchParams({ search: 'oak' });
  const response = await fetch(`${BASE_URL}/api/products/?${params}`);
  const data = await response.json();
  console.log(`${data.count} результатів`);
  for (const p of data.results) {
    console.log(p.name);
  }
}

main();
04

Комбінація категорії та сортування

#

Отримайте найдорожчі товари категорії "dining-room" — поєднайте `category=dining-room` та `ordering=-price`. Виведіть назву і ціну кожного результату на першій сторінці.

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

async function main() {
  // category=dining-room, ordering=-price
}

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

async function main() {
  const params = new URLSearchParams({ category: 'dining-room', ordering: '-price' });
  const response = await fetch(`${BASE_URL}/api/products/?${params}`);
  const data = await response.json();
  for (const p of data.results) {
    console.log(p.name, p.price);
  }
}

main();
05

Багаторазова функція getProducts()

#

Напишіть функцію `getProducts(params = {})`, яка приймає об'єкт параметрів запиту і повертає масив `results`. Викличте її трьома способами: без параметрів, з `category` і з `search` + `ordering`.

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

async function getProducts(params = {}) {
  // побудувати URL з params, повернути масив results
}

async function main() {
  const all = await getProducts();
  console.log('all:', all.length);

  const bedroom = await getProducts({ category: 'bedroom' });
  console.log('bedroom:', bedroom.length);

  const found = await getProducts({ search: 'wood', ordering: 'price' });
  console.log('wood asc:', found.length);
}

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

async function getProducts(params = {}) {
  const qs = new URLSearchParams(params);
  const response = await fetch(`${BASE_URL}/api/products/?${qs}`);
  const data = await response.json();
  return data.results;
}

async function main() {
  const all = await getProducts();
  console.log('all:', all.length);

  const bedroom = await getProducts({ category: 'bedroom' });
  console.log('bedroom:', bedroom.length);

  const found = await getProducts({ search: 'wood', ordering: 'price' });
  console.log('wood asc:', found.length);
}

main();