Express.js Mastery / Express: Let’s Start Building The Natours API!

Responding to URL Parameters

🎯 Goal

  • 📋 Currently, /api/v1/tours returns all tours.

  • 🔍 This lecture implements getting one tour by ID: /api/v1/tours/5.

🔹 Step 1: Understand URL Parameters (Variables in the URL)

  • Let’s create a new endpoint

app.get('/api/v1/tours/:id', (req, res) => {
  console.log(req.params);
  res.status(200).json({ status: 'success' }); // placeholder for now
});

  • The 5 in /api/v1/tours/5 is a variable part of the URL — it could be any ID.

  • To handle a variable segment, define a route parameter using a colon:

  • :id defines a parameter named id — could be named anything (:var, :x, etc.)

  • These URL variables are called parameters, and they're automatically collected into req.params.

🔹 Step 2: Inspect req.params

  • Hitting /api/v1/tours/5 logs:

{ id: '5' }

  • ➕ Multiple parameters can be defined at once:

app.get('/api/v1/tours/:id/:x/:y',

➡️ Hitting /api/v1/tours/5/23/45 gives:

{ id: '5', x: '23', y: '45' }

  • ⚠️ All defined parameters must be present in the URL, or the route won't match at all (results in an error / route not found).

🔹 Step 3: Optional Parameters

Add a ? after the parameter name to make it optional:

app.get('/api/v1/tours/:id/:x/:y?',)

  • ✅ Now y doesn't have to be included in the URL — if omitted, req.params.y will simply be undefined.

  • 💡This example is just for demonstration — the actual route only needs :id

🔹 Step 4: Find the Matching Tour Using Array.prototype.find()

app.get('/api/v1/tours/:id', (req, res) => {
  const id = req.params.id * 1; // string → number conversion trick
  const tour = tours.find((el) => el.id === id);

  res.status(200).json({
    status: 'success',
    data: {
      tour,
    },
  });
});

  • .find() is a plain JavaScript array method (not Node/Express-specific) — loops through the array and returns the first element where the callback returns true.

  • req.params.id is always a string, but tour IDs in the data are numbers — so a comparison would silently fail without conversion.

  • Trick: multiplying a numeric-looking string by 1 (req.params.id * 1) automatically converts it to a number in JavaScript.

  • The callback compares each tour's id to the parsed numeric id from the URL, and .find() returns the matching tour (or undefined if none match).

🔹 Step 5: Test It

  • ✅ /api/v1/tours/5 → returns the tour with id: 5.

  • ✅ /api/v1/tours/2 → returns the tour with id: 2.

  • ❌ /api/v1/tours/23 → returns nothing meaningful, but the server still sends a 200 OK status — which is incorrect, since no tour actually exists with that ID.

🔹 Step 6: Handle Invalid/Non-Existent IDs (404)

🅰️ Approach A: Check ID against array length first

app.get('/api/v1/tours/:id', (req, res) => {
  const id = req.params.id * 1;

  if (id > tours.length) {
    return res.status(404).json({
      status: 'fail',
      message: 'Invalid ID',
    });
  }

  const tour = tours.find((el) => el.id === id);

  res.status(200).json({
    status: 'success',
    data: { tour },
  });
});

  • return is critical here — it exits the function immediately after sending the 404 response, preventing the code from continuing on to try sending a second response.

  • status: 'fail' is used specifically for 4xx (client-side) errors, as opposed to 'success' (2xx) or 'error' (5xx).

📚 Acknowledged as a simplistic solution — this course project isn't the real production API, so this rough approach (checking against array length) is fine for now for learning purposes. A real app would need more robust ID/input validation.

🅱️ Approach B (Preferred): Check if tour itself is undefined

app.get('/api/v1/tours/:id', (req, res) => {
  const id = req.params.id * 1;
  const tour = tours.find((el) => el.id === id);

  if (!tour) {
    return res.status(404).json({
      status: 'fail',
      message: 'Invalid ID',
    });
  }

  res.status(200).json({
    status: 'success',
    data: { tour },
  });
});

  • If .find() doesn't find a match, tour is undefined — checking if (!tour) catches that case directly, arguably a cleaner approach than pre-checking against array length.

  • ✅ Both approaches produce the same result when tested.

✅ Key Takeaway

  • 🛣️ Route parameters are defined with :paramName in the URL and are automatically available on req.params.

  • ❓ Parameters can be made optional with a trailing ?.

  • 🔤 Route parameters are always strings — convert to numbers when needed (1 trick works for numeric strings).

  • 🔍 .find() is a standard JS array method, useful for locating a single matching item.

  • 🚫 Always return the correct status code — 404 (not 200) when a requested resource doesn't exist — and use return to stop further code/response execution after sending an error response.