JSON request and response patterns in Express - Step-by-Step Execution

Concept Flow - JSON request and response patterns

Client sends JSON request

↓

Express server receives request

↓

Parse JSON body middleware

↓

Route handler processes data

↓

Create JSON response object

↓

Send JSON response to client

↓

Client receives JSON

This flow shows how an Express server receives a JSON request, processes it, and sends back a JSON response.

Execution Sample

Express

app.use(express.json());

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

This code receives a JSON request with a name, then responds with a JSON greeting.

Execution Table

Step	Action	Input/State	Output/State Change
1	Client sends POST /data with JSON body {"name":"Alice"}	Request body: {"name":"Alice"}	Request received by server
2	express.json() middleware parses JSON	Raw request body	req.body = { name: "Alice" }
3	Route handler reads req.body.name	req.body = { name: "Alice" }	name = "Alice"
4	Route handler creates response JSON	name = "Alice"	Response body = { greeting: "Hello, Alice!" }
5	Server sends JSON response	Response body	Client receives JSON { greeting: "Hello, Alice!" }
6	Execution ends	Response sent	Connection handled successfully

💡 Request handled and response sent, no further action

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
req.body	undefined	{"name":"Alice"}	{"name":"Alice"}	{"name":"Alice"}	{"name":"Alice"}
name	undefined	undefined	"Alice"	"Alice"	"Alice"
response JSON	undefined	undefined	undefined	{"greeting":"Hello, Alice!"}	{"greeting":"Hello, Alice!"}

Key Moments - 2 Insights

Why do we need express.json() middleware before accessing req.body?

Because without express.json(), req.body is undefined. The middleware parses the raw JSON string into a JavaScript object, as shown in step 2 of the execution_table.

What happens if the client sends invalid JSON?

express.json() middleware will return an error and the route handler won't run. This prevents the server from crashing and ensures only valid JSON is processed.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what is the value of 'name'?

A undefined

B "Alice"

C null

D "name"

💡 Hint

Check the 'Input/State' and 'Output/State Change' columns at step 3 in execution_table

At which step does req.body get its parsed JSON object?

A Step 2

B Step 4

C Step 1

D Step 5

💡 Hint

Look for when express.json() middleware runs in execution_table

If the client sends {"name":"Bob"} instead, what changes in variable_tracker?

A Only name changes to Bob

B No changes, still Alice

C req.body and name change to Bob

D response JSON becomes empty

💡 Hint

See how req.body and name are assigned in variable_tracker after Step 3

Concept Snapshot

Express JSON request and response pattern:
- Use app.use(express.json()) to parse JSON body
- Access data via req.body in route handlers
- Send JSON response with res.json({key: value})
- Handles JSON automatically both ways
- Ensures client-server data exchange in JSON format

Full Transcript

This visual execution shows how an Express server handles JSON requests and responses. First, the client sends a POST request with a JSON body containing a name. The express.json() middleware parses this raw JSON string into a JavaScript object and assigns it to req.body. The route handler then reads the name property from req.body and creates a greeting message. Finally, the server sends this greeting back as a JSON response using res.json(). The variable tracker shows how req.body and name change during execution. Key moments include the necessity of express.json() middleware to parse JSON and handling invalid JSON gracefully. The quiz tests understanding of variable values at each step and how changes in input affect the flow.