NodeJs

Conditional Statement and Loops in EJS template

Conditional statement for loops Ejs framework

In the previous NodeJs tutorial, we have discussed Ejs and template. We also discussed that how we can render HTML page using EJS Express framework. Now in this knowledge bit, we will see that how we can use conditional statement and loops in Ejs.

Conditional Statement and Loops in EJS template:

Now I am going to show you that how you can add logic to your application using Express framework. Many websites including Facebook, Twitter, Reddit, etc use templating language. The concept of templating language is almost same, so now we will see how we can add logic to HTML.

We have already discussed that how we can create the express application and render HTML page using Ejs in our previous tutorial. Now we are going to continue from that point and going ahead and learning about conditionals and loop. Here is the server code below that we have created in our previous tutorial.

 

var express = require('express');
var app = express();

app.listen(3000, function() {
console.log('Hey there from the server')
})

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

app.get('/:users', function(req, res) {
var users = req.params.users;
res.render("userval.ejs", {username: users});
});

 

This is the code for server JavaScript file in which we rendering a simple HTML page with Ejs. This code renders the Ejs file “userval.ejs” and greet the user that we used to type in the URL like if we run this URL (http://localhost:3000/Danny), then it will greet Danny on the page. Now we are going to add very simple logic like it will check if the username that we type is Danny or Something else. If it is Danny then it will display another paragraph line.

Conditional Statement with EJS:

So we are going to add simple JavaScript code in our EJS file. This code will check if the username in the URL is Danny or not, then will display a paragraph. Here is the code below for our Ejs file:

<h1>Hey <%= username.toUpperCase() %>, Welcome to Our site</h1>
<% if(username.toLowerCase() === "danny"){ %>
<p>Danny you are Beautiful!</p>
<% } else { %>
<p>You are not Danny, you are not Beautiful!</p>
<% } %>

You can notice that we have put JavaScript code inside Ejs tags <%> and we have not used equal sign this time like we have used in our previous lesson. Here is how the output would look like:

If we go to URL http://localhost:3000/Alex  or any other URL rather than http://localhost:3000/danny then it will display the following paragraph:

 

Conditional statement Ejs Express framework

 

Now when we go to URL http://localhost:3000/danny then it will print the following paragraph and greet the Danny:

 

Conditional Statement and Loops in EJS

Difference Between <%= %> and <% %>

There is very basic and the most important difference is that when we add the equal sign then the value that we return will be rendered to the page and it will be added to HTML.

For example, if we have numerical value followed by text something like this:

Total: <%= 10+5 %>

Then it will treat it like simple JavaScript and evaluate the result in the HTML itself and treated the values like it is given by JSON.

But when we do logic like conditionals statement or loops then we don’t want to be added something to be in the HTML. It will not add anything to HTML but will execute the JavaScript code which is present inside these brackets. So equal sign take the return value and stick it in the HTML and bracket without equal sign just run the code. We can use if/else conditional statement without equal sign bracket but we can’t use conditional statement with equal sign brackets.

How to use Loops in Template with EJS:

Now we are going to define another route, go to your server JavaScript file and define the route and inside the route function, we are going to define an object. Then we render the EJS file with name post.ejs and going to pass the data {post =post}. Here is the demonstration below:

 

app.get('/posts', function(req, res) {
var posts = [
{title: "Post 1", name: "Danny"},
{title: "Post 2", name: "Alex"},
{title: "Post 3", name: "Matt"},
{title: "Post 4", name: "Manny"}
];
res.render("posts.ejs", {posts: posts});

}); 

 

Now go and save the server file and then create the post.ejs file and save that file in views directory. In that ejs page, we will print the values of posts, we are going to use the forEach loop to print all the four post. Here is the demonstration below:

 

<h1>Our Post Page!</h1>
<% post.forEach(function(posts){ %>
<li><%= posts[i].title %> - <%= posts[i].name %> </li>
<% }) %>

 

You can notice we have used for loop to print object elements. You can also notice that we have not used equal sign bracket with forEach loops. Now run save all the files and run the server file and open the URL in the browser (http://localhost:3000/posts). Here is the output below:

 

Conditional statement and For Loop with Ejs template Express Framework node js

 

You can notice that we have got three titles and the names.

Conclusion:

In this Ejs tutorial, we have discussed that how we can use conditional statements like if else with EJS express framework. We have also learned about the difference between <%= %> and <% %> brackets. We have also seen that how we can use Loops in EJS Express framework.

Click to comment

Most Popular

To Top