JavaScript · API · Beginner

Query Parameters

5 tasks

Filter, search, sort, and paginate API results using query parameters with URLSearchParams.

Quick topic start and explanations before exercises (exercises below):

Filtering and sorting with URLSearchParams

#
/api/products/ accepts query parameters to filter and sort results. The cleanest way to build them in JavaScript is `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 ``` You can pass the params object directly to `fetch` by appending it to the URL string. `URLSearchParams` converts to the correct query string automatically with `.toString()` (which template literals call implicitly). Available parameters for `/api/products/`: ``` category Filter by category slug, e.g. "bedroom", "kitchen" ordering Sort by field: "price" (asc), "-price" (desc), "name", "-name" search Full-text search across name and description page Page number (default 1) page_size Results per page (default 20, max 100) ``` Real category slugs: ``` kitchen dining-room bedroom living-room office bathroom kids-room outdoor decor hardware storage lighting ``` Examples: ```javascript // Cheapest bedroom products first new URLSearchParams({ category: 'bedroom', ordering: 'price' }) // Search for "oak" products, 20 per page new URLSearchParams({ search: 'oak', page_size: 20 }) // Most expensive products new URLSearchParams({ ordering: '-price' }) ```

Filter, sort, and search — patterns

#
Filtering by category: ```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(`Found ${bedProducts.length} bedroom products`); ``` Sorting — cheapest first: ```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); ``` Searching: ```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}" matched ${data.count} products`); return data.results; } searchProducts('oak'); ``` Combining multiple parameters: ```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)); ```

Query parameter reference

#
**Building the URL** ```javascript // Object shorthand const params = new URLSearchParams({ category: 'bedroom', ordering: 'price' }); const url = `${BASE_URL}/api/products/?${params}`; // Append one at a time const params = new URLSearchParams(); params.append('category', 'bedroom'); params.append('ordering', 'price'); ``` **/api/products/ parameters** ``` category string Filter by category slug (see list below) ordering string "price" | "-price" | "name" | "-name" search string Full-text search page number Page number (default 1) page_size number Results per page (default 20, max 100) ``` **Available category slugs** ``` kitchen bedroom living-room dining-room office bathroom kids-room outdoor decor hardware storage lighting ``` **Paginated response shape** ```javascript { count: 35, // total results matching this filter next: "...?page=2", // URL for next page or null previous: null, // URL for previous page or null results: [...] // array of products for this page } ``` **Combine category + ordering + search** ```javascript const params = new URLSearchParams({ category: 'bedroom', ordering: '-price', search: 'oak', }); ```

Exercises:

01

Filter by category

#

Fetch all products in the "bedroom" category using `URLSearchParams`. Print the count of results and the name of the first product.

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

async function main() {
  // Use URLSearchParams to filter by category='bedroom'
  // print count and first product name
}

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

Sort by price

#

Fetch the 5 cheapest products using `ordering=price` and `page_size=5`. Print each product's name and price.

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

async function main() {
  // ordering=price, page_size=5
  // print name and price for each
}

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

Search products

#

Search for products matching "oak" using the `search` parameter. Print how many total results were found and list the names.

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

async function main() {
  // search=oak, print count and each name
}

main();
Solution 
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} results`);
  for (const p of data.results) {
    console.log(p.name);
  }
}

main();
04

Combine category and ordering

#

Fetch the most expensive "dining-room" products — combine `category=dining-room` and `ordering=-price`. Print the name and price of each result on the first page.

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

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

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

Reusable getProducts() function

#

Write a `getProducts(params = {})` function that accepts an object of query parameters and returns the `results` array. Call it three ways: no params, with `category`, and with `search` + `ordering`.

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

async function getProducts(params = {}) {
  // build URL from params, return results array
}

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