EJS if statement
In EJS (Embedded JavaScript), the <% if %>
syntax is used for conditional rendering within your templates. This allows you to display different content based on certain conditions, making your templates more dynamic and adaptable to different data or states.
Using <% if %>
in EJS
The <% if %>
syntax allows you to include or exclude parts of your template based on the outcome of a condition. Here’s how it works:
1. Basic Syntax
The basic syntax for an if
statement in EJS is:
<% if (condition) { %> <!-- HTML to render if condition is true --> <% } %>
<% if (condition) { %>
: This starts theif
block. Thecondition
is evaluated as a JavaScript expression.<!-- HTML to render if condition is true -->
: This is the HTML content that will be rendered if the condition evaluates totrue
.<% } %>
: This ends theif
block.
2. Example Usage
Server-Side Code (Express):
app.get('/user', (req, res) => {
const user = {
name: 'Alice',
isLoggedIn: true
};
res.render('user', { user });
});
EJS Template (views/user.ejs
):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Page</title>
</head>
<body>
<% if (user.isLoggedIn) { %>
<h1>Welcome back, <%= user.name %>!</h1>
<% } else { %>
<h1>Please log in.</h1>
<% } %>
</body>
</html>
In this example:
- If
user.isLoggedIn
istrue
, the template will display a welcome message with the user’s name. - If
user.isLoggedIn
isfalse
, it will display a message prompting the user to log in.
3. Using else
and else if
You can extend the if
statement with else
and else if
to handle multiple conditions.
Example:
Server-Side Code:
app.get('/status', (req, res) => {
const status = {
role: 'admin'
};
res.render('status', { status });
});
EJS Template (views/status.ejs
):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Status Page</title>
</head>
<body>
<% if (status.role === 'admin') { %>
<h1>Welcome, Admin!</h1>
<% } else if (status.role === 'user') { %>
<h1>Welcome, User!</h1>
<% } else { %>
<h1>Welcome, Guest!</h1>
<% } %>
</body>
</html>
In this example:
- If
status.role
is'admin'
, it displays a welcome message for an admin. - If
status.role
is'user'
, it displays a message for a regular user. - If
status.role
does not match either condition, it defaults to a guest message.
4. Nesting if
Statements
You can nest if
statements to handle more complex conditions.
Example:
Server-Side Code:
app.get('/profile', (req, res) => {
const user = {
name: 'Alice',
age: 30,
hasProfilePicture: false
};
res.render('profile', { user });
});
EJS Template (views/profile.ejs
):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%= user.name %>'s Profile</title>
</head>
<body>
<h1>Profile of <%= user.name %></h1>
<% if (user.age >= 18) { %>
<p>Adult User</p>
<% if (user.hasProfilePicture) { %>
<p>Profile Picture is uploaded.</p>
<% } else { %>
<p>No profile picture uploaded.</p>
<% } %>
<% } else { %>
<p>Minor User</p>
<% } %>
</body>
</html>
In this example:
- The outer
if
checks if the user is an adult. - If true, it then checks if the user has a profile picture.
- If the user is not an adult, it displays a message for a minor user.
Summary
- Basic Syntax: Use
<% if (condition) { %>
to start anif
block and<% } %>
to close it. - Conditional Content: Include HTML within the
if
block to render it conditionally based on the expression result. else
andelse if
: Extend theif
block to handle additional conditions.- Nesting: Nest
if
statements for complex conditions and logic.
Using <% if %>
in EJS allows you to create dynamic templates that adapt based on the data or conditions, enhancing the flexibility and functionality of your web application’s user interface.