res.json for JSON responses in Express - Mini Project: Build & Apply

Using res.json for JSON responses in Express

📖 Scenario: You are building a simple Express server that sends JSON data to clients. This is common when creating APIs that share data with web or mobile apps.

🎯 Goal: Create an Express server that responds with JSON data using res.json(). You will set up data, configure a route, send the JSON response, and complete the server setup.

📋 What You'll Learn

Create a data object with exact key-value pairs

Set up an Express app and a port variable

Create a GET route that sends the data as JSON using res.json()

Start the server listening on the specified port

💡 Why This Matters

🌍 Real World

APIs often send data as JSON to web or mobile apps. Using res.json() in Express is a simple way to send this data.

💼 Career

Backend developers use Express and res.json() to build APIs that communicate data efficiently and clearly.

1

DATA SETUP: Create the data object

Create a constant called userData with this exact object: { name: "Alice", age: 30, city: "Wonderland" }

Express

// Create the userData object with name, age, and city
// Your code here

Hint

Use const to create an object with the keys name, age, and city.

2

CONFIGURATION: Set up Express app and port

Write these two lines: const express = require('express'); and const app = express(); Then create a constant port set to 3000

Express

const userData = { name: "Alice", age: 30, city: "Wonderland" };
// Set up Express and port
// Your code here

Hint

Use require('express') to import Express, then create the app and port variables.

3

CORE LOGIC: Create GET route sending JSON response

Use app.get with path "/user" and a callback with parameters req and res. Inside, send userData as JSON using res.json(userData).

Express

const userData = { name: "Alice", age: 30, city: "Wonderland" };
const express = require('express');
const app = express();
const port = 3000;

// Create GET route for /user that sends userData as JSON
// Your code here

Hint

Use app.get with the path "/user" and send the userData object as JSON with res.json().

4

COMPLETION: Start the server listening on the port

Add app.listen(port, () => { console.log(`Server running on port ${port}`); }); to start the server.

Express

const userData = { name: "Alice", age: 30, city: "Wonderland" };
const express = require('express');
const app = express();
const port = 3000;

app.get('/user', (req, res) => {
    res.json(userData);
});

// Start the server listening on port
// Your code here

Hint

Use app.listen with the port variable and a callback that logs the server start message.

Practice

1. What does res.json() do in an Express app?

easy

A. Parses JSON data from a file

B. Reads JSON data from the client request

C. Sends a JSON response to the client with proper headers

D. Logs JSON data to the server console

Solution

1. Step 1: Understand the purpose of res.json()

   This method is used to send JSON data back to the client in an HTTP response.

2. Step 2: Recognize header setting and formatting

   It automatically sets the Content-Type header to 'application/json' and converts the JavaScript object to JSON format.

3. Final Answer:

   Sends a JSON response to the client with proper headers -> Option C

4. Quick Check:

   res.json() sends JSON response [OK]

Hint: Remember: res.json sends data, not reads it [OK]

Common Mistakes:

• Confusing res.json with reading client data
• Thinking it logs data instead of sending
• Assuming it parses files automatically

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

easy

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

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

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

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

Solution

1. Step 1: Identify the correct method name

   The Express method to send JSON is res.json(), not res.sendJson() or res.jsonify().

2. Step 2: Check the argument format

   The argument should be a JavaScript object, like { message: 'Hello' }.

3. Final Answer:

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

4. Quick Check:

   Correct method is res.json() [OK]

Hint: Use res.json() exactly, no extra letters [OK]

Common Mistakes:

• Using res.sendJson or res.jsonify which don't exist
• Passing string instead of object
• Mixing res.send with JSON method

3. What will the client receive when this Express route runs?

app.get('/data', (req, res) => {
  res.json({ success: true, count: 5 });
});

medium

A. success: true, count: 5

B. ["success", true, "count", 5]

C. An error because res.json needs a string

D. {"success":true,"count":5}

Solution

1. Step 1: Understand what res.json sends

   It converts the JavaScript object into a JSON string with keys and values properly quoted.

2. Step 2: Check the exact JSON format

   The object { success: true, count: 5 } becomes the JSON string '{"success":true,"count":5}'.

3. Final Answer:

   {"success":true,"count":5} -> Option D

4. Quick Check:

   res.json sends JSON string [OK]

Hint: res.json sends JSON string with quotes around keys [OK]

Common Mistakes:

• Thinking it sends array format
• Assuming it sends plain text without quotes
• Believing res.json requires string input

4. Identify the error in this Express code snippet:

app.get('/info', (req, res) => {
  res.json = { name: 'Alice' };
});

medium

A. Missing parentheses after res.json()

B. res.json is assigned an object instead of called as a function

C. res.json cannot send objects, only strings

D. Route path should be '/info/' with trailing slash

Solution

1. Step 1: Check how res.json is used

   The code assigns an object to res.json instead of calling it as a function.

2. Step 2: Understand correct usage

   res.json is a method and should be called like res.json({ name: 'Alice' });

3. Final Answer:

   res.json is assigned an object instead of called as a function -> Option B

4. Quick Check:

   res.json must be called, not assigned [OK]

Hint: res.json is a function, always call it with () [OK]

Common Mistakes:

• Assigning to res.json instead of calling it
• Forgetting parentheses after res.json
• Thinking res.json only accepts strings

5. You want to send a JSON response with a list of users but only include users with active status true. Which code correctly uses res.json to do this?

const users = [
  { id: 1, active: true },
  { id: 2, active: false },
  { id: 3, active: true }
];

app.get('/active-users', (req, res) => {
  // Fill in here
});

hard

A. res.json(users.filter(user => user.active));

B. res.json(users.map(user => user.active));

C. res.json(users);

D. res.json(users.filter(user => user.id));

Solution

1. Step 1: Filter users by active status

   Use users.filter(user => user.active) to get only users where active is true.

2. Step 2: Send filtered list as JSON response

   Pass the filtered array to res.json() to send it properly formatted.

3. Final Answer:

   res.json(users.filter(user => user.active)); -> Option A

4. Quick Check:

   Filter active users, then send JSON [OK]

Hint: Filter first, then send with res.json() [OK]

Common Mistakes:

• Using map instead of filter, sending booleans only
• Sending full users list without filtering
• Filtering by id instead of active status