JSON request and response patterns in Express - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to parse JSON data from a POST request in Express.

Express

app.use(express.[1]());

Drag options to blanks, or click blank then click option'

Ajson

Burlencoded

Cstatic

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using express.urlencoded() instead of express.json() for JSON data

Forgetting to use any body parser middleware

Express uses express.json() middleware to parse incoming JSON request bodies.

2fill in blank

medium

Complete the code to send a JSON response with a message.

Express

res.[1]({ message: 'Hello, world!' });

Drag options to blanks, or click blank then click option'

Aredirect

BsendFile

Crender

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Using res.send() without JSON object

Using res.render() which is for templates

Use res.json() to send a JSON response in Express.

3fill in blank

hard

Fix the error in the code to correctly access JSON data sent in the request body.

Express

const name = req.body.[1];

Drag options to blanks, or click blank then click option'

Aparams

Bquery

Cname

Dheaders

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to get data from req.params or req.query instead of req.body

Accessing a wrong property name

The JSON data sent in the request body is accessed via req.body. To get the 'name' field, use req.body.name.

4fill in blank

hard

Fill both blanks to create a POST route that receives JSON and sends a JSON response.

Express

app.[1]('/submit', (req, res) => {
  const data = req.body;
  res.[2]({ received: data });
});

Drag options to blanks, or click blank then click option'

Apost

Bget

Cjson

Dsend

Attempts:

3 left

💡 Hint

Common Mistakes

Using app.get instead of app.post for POST routes

Using res.send instead of res.json for JSON responses

Use app.post to handle POST requests and res.json to send JSON responses.

5fill in blank

hard

Fill all three blanks to parse JSON, handle a POST request, and send a JSON response with a status code.

Express

app.use(express.[1]());

app.[2]('/api/data', (req, res) => {
  const info = req.body;
  res.status([3]).json({ success: true, data: info });
});

Drag options to blanks, or click blank then click option'

Ajson

Bpost

C200

Durlencoded

Attempts:

3 left

💡 Hint

Common Mistakes

Using express.urlencoded() instead of express.json() for JSON parsing

Using app.get instead of app.post for POST routes

Not setting status code or using wrong status code

Use express.json() middleware to parse JSON, app.post to handle POST requests, and res.status(200) to send a success status code.

Practice

1. What does the express.json() middleware do in an Express app?

easy

A. It sends JSON responses to the client.

B. It parses incoming JSON request bodies automatically.

C. It logs JSON data to the console.

D. It validates JSON schema in requests.

Solution

1. Step 1: Understand middleware purpose

   The express.json() middleware is designed to parse JSON data sent in the request body.

2. Step 2: Differentiate from response methods

   Sending JSON responses is done by res.json(), not express.json().

3. Final Answer:

   It parses incoming JSON request bodies automatically. -> Option B

4. Quick Check:

   express.json() parses JSON requests [OK]

Hint: express.json() parses JSON request bodies [OK]

Common Mistakes:

• Confusing express.json() with res.json()
• Thinking it sends JSON responses
• Assuming it validates JSON schema

2. Which of the following is the correct way to send a JSON response with Express?

easy

A. res.sendJson({ message: 'Hello' })

B. res.send({ json: 'Hello' })

C. res.json({ message: 'Hello' })

D. res.jsonify({ message: 'Hello' })

Solution

1. Step 1: Identify Express response methods

   Express provides res.json() to send JSON responses with proper headers.

2. Step 2: Check method names

   Methods like sendJson or jsonify do not exist in Express.

3. Final Answer:

   res.json({ message: 'Hello' }) -> Option C

4. Quick Check:

   Use res.json() to send JSON responses [OK]

Hint: Use res.json() to send JSON responses [OK]

Common Mistakes:

• Using non-existent methods like sendJson or jsonify
• Using res.send() without JSON formatting
• Confusing method names

3. Given this Express route, what will be the JSON response when a POST request with body { "name": "Alice" } is sent?

app.use(express.json());
app.post('/greet', (req, res) => {
  const user = req.body.name;
  res.json({ greeting: `Hello, ${user}!` });
});

medium

A. Empty response

B. { "greeting": "Hello, undefined!" }

C. SyntaxError

D. { "greeting": "Hello, Alice!" }

Solution

1. Step 1: Parse JSON body with express.json()

   The middleware parses the JSON body, so req.body.name is 'Alice'.

2. Step 2: Construct JSON response

   The response sends { greeting: `Hello, Alice!` } as JSON.

3. Final Answer:

   { "greeting": "Hello, Alice!" } -> Option D

4. Quick Check:

   Parsed JSON body used in res.json() response [OK]

Hint: express.json() parses body; res.json() sends response [OK]

Common Mistakes:

• Forgetting to use express.json() middleware
• Accessing req.body before parsing
• Expecting undefined instead of 'Alice'

4. What is wrong with this Express code snippet for handling JSON requests?

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

medium

A. Missing express.json() middleware to parse JSON body.

B. Using res.json() instead of res.send().

C. Incorrect route method; should be app.get.

D. No error; code works fine.

Solution

1. Step 1: Check JSON parsing middleware

   The code accesses req.body but does not show express.json() middleware usage.

2. Step 2: Understand middleware necessity

   Without express.json(), req.body will be undefined for JSON requests.

3. Final Answer:

   Missing express.json() middleware to parse JSON body. -> Option A

4. Quick Check:

   express.json() needed to parse JSON requests [OK]

Hint: Always add express.json() to parse JSON bodies [OK]

Common Mistakes:

• Assuming req.body is parsed automatically
• Confusing res.json() with res.send()
• Using wrong HTTP method for JSON POST

5. You want to create an Express route that accepts a JSON array of numbers in the request body and responds with a JSON object containing the sum of those numbers. Which code snippet correctly implements this?

hard

A. app.post('/sum', express.json(), (req, res) => {
const numbers = req.body;
const sum = numbers.reduce((a, b) => a + b, 0);
res.json({ sum });
});

B. app.post('/sum', (req, res) => {
const numbers = JSON.parse(req.body);
const sum = numbers.reduce((a, b) => a + b, 0);
res.json({ sum });
});

C. app.post('/sum', express.urlencoded(), (req, res) => {
const numbers = req.body;
const sum = numbers.reduce((a, b) => a + b, 0);
res.json({ sum });
});

D. app.post('/sum', (req, res) => {
const numbers = req.body.numbers;
const sum = numbers.reduce((a, b) => a + b, 0);
res.send({ sum });
});

Solution

1. Step 1: Use express.json() middleware to parse JSON array

   app.post('/sum', express.json(), (req, res) => { const numbers = req.body; const sum = numbers.reduce((a, b) => a + b, 0); res.json({ sum }); }); correctly uses express.json() middleware inline to parse the JSON array in the request body.

2. Step 2: Sum array and send JSON response

   It sums the numbers with reduce and sends the result with res.json(), which sets correct headers.

3. Step 3: Identify errors in other options

   app.post('/sum', (req, res) => { const numbers = JSON.parse(req.body); const sum = numbers.reduce((a, b) => a + b, 0); res.json({ sum }); }); tries to parse req.body manually, which is already parsed by middleware. app.post('/sum', express.urlencoded(), (req, res) => { const numbers = req.body; const sum = numbers.reduce((a, b) => a + b, 0); res.json({ sum }); }); uses express.urlencoded() which is for form data, not JSON. app.post('/sum', (req, res) => { const numbers = req.body.numbers; const sum = numbers.reduce((a, b) => a + b, 0); res.send({ sum }); }); accesses req.body.numbers but expects array directly in body; also uses res.send() which may not set JSON headers properly.

4. Final Answer:

   app.post('/sum', express.json(), (req, res) => { const numbers = req.body; const sum = numbers.reduce((a, b) => a + b, 0); res.json({ sum }); }); -> Option A

5. Quick Check:

   express.json() + res.json() for JSON array sum [OK]

Hint: Use express.json() middleware and res.json() for JSON data [OK]

Common Mistakes:

• Not using express.json() to parse JSON body
• Using express.urlencoded() for JSON data
• Manually parsing req.body with JSON.parse
• Using res.send() instead of res.json() for JSON response