res.render for templates in Express - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does res.render() do in Express?

res.render() tells Express to use a template engine to create HTML from a template file and send it as a response to the browser.

beginner

How do you pass data to a template using res.render()?

You pass an object as the second argument to res.render(). The object contains key-value pairs that the template can use to show dynamic content.

beginner

What is the role of a template engine in res.render()?

A template engine takes a template file and data, then combines them to create HTML. res.render() uses this engine to build the final page sent to the user.

beginner

What happens if you call res.render('index') without passing data?

Express renders the index template with no extra data. The template will show static content or default values if coded that way.

intermediate

Can res.render() be used to render templates other than HTML?

Yes, depending on the template engine, res.render() can generate other text formats like XML or plain text, but HTML is the most common.

What is the first argument to res.render()?

A The name of the template file

B The data object

C The HTTP status code

D The response headers

The first argument is the template file name (without extension usually), telling Express which template to use.

How do you send dynamic data to a template in Express?

A By setting HTTP headers

B By calling <code>res.send()</code> before <code>res.render()</code>

C By passing an object as the second argument to <code>res.render()</code>

D By modifying the URL query string

Passing an object as the second argument to res.render() provides data for the template to use.

Which of these is NOT a common template engine used with Express?

A EJS

B ReactDOM

C Handlebars

D Pug

ReactDOM is for React rendering, not a template engine for Express.

What does res.render() send back to the client?

A Raw template file

B JSON data

C JavaScript code

D Rendered HTML content

res.render() sends the final HTML generated by the template engine.

If you forget to set a template engine in Express, what happens when you call res.render()?

A Express throws an error

B Express sends the template file as plain text

C Express ignores the call

D Express sends a 404 response

Express requires a template engine to render templates; otherwise, it throws an error.

Explain how res.render() works in Express and how you use it to send a web page.

Think about how Express combines a template and data to create a page.

Describe how you pass dynamic content to a template using res.render() and why this is useful.

Consider how websites show different info to different users.

Practice

1. What does res.render do in an Express app?

easy

A. It creates and sends an HTML page using a template and data.

B. It sends a JSON response to the client.

C. It redirects the user to another URL.

D. It logs a message to the server console.

Solution

1. Step 1: Understand the purpose of res.render

   res.render is used to create a web page by combining a template with data.

2. Step 2: Identify what res.render sends to the client

   It sends the generated HTML page as the response to the user's browser.

3. Final Answer:

   It creates and sends an HTML page using a template and data. -> Option A

4. Quick Check:

   res.render = sends HTML page [OK]

Hint: Remember: res.render sends HTML, not JSON or redirects [OK]

Common Mistakes:

• Confusing res.render with res.json
• Thinking res.render redirects the user
• Assuming res.render logs info instead of sending response

2. Which of the following is the correct syntax to render a template named 'home' with a variable 'title' set to 'Welcome'?

easy

A. res.render('home', 'title', 'Welcome');

B. res.render('home', { title: 'Welcome' });

C. res.render('home', ['title', 'Welcome']);

D. res.render('home', title = 'Welcome');

Solution

1. Step 1: Check the method signature of res.render

   It takes the template name as first argument and an object with variables as second argument.

2. Step 2: Match the correct object syntax

   The correct way to pass variables is using an object like { title: 'Welcome' }.

3. Final Answer:

   res.render('home', { title: 'Welcome' }); -> Option B

4. Quick Check:

   res.render(template, object) = correct syntax [OK]

Hint: Pass variables as an object, not as separate arguments [OK]

Common Mistakes:

• Passing variables as separate arguments instead of an object
• Using array instead of object for variables
• Assigning variables inside the argument list incorrectly

3. Given this Express code snippet, what will the user see when visiting '/'?

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

Assuming the 'index' template contains: <h1>Hello, <%= name %>!</h1>

medium

A. Hello, Alice!

B. Hello, <%= name %>!

C. Error: Template not found

D. Hello, !

Solution

1. Step 1: Understand how res.render passes data to template

   The object { name: 'Alice' } provides the value for name in the template.

2. Step 2: Evaluate the template output

   The template uses <%= name %> to insert the value 'Alice' into the HTML.

3. Final Answer:

   <h1>Hello, Alice!</h1> -> Option A

4. Quick Check:

   Template variable replaced correctly =

   Hello, Alice!

   [OK]

Hint: Variables in template replaced by object keys passed to res.render [OK]

Common Mistakes:

• Expecting raw template tags to appear in output
• Assuming missing template causes silent empty output
• Confusing template syntax with HTML escaping

4. What is wrong with this Express code snippet?

app.get('/about', (req, res) => {
  res.render('about', title: 'About Us');
});

medium

A. res.render cannot be used inside app.get routes.

B. The template name 'about' should be a variable, not a string.

C. The second argument to res.render should be an object, but it's missing curly braces.

D. The route path '/about' is invalid.

Solution

1. Step 1: Check the syntax of res.render arguments

   The second argument must be an object with key-value pairs, but here it's written without curly braces.

2. Step 2: Identify the correct object syntax

   It should be { title: 'About Us' } to pass variables properly.

3. Final Answer:

   The second argument to res.render should be an object, but it's missing curly braces. -> Option C

4. Quick Check:

   res.render second argument = object with braces [OK]

Hint: Always wrap variables in an object with curly braces for res.render [OK]

Common Mistakes:

• Omitting curly braces around variables object
• Passing variables as separate arguments
• Misunderstanding route handler usage

5. You want to render a 'profile' template that shows a user's name and age. The user data is in an object user = { name: 'Bob', age: 30 }. Which code correctly renders the template passing the user data so the template can access name and age directly?

hard

A. res.render('profile', ['name', user.name, 'age', user.age]);

B. res.render('profile', { user });

C. res.render('profile', { name: user, age: user.age });

D. res.render('profile', { name: user.name, age: user.age });

Solution

1. Step 1: Understand how template variables are accessed

   The template expects variables name and age directly, not inside a nested object.

2. Step 2: Pass variables as separate keys in an object

   Passing { name: user.name, age: user.age } makes name and age available directly in the template.

3. Final Answer:

   res.render('profile', { name: user.name, age: user.age }); -> Option D

4. Quick Check:

   Pass variables as keys for direct template access [OK]

Hint: Pass each variable separately for direct template use [OK]

Common Mistakes:

• Passing the whole user object instead of separate keys
• Passing variables as an array instead of object
• Assuming template can access nested object keys without dot notation