Tutorials


EJS else statement


In EJS (Embedded JavaScript), the <% else %> statement is used in conjunction with <% if %> to provide alternative content when a specified condition is not met. This allows you to handle different scenarios within your template, displaying one set of content if the condition is true and another set if it is false.

Syntax and Usage of <% else %>

Here's a step-by-step explanation of how to use the <% else %> statement in EJS:

1. Basic Syntax

The basic syntax for an if-else block in EJS is:

<% if (condition) { %>
    <!-- HTML to render if the condition is true -->
<% } else { %>
    <!-- HTML to render if the condition is false -->
<% } %>
  • <% if (condition) { %>: Starts the if block.
  • <!-- HTML to render if the condition is true -->: This is the content that will be displayed if the condition evaluates to true.
  • <% } else { %>: Starts the else block. This will be executed if the if condition is false.
  • <!-- HTML to render if the condition is false -->: This is the content that will be displayed if the condition evaluates to false.
  • <% } %>: Ends the if-else block.

2. Example Usage

Server-Side Code (Express):

app.get('/status', (req, res) => {
    const user = {
        isLoggedIn: false
    };
    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.isLoggedIn) { %>
        <h1>Welcome back!</h1>
    <% } else { %>
        <h1>Please log in.</h1>
    <% } %>
</body>
</html>

In this example:

  • If user.isLoggedIn is true, the message "Welcome back!" is displayed.
  • If user.isLoggedIn is false, the message "Please log in." is displayed.

3. Using else if

You can use else if to handle multiple conditions:

Example:

Server-Side Code:

app.get('/user', (req, res) => {
    const user = {
        role: 'guest'
    };
    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 Role</title>
</head>
<body>
    <% if (user.role === 'admin') { %>
        <h1>Welcome, Admin!</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', the template displays a message for an admin.
  • If user.role is 'user', it displays a message for a regular user.
  • If user.role is neither, it defaults to a guest message.

4. Combining with Loops and Other Logic

You can also combine if-else statements with loops or other logic to create complex templates.

Example:

Server-Side Code:

app.get('/items', (req, res) => {
    const items = ['Apple', 'Banana', 'Cherry'];
    const user = {
        isLoggedIn: true
    };
    res.render('items', { items, user });
});

EJS Template (views/items.ejs):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Items List</title>
</head>
<body>
    <% if (user.isLoggedIn) { %>
        <h1>Items List</h1>
        <ul>
            <% items.forEach(item => { %>
                <li><%= item %></li>
            <% }); %>
        </ul>
    <% } else { %>
        <h1>Please log in to view items.</h1>
    <% } %>
</body>
</html>

In this example:

  • If user.isLoggedIn is true, it displays a list of items.
  • If user.isLoggedIn is false, it prompts the user to log in.

Summary

  • Basic Syntax: Use <% if (condition) { %> and <% } else { %> to conditionally render content based on the evaluation of condition.
  • else if: Allows you to handle multiple conditions.
  • Combining Logic: You can combine if-else statements with loops and other logic for more complex templates.

Using <% else %> in EJS helps you manage content visibility and tailor the user experience based on conditions, making your web pages more dynamic and interactive.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about