Start learning free

LESSON 29 OF 173 · BACKEND: YOUR FIRST API

Search by Name in TypeScript

Practice

A search box sends what the user typed as a query parameter, often named q (for query): /products?q=no. The shop answers the products whose name contains that text, anywhere in the name.

In TypeScript, includes checks whether one string is part of another. It is case-sensitive, so a capital letter doesn't match a small one. Turn both sides to lowercase with .toLowerCase() and the case stops mattering:

const city: string = "Paris";
console.log(city.includes("ar"));   // true
console.log(city.includes("PA"));   // false: "PA" is not "Pa"
console.log(city.toLowerCase().includes("PA".toLowerCase()));   // true: "pa" is in "paris"

A query string can also send a list, like ?q=no&q=pen, so TypeScript doesn't know that req.query.q is text. Read it with as string | undefined at the end: you treat it as one text, or nothing. Once you know it isn't undefined, you can call toLowerCase() on it.

The search is a third optional filter in GET /products, next to max_price and category. A product is added only when it passes all three, and sort still orders what is left. Finding nothing is not an error: the answer is an empty list. The lists below show product names only.

GET /products?q=no  →  200  [Notebook]
GET /products?q=NO  →  200  [Notebook]
GET /products?q=m  →  200  [Mug, Lamp]
GET /products?q=e&sort=price  →  200  [Pen, Notebook]
GET /products?q=p&category=office  →  200  [Pen]
GET /products?q=chair  →  200  []
GET /products  →  200  [Mug, Notebook, Lamp, Pen]

Your task: in GET /products, read q and keep only the products whose name contains it, ignoring case.


Assignment
Follow the Coding Tutorial to add a search filter to GET /products.


Hint
Read q with as string | undefined at the end. Put the new if inside the category check and move result.push(product) inside it. When q is undefined, the check must let every product through.


STEP 1 OF 3
    Ctrl + Enter to check

    Shop Search in TypeScript

    Keep going with TypeScript1,600+ step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free