Passing data to templates in Express - Step-by-Step Execution

Concept Flow - Passing data to templates

Client sends request

↓

Express route handler runs

↓

Prepare data object

↓

Call res.render(template, data)

↓

Template engine merges data into template

↓

Send rendered HTML to client

This flow shows how Express receives a request, prepares data, renders a template with that data, and sends the final HTML back to the client.

Execution Sample

Express

app.get('/', (req, res) => {
  const user = { name: 'Anna', age: 28 };
  res.render('profile', { user });
});

This code sends user data to the 'profile' template to show user details on the page.

Execution Table

Step	Action	Data Prepared	Template Called	Output Sent
1	Client requests '/'	N/A	N/A	N/A
2	Route handler runs	{ name: 'Anna', age: 28 }	profile	N/A
3	res.render called	{ user: { name: 'Anna', age: 28 } }	profile	Rendered HTML with user data
4	Response sent	N/A	N/A	HTML page showing Anna's profile

💡 Response sent to client, request cycle ends

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
user	undefined	{ name: 'Anna', age: 28 }	{ name: 'Anna', age: 28 }	{ name: 'Anna', age: 28 }
data object	undefined	undefined	{ user: { name: 'Anna', age: 28 } }	{ user: { name: 'Anna', age: 28 } }

Key Moments - 2 Insights

Why do we pass an object like { user } to res.render instead of just the user variable?

res.render expects an object where keys are variable names in the template. Passing { user } means the template can access 'user'. See step 3 in execution_table.

What happens if the data object is empty or missing?

The template renders but has no data to show dynamic content. The output will be static or empty placeholders. This is shown by comparing step 3 and 4 in execution_table.

Visual Quiz - 3 Questions

Look at the execution_table at step 2. What is the value of the 'user' variable?

A undefined

B { name: 'Anna', age: 28 }

C null

D {}

💡 Hint

Check the 'Data Prepared' column at step 2 in execution_table.

At which step is the template engine merging data into the template?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look for 'res.render called' and 'Rendered HTML with user data' in execution_table.

If we change the data object to { user: { name: 'Bob' } }, what changes in the execution_table?

A The 'Data Prepared' at step 2 changes to Bob's data

B The 'Template Called' changes to 'profileBob'

C The 'Output Sent' becomes empty

D No changes at all

💡 Hint

Data object content affects 'Data Prepared' column in execution_table step 2.

Concept Snapshot

Express passes data to templates by calling res.render(template, dataObject).
The dataObject keys become variables in the template.
Templates use these variables to show dynamic content.
This happens inside route handlers after receiving requests.
The rendered HTML is sent back to the client.

Full Transcript

In Express, when a client requests a page, the server runs a route handler. Inside this handler, we prepare data as an object. We then call res.render with the template name and this data object. The template engine merges the data into the template placeholders, creating HTML with dynamic content. Finally, Express sends this HTML back to the client. Variables passed in the data object become accessible inside the template by their keys. If no data is passed, the template renders without dynamic content. This process allows us to show personalized or changing information on web pages.