res.json for JSON responses in Express - Step-by-Step Execution

Concept Flow - res.json for JSON responses

Client sends HTTP request

↓

Express route handler receives request

↓

Handler prepares JavaScript object

↓

Call res.json(object)

↓

Express converts object to JSON string

↓

Express sets Content-Type: application/json

↓

Express sends JSON response to client

↓

Client receives and parses JSON

This flow shows how Express takes a JavaScript object, converts it to JSON, sets the right headers, and sends it back to the client.

Execution Sample

Express

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

This code sends a JSON response with a simple object when the '/data' route is requested.

Execution Table

Step	Action	Input/State	Output/Result
1	Client sends GET request to '/data'	Request: GET /data	Request received by Express
2	Route handler runs	No special input	Creates object { name: 'Alice', age: 30 }
3	Call res.json(info)	info = { name: 'Alice', age: 30 }	Express converts object to JSON string
4	Express sets header	Content-Type	application/json
5	Express sends response	JSON string	Client receives JSON response
6	Client parses JSON	JSON string	JavaScript object { name: 'Alice', age: 30 }
7	End	Response sent	No further action

💡 Response sent and connection closed after JSON data delivered

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
info	undefined	{ name: 'Alice', age: 30 }	{ name: 'Alice', age: 30 }	{ name: 'Alice', age: 30 }
res.headersSent	false	false	true	true

Key Moments - 3 Insights

Why do we use res.json() instead of res.send() for JSON data?

res.json() automatically converts the object to a JSON string and sets the Content-Type header to 'application/json', ensuring the client knows the response is JSON. See execution_table step 4.

What happens if you pass a non-object (like a string) to res.json()?

res.json() will convert it to a JSON string anyway, for example, a string becomes a JSON string with quotes. This is shown in execution_table step 3 where conversion happens.

Can you call res.json() multiple times in one request?

No, once the response is sent (res.headersSent becomes true), calling res.json() again will cause an error. See variable_tracker for res.headersSent change.

Visual Quiz - 3 Questions

Look at the execution_table, what is the Content-Type header set to at step 4?

A text/plain

B text/html

C application/json

D application/javascript

💡 Hint

Check the 'Action' and 'Output/Result' columns at step 4 in execution_table

At which step does Express convert the JavaScript object to a JSON string?

A Step 3

B Step 2

C Step 5

D Step 6

💡 Hint

Look at the 'Action' column describing conversion in execution_table

If you tried to call res.json() again after step 5, what would happen?

A It would send another JSON response successfully

B It would throw an error because headers are already sent

C It would overwrite the previous response

D It would silently ignore the second call

💡 Hint

Refer to variable_tracker row for res.headersSent and key_moments about multiple calls

Concept Snapshot

res.json(object) sends a JSON response.
It converts the object to a JSON string.
Sets Content-Type to application/json.
Sends the response to the client.
Use it to send data in JSON format easily.

Full Transcript

When a client sends a request to an Express server route, the route handler can prepare a JavaScript object to send back. Calling res.json(object) converts this object into a JSON string, sets the Content-Type header to 'application/json', and sends the response. The client then receives this JSON string and can parse it back into an object. This method ensures the response is correctly formatted as JSON and the client knows how to handle it. Calling res.json() more than once per request is not allowed because the response can only be sent once.

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