Tutorials


EJS else if statement


The <% else if %> statement in EJS (Embedded JavaScript) is used to handle multiple conditional branches in your templates. It allows you to check multiple conditions in a sequence and execute different blocks of code based on which condition evaluates to true.

Syntax and Usage of <% else if %> in EJS

Here’s how to use the <% else if %> statement:

1. Basic Syntax

The syntax for using else if in EJS is:

<% if (condition1) { %>
    <!-- HTML to render if condition1 is true -->
<% } else if (condition2) { %>
    <!-- HTML to render if condition2 is true -->
<% } else { %>
    <!-- HTML to render if none of the conditions are true -->
<% } %>
  • <% if (condition1) { %>: Starts the if block and checks condition1.
  • <!-- HTML to render if condition1 is true -->: This content is rendered if condition1 evaluates to true.
  • <% } else if (condition2) { %>: Adds an else if block to check condition2 if condition1 is false.
  • <!-- HTML to render if condition2 is true -->: This content is rendered if condition2 evaluates to true.
  • <% } else { %>: Adds an else block that handles all other cases where none of the preceding conditions are true.
  • <!-- HTML to render if none of the conditions are true -->: This content is rendered if neither condition1 nor condition2 is true.
  • <% } %>: Ends the if-else if-else block.

2. Example Usage

Server-Side Code (Express):

app.get('/status', (req, res) => {
    const user = {
        role: 'editor' // Could be 'admin', 'user', or 'guest'
    };
    res.render('status', { user });
});

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 (user.role === 'admin') { %>
        <h1>Welcome, Admin!</h1>
    <% } else if (user.role === 'editor') { %>
        <h1>Welcome, Editor!</h1>
    <% } else if (user.role === 'user') { %>
        <h1>Welcome, User!</h1>
    <% } else { %>
        <h1>Welcome, Guest!</h1>
    <% } %>
</body>
</html>

In this example:

  • If user.role is 'admin', it displays "Welcome, Admin!".
  • If user.role is 'editor', it displays "Welcome, Editor!".
  • If user.role is 'user', it displays "Welcome, User!".
  • If user.role is none of the above, it defaults to "Welcome, Guest!".

3. Combining with Other Logic

You can combine else if with other control structures like loops to create more complex templates.

Example:

Server-Side Code:

app.get('/dashboard', (req, res) => {
    const data = {
        accessLevel: 2, // Could be 1, 2, or 3
        items: ['Item1', 'Item2', 'Item3']
    };
    res.render('dashboard', { data });
});

EJS Template (views/dashboard.ejs):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
</head>
<body>
    <% if (data.accessLevel === 1) { %>
        <h1>Basic Dashboard</h1>
        <ul>
            <% data.items.forEach(item => { %>
                <li><%= item %></li>
            <% }); %>
        </ul>
    <% } else if (data.accessLevel === 2) { %>
        <h1>Intermediate Dashboard</h1>
        <p>Here are some additional features:</p>
        <ul>
            <% data.items.forEach(item => { %>
                <li><%= item %></li>
            <% }); %>
        </ul>
    <% } else if (data.accessLevel === 3) { %>
        <h1>Advanced Dashboard</h1>
        <p>Here are all the features:</p>
        <ul>
            <% data.items.forEach(item => { %>
                <li><%= item %></li>
            <% }); %>
        </ul>
    <% } else { %>
        <h1>Unauthorized Access</h1>
    <% } %>
</body>
</html>

In this example:

  • The dashboard content varies based on the accessLevel:
    • Level 1 shows a basic dashboard.
    • Level 2 shows an intermediate dashboard with additional features.
    • Level 3 shows an advanced dashboard with all features.
    • Any other accessLevel is treated as unauthorized access.

Summary

  • Basic Syntax: Use <% if (condition1) { %>, <% } else if (condition2) { %>, and <% } else { %> to handle multiple conditions in a template.
  • Conditional Blocks: Display different content based on which condition is met.
  • Combining Logic: Combine else if with loops and other logic to create dynamic and complex templates.

The <% else if %> statement allows you to manage multiple conditions in your EJS templates effectively, providing flexibility and control over how content is rendered based on varying data or states.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about