API Data Filtering & Pagination Engine

30:00

1. Studi Kasus

Di aplikasi e-commerce modern, pencarian dan pemfilteran katalog produk dilakukan melalui API backend yang mendukung filtering dan pagination untuk menghemat penggunaan bandwidth data.

Anda diminta membuat endpoint REST API Express.js untuk:

POST /api/products/search

2. Spesifikasi Input & Output

Request Body:

{
  "query": "phone",
  "category": "ELECTRONICS",
  "page": 1,
  "limit": 2
}

Response Berhasil (HTTP 200):

{
  "data": [
    { "id": "P1", "name": "Smartphone X", "category": "ELECTRONICS", "price": 800 }
  ],
  "pagination": {
    "page": 1,
    "limit": 2,
    "totalItems": 1,
    "totalPages": 1
  }
}

3. Data Awal In-Memory

const catalog = [
  { id: "P1", name: "Smartphone X", category: "ELECTRONICS", price: 800 },
  { id: "P2", name: "Laptop Pro", category: "ELECTRONICS", price: 1500 },
  { id: "P3", name: "Wireless Headphones", category: "ELECTRONICS", price: 200 },
  { id: "P4", name: "Running Shoes", category: "FASHION", price: 120 },
  { id: "P5", name: "Denim Jacket", category: "FASHION", price: 90 }
];

4. Requirement & Aturan Validasi

  1. Validasi Parameter Pagination: page (default: 1) dan limit (default: 10). Jika page < 1 atau limit < 1HTTP 400 "Invalid pagination parameters".
  2. Filtering Kategori: Jika category diisi, filter produk yang memiliki product.category === category (exact match).
  3. Filtering Keyword Search: Jika query diisi, filter produk yang nama produknya mengandung substring query (case-insensitive search).
  4. Kalkulasi Metadata Pagination:
    • totalItems: Jumlah total produk yang lolos filter.
    • totalPages: Math.ceil(totalItems / limit) (jika totalItems 0, totalPages = 0).
    • Slice data sesuai offset (page - 1) * limit hingga page * limit.
  5. Kembalikan Response: HTTP 200 dengan objek { data: [...], pagination: { page, limit, totalItems, totalPages } }.

5. Pertanyaan Bonus Konseptual 💡

Debouncing vs Throttling pada Search Input Component Di bagian komentar kode solusi Anda, jelaskan perbedaan teknik optimization frontend:

  • Debouncing: Penundaan eksekusi hingga user berhenti mengetik selama X ms (misal 300ms).
  • Throttling: Pengaturan eksekusi fungsi maksimal 1 kali setiap X ms.
  • Kapan waktu terbaik menggunakan Debouncing vs Throttling di aplikasi Web?
solution.js
Loading...
Local Test Console