Passing data to templates in Express - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to send data to the template using Express.

Express

app.get('/', (req, res) => {
  res.render('index', { title: [1] });
});

Drag options to blanks, or click blank then click option'

A'Home Page'

Btitle

Cres

Dreq

Attempts:

3 left

💡 Hint

Common Mistakes

Passing variable names instead of string values.

Forgetting to wrap the string in quotes.

We pass the data as an object with keys and values. Here, the key is title and the value is the string 'Home Page'.

2fill in blank

medium

Complete the code to pass a list of users to the template.

Express

app.get('/users', (req, res) => {
  const users = ['Alice', 'Bob', 'Charlie'];
  res.render('users', { [1]: users });
});

Drag options to blanks, or click blank then click option'

Ausers

BuserList

Clist

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using a key name that does not match the template variable.

Passing the variable without a key.

The key name in the object should match what the template expects. Here, users is the key used to pass the list.

3fill in blank

hard

Fix the error in passing multiple data items to the template.

Express

app.get('/profile', (req, res) => {
  const name = 'John';
  const age = 30;
  res.render('profile', { name: name, [1] });
});

Drag options to blanks, or click blank then click option'

Aage

Bage = age

Cage-age

Dage: age

Attempts:

3 left

💡 Hint

Common Mistakes

Using equals sign instead of colon.

Passing only the variable name without a key.

When passing multiple data items, each must be a key-value pair separated by commas. The correct syntax is age: age.

4fill in blank

hard

Fill both blanks to pass a title and a list of items to the template.

Express

app.get('/items', (req, res) => {
  const items = ['Pen', 'Notebook', 'Eraser'];
  res.render('items', { [1]: 'My Items', [2]: items });
});

Drag options to blanks, or click blank then click option'

Atitle

Blist

Citems

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up key names or using inconsistent names.

Forgetting commas between key-value pairs.

The object keys should be title for the string and items for the list to match the template variables.

5fill in blank

hard

Fill all three blanks to pass user info and a flag to the template.

Express

app.get('/dashboard', (req, res) => {
  const user = { name: 'Anna', role: 'admin' };
  const isLoggedIn = true;
  res.render('dashboard', { [1]: user.name, [2]: user.role, [3]: isLoggedIn });
});

Drag options to blanks, or click blank then click option'

Ausername

Brole

CloggedIn

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using the whole user object instead of individual properties.

Using inconsistent or unclear key names.

The keys username, role, and loggedIn are used to pass the user's name, role, and login status respectively to the template.

Practice

1. In Express, how do you pass data to a template when rendering it?

easy

A. By modifying the template file before rendering

B. By setting variables directly on req object

C. By sending data in the URL query string

D. By passing an object as the second argument to res.render()

Solution

1. Step 1: Understand res.render() usage

   Express uses res.render() to render templates and can accept data as the second argument.

2. Step 2: Passing data as an object

   The data is passed as an object with keys representing variable names in the template.

3. Final Answer:

   By passing an object as the second argument to res.render() -> Option D

4. Quick Check:

   Data passed via res.render() object = By passing an object as the second argument to res.render() [OK]

Hint: Use res.render(view, dataObject) to pass data [OK]

Common Mistakes:

• Trying to set data on req instead of res.render()
• Passing data as a string instead of an object
• Modifying template files directly for dynamic data

2. Which of the following is the correct syntax to pass a variable named title with value 'Home' to a template named index?

easy

A. res.render('index', ['title', 'Home']);

B. res.render('index', { title: 'Home' });

C. res.render('index', title = 'Home');

D. res.render('index', 'title', 'Home');

Solution

1. Step 1: Check res.render() parameters

   The first parameter is the template name as a string, the second is an object with key-value pairs.

2. Step 2: Validate object syntax

   Passing { title: 'Home' } correctly sends the variable title with value 'Home'.

3. Final Answer:

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

4. Quick Check:

   Object with key-value = res.render('index', { title: 'Home' }); [OK]

Hint: Pass data as an object literal in second argument [OK]

Common Mistakes:

• Using assignment instead of object literal
• Passing array instead of object
• Passing multiple string arguments instead of one object

3. Given this Express code snippet:

app.get('/', (req, res) => {
  res.render('home', { user: 'Alice', age: 30 });
});

What variables can the home template access?

medium

A. Both user with 'Alice' and age with 30

B. Only age with value 30

C. Only user with value 'Alice'

D. No variables, template receives no data

Solution

1. Step 1: Identify data passed to template

   The object passed to res.render() has keys user and age with values 'Alice' and 30.

2. Step 2: Understand template variable availability

   The template can access all keys in the object as variables.

3. Final Answer:

   Both user with 'Alice' and age with 30 -> Option A

4. Quick Check:

   All keys in object = Both user with 'Alice' and age with 30 [OK]

Hint: All keys in object become template variables [OK]

Common Mistakes:

• Assuming only one variable is passed
• Thinking template cannot access numbers
• Believing data must be nested inside another object

4. What is wrong with this Express code snippet?

app.get('/profile', (req, res) => {
  res.render('profile', user: 'Bob');
});

medium

A. Callback function should have three parameters

B. Template name should be a variable, not string

C. Missing curly braces around data object

D. Cannot pass data to templates in Express

Solution

1. Step 1: Check res.render() syntax

   The second argument must be an object, so data should be inside curly braces.

2. Step 2: Identify missing braces

   Here, user: 'Bob' is passed without braces, causing syntax error.

3. Final Answer:

   Missing curly braces around data object -> Option C

4. Quick Check:

   Data must be an object literal = Missing curly braces around data object [OK]

Hint: Always wrap data in { } when passing to res.render() [OK]

Common Mistakes:

• Passing key-value pairs without braces
• Using variables instead of strings for template name
• Adding extra parameters to callback unnecessarily

5. You want to render a template dashboard that shows a user's name and a list of their tasks. Which code correctly passes this data to the template?

hard

A. res.render('dashboard', { name: 'Eve', tasks: ['Buy milk', 'Call Bob'] });

B. res.render('dashboard', 'name', 'Eve', 'tasks', ['Buy milk', 'Call Bob']);

C. res.render('dashboard', { 'Eve', ['Buy milk', 'Call Bob'] });

D. res.render('dashboard', { user: 'Eve', taskList: 'Buy milk, Call Bob' });

Solution

1. Step 1: Identify correct object structure

   The data must be passed as an object with keys matching template variables.

2. Step 2: Check data types for variables

   name is a string and tasks is an array, both correctly passed in res.render('dashboard', { name: 'Eve', tasks: ['Buy milk', 'Call Bob'] });.

3. Step 3: Evaluate other options

   The other options use incorrect syntax such as multiple separate arguments, invalid object literals without keys, or mismatched variable names and data types (string instead of array).

4. Final Answer:

   res.render('dashboard', { name: 'Eve', tasks: ['Buy milk', 'Call Bob'] }); -> Option A

5. Quick Check:

   Correct object with array value = res.render('dashboard', { name: 'Eve', tasks: ['Buy milk', 'Call Bob'] }); [OK]

Hint: Pass arrays inside object to send lists to templates [OK]

Common Mistakes:

• Passing multiple arguments instead of one object
• Using wrong data types for lists
• Mismatching variable names expected by template