Query string parsing in Express - Mini Project: Build & Apply

Query String Parsing with Express

📖 Scenario: You are building a simple Express server that reads user preferences sent as query strings in the URL.For example, a user might visit /settings?theme=dark&fontSize=16 to set their theme and font size.

🎯 Goal: Create an Express server that parses query strings from the URL and responds with a JSON object showing the parsed preferences.

📋 What You'll Learn

Create an Express app instance

Set up a GET route at /settings

Parse the query string parameters theme and fontSize

Respond with a JSON object containing theme and fontSize values

💡 Why This Matters

🌍 Real World

Web servers often need to read user preferences or filters from query strings to customize responses.

💼 Career

Understanding query string parsing is essential for backend developers building APIs or web applications with Express.

1

Set up Express app

Create a variable called express that requires the express module. Then create a variable called app by calling express().

Express

const express = require('express');
const app = express();
// Your code here

Hint

Use require('express') to import Express and then call it as a function to create the app.

2

Add GET route for /settings

Add a GET route handler on app for the path '/settings' using app.get('/settings', (req, res) => { }).

Express

const express = require('express');
const app = express();

app.get('/settings', (req, res) => {
  // Your code here
});

Hint

Use app.get to define a route for /settings.

3

Parse query string parameters

Inside the /settings route handler, create two variables: theme and fontSize. Assign them the values from req.query.theme and req.query.fontSize respectively.

Express

const express = require('express');
const app = express();

app.get('/settings', (req, res) => {
  // Extract theme and fontSize from query
  // Your code here
});

Hint

Access query parameters using req.query.

4

Send JSON response with parsed values

Inside the /settings route handler, send a JSON response using res.json() with an object containing theme and fontSize properties.

Express

const express = require('express');
const app = express();

app.get('/settings', (req, res) => {
  const theme = req.query.theme;
  const fontSize = req.query.fontSize;
  // Send JSON response
  // Your code here
});

Hint

Use res.json() to send a JSON response with the parsed query values.

Practice

1. In Express, which object lets you access the query parameters from a URL like /search?term=books?

easy

A. req.query

B. req.params

C. req.body

D. req.url

Solution

1. Step 1: Understand Express request objects

   Express provides different objects to access parts of the request: req.params for route params, req.body for POST data, and req.query for query strings.

2. Step 2: Identify query string access

   The query string is the part after ? in a URL. Express parses it into req.query as an object.

3. Final Answer:

   req.query -> Option A

4. Quick Check:

   Query string = req.query [OK]

Hint: Query strings are in req.query object in Express [OK]

Common Mistakes:

• Confusing req.params with req.query
• Trying to read query from req.body
• Using req.url directly without parsing

2. Which of the following is the correct way to read a query parameter named page in an Express route handler?

easy

A. const page = req.query.page;

B. const page = req.body.page;

C. const page = req.params.page;

D. const page = req.url.page;

Solution

1. Step 1: Recall query parameter access syntax

   Query parameters are accessed via req.query as key-value pairs.

2. Step 2: Match correct syntax

   To get the page parameter, use req.query.page. Other options access wrong objects.

3. Final Answer:

   const page = req.query.page; -> Option A

4. Quick Check:

   Query param 'page' = req.query.page [OK]

Hint: Use req.query.paramName to get query parameters [OK]

Common Mistakes:

• Using req.params for query parameters
• Trying to read query from req.body
• Accessing req.url.page which is undefined

3. Given this Express route handler:

app.get('/items', (req, res) => {
  const limit = Number(req.query.limit) || 10;
  res.send(`Limit is ${limit}`);
});

What will be the response if the URL is /items?limit=5?

medium

A. "Limit is 10"

B. "Limit is undefined"

C. "Limit is 5"

D. "Limit is NaN"

Solution

1. Step 1: Convert query string value to number

   The code uses Number(req.query.limit) to convert the string '5' to number 5.

2. Step 2: Use default if conversion fails

   If conversion results in 0 or NaN, it defaults to 10. Here, 5 is valid, so limit = 5.

3. Final Answer:

   "Limit is 5" -> Option C

4. Quick Check:

   Number('5') = 5, so output = "Limit is 5" [OK]

Hint: Convert query strings to number before use [OK]

Common Mistakes:

• Not converting string to number
• Assuming req.query.limit is a number
• Ignoring default fallback logic

4. Consider this Express route:

app.get('/search', (req, res) => {
  const term = req.query.term.toLowerCase();
  res.send(term);
});

What error will occur if the URL is /search (no query parameter)?

medium

A. SyntaxError: Unexpected token

B. TypeError: Cannot read property 'toLowerCase' of undefined

C. ReferenceError: term is not defined

D. No error, response is empty string

Solution

1. Step 1: Check for missing query parameter

   If term is missing, req.query.term is undefined.

2. Step 2: Calling method on undefined causes error

   Calling toLowerCase() on undefined throws a TypeError.

3. Final Answer:

   TypeError: Cannot read property 'toLowerCase' of undefined -> Option B

4. Quick Check:

   Undefined.toLowerCase() throws TypeError [OK]

Hint: Check if query param exists before using methods [OK]

Common Mistakes:

• Assuming query param always exists
• Not handling undefined values
• Expecting empty string instead of error

5. You want to handle a query parameter sort that can be either asc or desc. If missing or invalid, default to asc. Which code snippet correctly implements this in Express?

hard

A. const sort = req.query.sort === 'asc' ? 'asc' : req.query.sort === 'desc' ? 'desc' : 'desc';

B. const sort = req.query.sort || 'asc';

C. const sort = req.query.sort === 'asc' ? 'asc' : 'desc';

D. const sort = ['asc', 'desc'].includes(req.query.sort) ? req.query.sort : 'asc';

Solution

1. Step 1: Validate query parameter value

   We must check if req.query.sort is either 'asc' or 'desc'. Using includes() on an array is a clean way.

2. Step 2: Provide default if invalid or missing

   If the value is not in the allowed list, default to 'asc'. This avoids invalid values.

3. Final Answer:

   const sort = ['asc', 'desc'].includes(req.query.sort) ? req.query.sort : 'asc'; -> Option D

4. Quick Check:

   Check allowed values with includes() and default [OK]

Hint: Use includes() to validate query param values before use [OK]

Common Mistakes:

• Not validating allowed values
• Using simple || which accepts invalid strings
• Overcomplicating with nested ternaries