Stop 10 · API IntegrationTopics · 5/16

Filtering

In short

Flipkart without filters would be a nightmare. Filtering lets users narrow a huge list to just what they care about, and it's mostly about building the right query string.

Letting users narrow down a data set by passing filter parameters to an API, or filtering client-side for smaller data sets.

The jaadu points at red tomatoes on a vegetable cart while the vendor picks only those.

Think of it like this

Telling the sabziwala what you want

You don't ask to see every vegetable in the mandi. You say 'only tomatoes, only the red ones, under 40 rupees a kilo'. Each condition is a filter, and the seller only shows you what matches.

Watch it happen

maxPrice=2000 on six shoes

₹899

₹2499

₹1299

₹3999

₹1799

₹599

1/3Six shoes come back from /products?category=shoes. No price filter yet.

The big ideas

What you need to know

Filters are query params

Something like /products?category=shoes&maxPrice=2000 sends your filters to the server.

Server or client?

Small list already loaded? Filter in the browser. Big list? Send filters to the API.

Reset to page 1

When a filter changes, the old page number may not exist any more. Always go back to page 1.

Keep filters in the URL

Then users can share the link, refresh, or hit Back and still see the same results.

See it in code

Walk through the code

1type Filters = { category?: string; maxPrice?: number; inStock?: boolean };2 3function buildQuery(filters: Filters) {4  const params = new URLSearchParams();5  if (filters.category) params.set("category", filters.category);6  if (filters.maxPrice) params.set("maxPrice", String(filters.maxPrice));7  if (filters.inStock) params.set("inStock", "true");8  return params.toString();9}10 11buildQuery({ category: "shoes", maxPrice: 2000 });12// "category=shoes&maxPrice=2000"

1/4Every filter is optional, so the type marks each field with a question mark.

URLSearchParams handles the & signs and encoding for you. Empty filters are skipped, so the URL stays clean.

Save yourself the pain

Common mistakes

Oops

Building query strings by gluing strings together with + and &.

Do this instead

Use URLSearchParams. It encodes spaces and special characters like & correctly.

Oops

Changing a filter but staying on page 5.

Do this instead

Reset the page to 1 whenever any filter changes.

Your mission

Filter the products

~30 min

Quick check

A user on page 6 picks a new category filter. What should your app do?

Go deeper

1Add filter controls (dropdowns/checkboxes) that update your API query params.
2Debounce filter changes if they trigger an API call on every interaction.
3Sync active filters to the URL so a filtered view is shareable.