EJS template setup in Express - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this EJS template render?

Given the following EJS template and data passed from Express, what is the rendered HTML output?

Express

<h1>Welcome, <%= user.name %>!</h1>
<ul>
  <% for(let i = 0; i < user.tasks.length; i++) { %>
    <li><%= user.tasks[i] %></li>
  <% } %>
</ul>

A <h1>Welcome, Alice!</h1><ul><li>Buy milk</li><li>Walk dog</li></ul>

B <h1>Welcome, user.name!</h1><ul><li>user.tasks[0]</li><li>user.tasks[1]</li><li>user.tasks[2]</li></ul>

C <h1>Welcome, Alice!</h1><ul><li>Buy milk</li><li>Walk dog</li><li>Read book</li></ul>

D <h1>Welcome, Alice!</h1><ul></ul>

💡 Hint

Remember that <%= %> outputs the value, and <% %> runs JavaScript code without output.

The template loops through all tasks in the user.tasks array and outputs each as a list item. The user.name is inserted with <%= %>.

📝 Syntax

intermediate

Identify the syntax error in this EJS snippet

Which option contains the correct syntax to conditionally display a message if isAdmin is true?

Express

<% if (isAdmin) { %>
  <p>Welcome, admin!</p>
<% } %>

A <% if isAdmin { %><p>Welcome, admin!</p><% } %>

B <% if (isAdmin) { %><p>Welcome, admin!</p><% } %>

C <% if (isAdmin) %><p>Welcome, admin!</p><% } %>

D <% if (isAdmin) { %><p>Welcome, admin!</p>

💡 Hint

Check for proper parentheses and braces in JavaScript if statements inside EJS tags.

Option B correctly uses parentheses and braces for the if statement and closes the EJS tags properly.

❓ state_output

advanced

What is the output of this EJS template with given data?

Consider this EJS template and the data object passed from Express: Template:

<% items.forEach(item => { %>
• <%= item %>
<% }) %>

Data: { items: ['apple', 'banana', 'cherry'] } What is the rendered HTML output?

A <ul><li>apple</li><li>banana</li><li>cherry</li></ul>

B <ul><li>items[0]</li><li>items[1]</li><li>items[2]</li></ul>

C <ul><li>apple</li><li>banana</li></ul>

D <ul></ul>

💡 Hint

The forEach loop outputs each item inside

tags.

The template loops through all items and outputs each inside a list item. The output matches the array elements exactly.

🔧 Debug

advanced

Why does this EJS template cause a runtime error?

This EJS template throws an error when rendered:

<% for(let i = 0; i < tasks.length; i++) { %>
• <%= tasks[i].name %>
<% } %>

Data passed: { tasks: ['clean', 'cook', 'shop'] } What causes the error?

A Using <%= %> inside a loop is not allowed in EJS

B Syntax error: missing closing tag for the for loop

C tasks is undefined in the template context

D tasks array contains strings, but template expects objects with a 'name' property

💡 Hint

Check the data type of each item in tasks and what the template expects.

The template tries to access 'name' property on each task, but tasks are strings, not objects, causing a runtime error.

🧠 Conceptual

expert

How does Express find EJS templates by default?

When you set up Express with EJS as the view engine, where does Express look for the template files by default?

A In the 'views' folder located in the root directory of the project

B In the 'templates' folder inside the 'public' directory

C In the same folder as the server.js file

D In the 'ejs' folder inside 'node_modules'

💡 Hint

Express has a default folder name for views unless configured otherwise.

By default, Express looks for templates in a folder named 'views' at the root of the project.

Practice

1. What does the line app.set('view engine', 'ejs') do in an Express app?

easy

A. It creates a new EJS file in the views folder.

B. It installs the EJS package automatically.

C. It tells Express to use EJS as the template engine for rendering views.

D. It starts the Express server with EJS support.

Solution

1. Step 1: Understand the purpose of app.set

   This method configures Express settings, here it sets the template engine.

2. Step 2: Identify what 'view engine' setting does

   Setting 'view engine' to 'ejs' tells Express to use EJS to render view files automatically.

3. Final Answer:

   It tells Express to use EJS as the template engine for rendering views. -> Option C

4. Quick Check:

   app.set('view engine', 'ejs') = Use EJS [OK]

Hint: Remember: app.set('view engine', 'ejs') enables EJS rendering [OK]

Common Mistakes:

• Thinking it installs EJS automatically
• Confusing it with creating files
• Assuming it starts the server

2. Which of the following is the correct way to render an EJS template named index.ejs with Express?

easy

A. res.render('index.ejs')

B. res.view('index')

C. res.send('index.ejs')

D. res.render('index')

Solution

1. Step 1: Recall how Express renders templates

   Express uses res.render with the template name without extension.

2. Step 2: Identify correct syntax

   Passing 'index' (without '.ejs') is correct; Express adds the extension automatically.

3. Final Answer:

   res.render('index') -> Option D

4. Quick Check:

   Use res.render('templateName') without extension [OK]

Hint: Use template name without extension in res.render() [OK]

Common Mistakes:

• Including the .ejs extension in res.render()
• Using res.send() instead of res.render()
• Using non-existent res.view() method

3. Given this Express code snippet, what will be the output in the browser?

app.set('view engine', 'ejs');

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

And the greeting.ejs file contains:

<h1>Hello, <%= name %>!</h1>

medium

A. Hello, <%= name %>!

B. Hello, Sam!

C. Error: name is not defined

D. Hello, !

Solution

1. Step 1: Understand data passing to EJS

   The object { name: 'Sam' } passes 'Sam' as the value for 'name' in the template.

2. Step 2: Interpret EJS syntax in template

   <%= name %> outputs the value of 'name' safely, so it becomes 'Sam'.

3. Final Answer:

   <h1>Hello, Sam!</h1> -> Option B

4. Quick Check:

   EJS <%= %> inserts variable value [OK]

Hint: EJS <%= %> inserts passed data values directly [OK]

Common Mistakes:

• Expecting raw template tags to show in output
• Forgetting to pass data object to render
• Confusing <%= %> with <% %> (no output)

4. What is wrong with this Express setup for EJS?

const express = require('express');
const app = express();

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  res.render('home.ejs');
});

medium

A. The template name in res.render should not include the '.ejs' extension.

B. EJS must be required explicitly with require('ejs').

C. app.set should be called after app.get.

D. res.render cannot be used inside app.get.

Solution

1. Step 1: Check usage of res.render

   res.render expects the template name without the file extension.

2. Step 2: Identify the error in code

   Passing 'home.ejs' includes extension, which causes Express to look for 'home.ejs.ejs'.

3. Final Answer:

   The template name in res.render should not include the '.ejs' extension. -> Option A

4. Quick Check:

   Use res.render('templateName') without extension [OK]

Hint: Never add .ejs extension in res.render() call [OK]

Common Mistakes:

• Adding .ejs extension in res.render()
• Thinking require('ejs') is mandatory
• Changing app.set order unnecessarily

5. You want to render a list of users dynamically in an EJS template. Which setup correctly passes the users array and renders it inside users.ejs?

const users = ['Anna', 'Bob', 'Cara'];

app.get('/users', (req, res) => {
  // What goes here?
});

Choose the correct code to replace // What goes here?.

hard

A. res.render('users', { users: users });

B. res.render('users.ejs', { users });

C. res.send('users', { users });

D. res.render('users', users);

Solution

1. Step 1: Understand how to pass data to EJS

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

2. Step 2: Check correct syntax for res.render

   Use res.render('templateName', { key: value }) without file extension.

3. Final Answer:

   res.render('users', { users: users }); -> Option A

4. Quick Check:

   Pass data as object in res.render(template, data) [OK]

Hint: Pass data as object: res.render('name', {key: value}) [OK]

Common Mistakes:

• Including .ejs extension in template name
• Passing array directly instead of inside object
• Using res.send instead of res.render