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.