Built-in middleware (json, urlencoded, static) in Express - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when sending JSON data with express.json() middleware?

Consider this Express server code snippet:

const express = require('express');
const app = express();
app.use(express.json());
app.post('/data', (req, res) => {
  res.json({ received: req.body });
});
// Server listens on port 3000

If a client sends a POST request to /data with JSON body {"name":"Alice"}, what will the server respond with?

Express

const express = require('express');
const app = express();
app.use(express.json());
app.post('/data', (req, res) => {
  res.json({ received: req.body });
});

A {"received":{"name":"Alice"}}

B {"received":"{\"name\":\"Alice\"}"}

C SyntaxError: Unexpected token n in JSON at position 1

D {"received":null}

💡 Hint

Think about what express.json() middleware does to the request body.

The express.json() middleware parses the incoming JSON string into a JavaScript object and assigns it to req.body. So the server responds with the parsed object inside the 'received' key.

📝 Syntax

intermediate

Which option correctly uses express.urlencoded() middleware?

You want to parse URL-encoded form data in an Express app. Which code snippet correctly sets up the middleware?

A app.use(express.urlencoded());

B app.use(express.urlencoded({ extended: 'yes' }));

C app.use(express.urlencoded({ extended: false }));

D app.use(express.urlencoded({ extended: true }));

💡 Hint

The 'extended' option must be a boolean.

express.urlencoded() requires the 'extended' option to be true or false. Option D correctly sets it to true, enabling rich objects and arrays to be encoded.

🔧 Debug

advanced

Why does static middleware not serve files as expected?

Given this Express setup:

app.use(express.static('public'));
app.get('/', (req, res) => {
  res.send('Home page');
});

The 'public' folder contains 'index.html'. When visiting '/', the browser shows 'Home page' instead of the static file. Why?

A express.static requires an absolute path, 'public' is invalid.

B The static middleware must be placed after the route handler to work.

C The static middleware only serves files for matching paths, '/' matches the route handler first.

D Static middleware only serves files with .js or .css extensions by default.

💡 Hint

Think about middleware order and route matching.

Express matches routes in order. The route handler for '/' matches the root path and sends 'Home page' before static middleware can serve 'index.html'.

❓ state_output

advanced

What is the response when sending URL-encoded data without urlencoded middleware?

Consider this Express app:

const express = require('express');
const app = express();
app.post('/submit', (req, res) => {
  res.json({ data: req.body });
});

If a client sends a POST request to /submit with Content-Type application/x-www-form-urlencoded and body name=Bob&age=30, what will the response be?

Express

const express = require('express');
const app = express();
app.post('/submit', (req, res) => {
  res.json({ data: req.body });
});

A {"data":null}

B {"data":{}}

C SyntaxError: Unexpected token n in JSON at position 1

D {"data":{"name":"Bob","age":"30"}}

💡 Hint

What happens if you don't use urlencoded middleware for form data?

Without urlencoded middleware, Express does not parse URL-encoded form data, so req.body remains an empty object.

🧠 Conceptual

expert

Which middleware order correctly serves static files and parses JSON and URL-encoded bodies?

You want to set up an Express app that:
- Serves static files from 'public'
- Parses JSON request bodies
- Parses URL-encoded form data

Which middleware order is correct to ensure all features work as expected?

A

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(express.static('public'));

B

app.use(express.static('public'));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

C

app.use(express.urlencoded({ extended: true }));
app.use(express.static('public'));
app.use(express.json());

D

app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(express.static('public'));

💡 Hint

Static files should be served after body parsing middleware to avoid conflicts.

Middleware order matters. Parsing middleware should come before static middleware to ensure request bodies are parsed for routes, while static files are served for matching paths.