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

Пагінація

5 завдань

Переходьте по сторінках відповідей API для збору всіх результатів.

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

Як працює пагінація

#
API повертає результати по 20 за замовчуванням. Відповідь включає `next` — повний URL наступної сторінки або `null`, якщо ви на останній: ```javascript { count: 372, next: "https://apilearn.tukas.dev/api/products/?page=2", previous: null, results: [ /* 20 товарів */ ] } ``` Щоб отримати всі товари, продовжуйте переходити по `next`, поки він не стане `null`: ```javascript const BASE_URL = 'https://apilearn.tukas.dev'; async function getAllProducts() { let url = `${BASE_URL}/api/products/`; const all = []; while (url) { const response = await fetch(url); const data = await response.json(); all.push(...data.results); url = data.next; // null на останній сторінці → цикл завершується } return all; } ``` `...data.results` розподіляє елементи сторінки у масив `all`. `url = data.next` переходить до наступної сторінки. Коли `data.next` стає `null`, умова while хибна і цикл завершується. Можна також запросити більше результатів за сторінку через `page_size`: ```javascript // 50 на сторінку замість 20 — менше запитів потрібно const params = new URLSearchParams({ page_size: 50 }); const response = await fetch(`${BASE_URL}/api/products/?${params}`); ``` Максимальне значення `page_size` — 100.

Паттерни пагінації

#
Збираємо всі продукти з усіх сторінок: ```javascript const BASE_URL = 'https://apilearn.tukas.dev'; async function getAllProducts() { let url = `${BASE_URL}/api/products/?page_size=100`; const all = []; while (url) { const response = await fetch(url); const data = await response.json(); all.push(...data.results); url = data.next; } console.log(`Завантажено ${all.length} товарів`); return all; } getAllProducts(); ``` Пагінація з колбеком — обробляємо кожну сторінку по мірі надходження: ```javascript const BASE_URL = 'https://apilearn.tukas.dev'; async function eachPage(baseUrl, callback) { let url = baseUrl; while (url) { const response = await fetch(url); const data = await response.json(); await callback(data.results, data.count); url = data.next; } } async function main() { await eachPage(`${BASE_URL}/api/products/`, (products, total) => { console.log(`Сторінка: ${products.length} / всього ${total}`); }); } main(); ``` Зупиняємось достроково, знайшовши потрібне: ```javascript const BASE_URL = 'https://apilearn.tukas.dev'; async function findProduct(name) { let url = `${BASE_URL}/api/products/`; while (url) { const response = await fetch(url); const data = await response.json(); const found = data.results.find(p => p.name === name); if (found) return found; url = data.next; } return null; } async function main() { const product = await findProduct('Tea Table Set with Three Chairs'); console.log(product ? product.price : 'не знайдено'); } main(); ```

Довідник пагінації

#
**Форма пагінованої відповіді** ```javascript { count: 372, // всього елементів на всіх сторінках next: "...?page=2" | null, previous: "...?page=1" | null, results: [...] // елементи поточної сторінки } ``` **Параметри** ``` page Номер сторінки (за замовчуванням 1) page_size Елементів на сторінку (за замовчуванням 20, максимум 100) ``` **Паттерн збору всіх сторінок** ```javascript async function collectAll(startUrl) { const all = []; let url = startUrl; while (url) { const response = await fetch(url); const data = await response.json(); all.push(...data.results); url = data.next; } return all; } ``` **Зменшення кількості запитів через page_size** ```javascript // 372 товари по 20 за запит = 19 запитів // 372 товари по 100 за запит = 4 запити new URLSearchParams({ page_size: 100 }) ``` **Перевірка наявності наступних сторінок** ```javascript if (data.next) { /* є ще сторінки */ } if (!data.next) { /* остання сторінка */ } ```

Вправи:

01

Отримати 2-у сторінку

#

Отримайте 2-у сторінку `/api/products/` за допомогою параметра `page`. Виведіть кількість результатів на цій сторінці та назву першого товару.

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

async function main() {
  // fetch 2-ї сторінки і вивести results.length + назву першого товару
}

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

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

main();
02

Слідувати по next для збору всіх сторінок

#

Напишіть цикл, що переходить по `data.next`, поки він не стане `null`. Підрахуйте загальну кількість товарів на всіх сторінках і виведіть результат.

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

async function main() {
  let url = `${BASE_URL}/api/products/`;
  let total = 0;

  // цикл: fetch url, додати до total, url = data.next
}

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

async function main() {
  let url = `${BASE_URL}/api/products/`;
  let total = 0;

  while (url) {
    const response = await fetch(url);
    const data = await response.json();
    total += data.results.length;
    url = data.next;
  }

  console.log(total);
}

main();
03

Зібрати всі товари у масив

#

Напишіть функцію `getAllProducts()`, яка пагінує всі сторінки з `page_size=100` і повертає плоский масив усіх товарів. Виведіть загальну довжину.

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

async function getAllProducts() {
  // пагінація з page_size=100, повернути плоский масив
}

async function main() {
  const all = await getAllProducts();
  console.log(all.length);
}

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

async function getAllProducts() {
  let url = `${BASE_URL}/api/products/?page_size=100`;
  const all = [];

  while (url) {
    const response = await fetch(url);
    const data = await response.json();
    all.push(...data.results);
    url = data.next;
  }

  return all;
}

async function main() {
  const all = await getAllProducts();
  console.log(all.length);
}

main();
04

Знайти найдорожчий товар

#

Завантажте всі товари (пагінуйте всі сторінки), потім знайдіть той з найвищою ціною. Виведіть його назву та ціну.

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

async function main() {
  // зібрати всі товари по сторінках
  // знайти найдорожчий
}

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

async function main() {
  let url = `${BASE_URL}/api/products/?page_size=100`;
  const all = [];

  while (url) {
    const response = await fetch(url);
    const data = await response.json();
    all.push(...data.results);
    url = data.next;
  }

  const mostExpensive = all.reduce((max, p) =>
    parseFloat(p.price) > parseFloat(max.price) ? p : max
  );
  console.log(mostExpensive.name, mostExpensive.price);
}

main();
05

Підрахунок товарів на кожній сторінці

#

Отримайте всі сторінки `/api/products/` з розміром сторінки за замовчуванням. Для кожної виведіть `"Сторінка N: X товарів"`. Наприкінці виведіть загальну суму.

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

async function main() {
  let url = `${BASE_URL}/api/products/`;
  let page = 1;
  let total = 0;

  // перебирати сторінки і виводити інформацію
}

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

async function main() {
  let url = `${BASE_URL}/api/products/`;
  let page = 1;
  let total = 0;

  while (url) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(`Page ${page}: ${data.results.length} products`);
    total += data.results.length;
    url = data.next;
    page++;
  }

  console.log(`Total: ${total} products across ${page - 1} pages`);
}

main();