Node.js: Code Outside the Browser / Building a Basic Server-Side Application (Without Framework)

Parsing Variables from URLs

🎯 Goal of This Note

Use the url module to parse the query string (like ?id=0) from the request URL, and use that data to build the product detail page dynamically.

🔗 Step 1: Parsing the URL

📦 Recall the url module was imported earlier:

index.js

const url = require('url');

🔍 Logging the Raw URL and Parsed Result

console.log(req.url);
console.log(url.parse(req.url, true));

  • 🌐 req.url gives the raw path, e.g : /product?id=0

  • 🔍 Passing true as the second argument to url.parse() tells it to parse the query string into an object as well (not just leave it as raw text).

📦 What url.parse(req.url, true) Returns

The result is an object containing (among other things):

  • 🏷️ query — an object like { id: '0' } (parsed from the part after ?)

  • 🛣️ pathname — just the path portion, e.g. /product

💡 The part of the URL after ? (like id=0) is called the query string.

🧩 Step 2: Extracting query and pathname with Destructuring

  • ✨ Instead of manually accessing properties, use object destructuring:

const { query, pathname } = url.parse(req.url, true);

🔍 How This Works

  • ✨ This creates two new variables — query and pathname — automatically pulled from the matching property names in the parsed URL object.

  • 🛣️ pathname will be /product.

  • 🏷️ query will be an object like { id: '0' }.

🔄 Update the Routing

  • 🛠️ Replace the earlier req.url usage with pathname:

  • Change pathName to pathname everywhere in the code

//product page
if (pathname === '/product') {
  console.log(query); // e.g., { id: '0' }
  // ... build the product page here
}

🔍 Step 3: Finding the Correct Product

  • 📚 Since dataObject is an array of products, and each product's position in the array matches its id, you can directly access the right product like this:

const product = dataObj[query.id];

🔍 How This Works

  • 🏷️ query.id holds the ID value from the URL (e.g., '0', '1', '2', etc.).

  • 📚 This is used as an index into the dataObject array to retrieve the matching product.

  • 🥦 Example: if query.id is 2, it retrieves the third product in the array (index 2) — in this case, the broccoli.

🛠️ Step 4: Generating the Final Output

  • 🔄 Replace the /product page code with this:

} else if (pathname === '/product') {
  res.writeHead(200, { 'Content-type': 'text/html' });

  const product = dataObj[query.id];
  const output = replaceTemplate(tempProduct, product);

  res.end(output);

🔍 How This Works

  • 📄 tempProduct — the raw product detail template (loaded once at startup).

  • 📦 product — the specific product object found in Step 3.

  • 🔄 replaceTemplate() fills in all the placeholders (%PRODUCTNAME%, %IMAGE%, %PRICE%, etc.) with that product's actual data.

  • 📤 The final HTML (output) is sent back as the response, with the correct Content-Type: text/html header.

🧪 Step 5: Testing

  1. 🔄 Restart the server and reload the browser.

  2. 🖱️ Clicking a product link from the overview page (e.g., /product?id=0) now correctly displays that product's detail page. 🎉

✅ Step 6: Verifying Everything Works Dynamically

  • 🌱 Testing a non-organic product confirms the organic badge correctly appears/disappears based on the JSON data — exactly as intended.

  • 📄✨ All content on both the overview and product pages is now fully dynamic, driven entirely by the data.json file.

🎉 Project Status: Complete!

At this point, the Node Farm project is functionally complete:

  • 🏠 Overview page — lists all products dynamically from JSON.

  • 📦 Product detail page — shows individual product data based on the URL's id query parameter.

  • 🌐 API route (/api) — returns raw JSON data.

  • ❌ 404 handling — for undefined routes.

💡 Note: Much of the more "confusing" logic (like destructuring, .map(), regex, template functions) is really just general JavaScript, not something unique to Node.js — reinforcing that learning Node.js also strengthens core JavaScript skills.

🎯 Key Takeaways

📌 Concept

🎯 Purpose

🔗 url.parse(req.url, true)

Parses the request URL into a structured object; true also parses the query string into an object

🏷️ query

Object containing URL query parameters (e.g., { id: '0' })

🛣️ pathname

The path portion of the URL, without the query string (e.g., /product)

🧩 Object destructuring (const { query, pathname } = ...)

Cleanly extracts specific properties into standalone variables

📦 dataObject[query.id]

Uses the ID from the URL as an array index to find the matching product

🔄 replaceTemplate(tempProduct, product)

Reuses the same function from the overview page to fill in the product detail template