Can I use conditional statements with EJS templates (in JMVC)?

Question

and if yes, what is the syntax? My goal is to prepend an 's' to the word 'comment' when there is more than one. in an jQuery.ejs template in a JMVC app. The following breaks. I can't find any docs for conditionals...

<%=commentsNumber%> comment<% if (commentsNumber > 1) { %> s <% } %>

Your syntax looks right, and works for me. Are you sure that var commentsNumber exists and is an integer? — Ryenski, Dec 01 '11 at 16:10
Yes, strange that conditionals are not mentioned in the docs! — UpTheCreek, Jan 24 '13 at 10:51

StanleyZheng · Answer 1 · 2017-05-03T21:48:26.307

239

Conditionals work if they're structured correctly, I ran into this issue and figured it out.

For conditionals, the tag before else has to be paired with the end tag of the previous if otherwise the statements will evaluate separately and produce an error.

ERROR!

<% if(true){ %>
   <h1>foo</h1>
<% } %>
<% else{ %>
   <h1>bar</h1>
 <% } %>

Correct

<% if(true){ %>
   <h1>foo</h1>
 <% } else{ %>  
   <h1>bar</h1>
<% } %>

hope this helped.

edited May 03 '17 at 21:48

answered Jul 22 '14 at 01:49

StanleyZheng

4,008
3
21
24

4

Thanks !! This stuck me for a while. – xblymmx Dec 30 '16 at 06:46
3

This was incredibly helpful as I was running into an issue where I was putting my `else` on a different line like the first code block you mentioned. Thanks so much for including these examples!! – Michael Platt Jul 27 '17 at 20:30
That's exactly what i needed. I'm surprised why it is not mentioned in their documentation. – Daman Arora May 13 '21 at 18:31

score 188 · Accepted Answer · answered Jan 07 '13 at 17:37

188

For others that stumble on this, you can also use ejs params/props in conditional statements:

recipes.js File:

app.get("/recipes", function(req, res) {
    res.render("recipes.ejs", {
        recipes: recipes
    });
});

recipes.ejs File:

<%if (recipes.length > 0) { %>
// Do something with more than 1 recipe
<% } %>

answered Jan 07 '13 at 17:37

Jbird

2,839
1
21
28

4

Can you, in the case of an `include` statement, write the conditional inline? That is writing `<% if (true) { include foo/bar } %>` appears to error. Is there a method similar or is it necessary to break out the `include` by `<% %>`. – kuanb Sep 12 '16 at 21:48
Thanks, I was searching for this answer before trying it out. – CTala Jul 03 '18 at 23:21
Thank you! I was trying to display conditional elements from changes on the server. Your answer showed me that I needed to do have evaluate everything on the client. – buildpax Mar 11 '19 at 01:39

score 36 · Answer 3 · edited Jul 14 '17 at 10:11

36

Yes , You can use conditional statement with EJS like if else , ternary operator or even switch case also

For Example

Ternary operator : <%- role == 'Admin' ? 'Super Admin' : role == 'subAdmin' ? 'Sub Admin' : role %>

Switch Case

<% switch (role) {
case 'Admin' : %>
        Super Admin
        <% break;

case 'eventAdmin' : %>
        Event Admin
        <% break;

case 'subAdmin' : %>
        Sub Admin
        <% break;

} %>

edited Jul 14 '17 at 10:11

Sahil Mittal

20,697
12
65
90

answered Jul 14 '17 at 09:46

Om Prakash Sharma

1,682
22
13

Happy to see switch statement works. Thanks! – isaacsan 123 Oct 07 '21 at 22:56

score 24 · Answer 4 · answered Mar 09 '12 at 13:04

24

EJS seems to behave differently depending on whether you use { } notation or not:

I have checked and the following condition is evaluated as you would expect:

<%if (3==3) {%>  TEXT PRINTED  <%}%>
<%if (3==4) {%>  TEXT NOT PRINTED  <%}%>

while this one doesn't:

<%if (3==3) %>  TEXT PRINTED  <% %>
<%if (3==4) %>  TEXT PRINTED  <% %>

answered Mar 09 '12 at 13:04

Kristóf Aczél

257
2
3

14

Would you expect a single space character to do something? – UpTheCreek Jan 24 '13 at 10:52

score 21 · Answer 5 · answered Mar 22 '16 at 05:07

21

You can also use else if syntax:

<% if (x === 1) { %>
    <p>Hello world!</p>
<% } else if (x === 2) { %>
    <p>Hi earth!</p>
<% } else { %>
    <p>Hey terra!</p>
<% } %>

answered Mar 22 '16 at 05:07

pzrq

1,626
1
18
24

4

what you need to highlight here is that the closing bracket has to **most definitively** be used in the same line as else/else if – Paulo Aug 23 '17 at 08:17

Achintha Isuru · Answer 6 · 2019-12-15T18:34:14.890

I know this is a little late answer,

you can use if and else statements in ejs as follows

<% if (something) { %>
   // Then do some operation
<% } else { %>
   // Then do some operation
<% } %>

But there is another thing I want to emphasize is that if you use the code this way,

<% if (something) { %>
   // Then do some operation
<% } %>
<% else { %>
   // Then do some operation
<% } %>

It will produce an error.

Hope this will help to someone

Shahidullah Muffakir · Answer 7 · 2022-02-01T08:51:08.313

one simple and general rule for embedding javascript for example (for loops) into our ejs template we can follow the following rule:

first write your javascript code in the ejs template as you normally write in the javascript.
put the <% in the start and %> in the end of every pure javascript line.

for example:

if (num%2===0) {
    <p> this is an even number</p>
} else { 
<p> this is an odd number</p>
}

so now we have to put the ejs syntax in every line :

 <% if (num%2===0) {%>
    <p> this is an even number</p>
<%} else { %>
<p> this is an odd number</p>
<%}%>

score 2 · Answer 8 · answered Sep 01 '20 at 14:50

Just making code shorter you can use ES6 features. The same things can be written as

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

And the Templeate can be render as the same!

<%if (recipes.length > 0) { %>
// Do something with more than 1 recipe
<% } %>

Can I use conditional statements with EJS templates (in JMVC)?

8 Answers8

Linked