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 the if block. The condition 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 to true.
  • <% } %>: This ends the if 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 is true, the template will display a welcome message with the user’s name.
  • If user.isLoggedIn is false, 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 an if block and <% } %> to close it.
  • Conditional Content: Include HTML within the if block to render it conditionally based on the expression result.
  • else and else if: Extend the if 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.