express<\/a> application), you need to set the value of ‘view engine’ parameter to ‘ejs’.<\/p>\n[js]
\nvar app = express();
\napp.set(‘view engine’, ‘ejs’);
\n[\/js]<\/p>\n
Now request goes to backend, a function is called there which renders the ejs file:
\n[js] res.render(‘demo’, {data:data})[\/js]<\/p>\n
Lets say it returns JSON data like:
\n{name: 'Sakshi', age : '24', hobbies: ['blogging', 'reading']}
\n<\/code><\/p>\nNow the final step, Rendering the ejs file. Our demo.ejs looks like:<\/p>\n
[js]
\n<html>
\n <body>
\n <br\/>
\n <h2>EJS Demo!!!<\/h2>
\n <div>Name : <%= data.name%><\/div>
\n <div>Age : <%= data.age%><\/div>
\n <\/body>
\n<\/html>
\n[\/js]<\/p>\n
Output:
\nName: Sakshi
\n Age: 24
\n<\/code><\/p>\nSome useful ejs tags are:
\n1. <% ><\/strong> : This tag executes all the JavaScript code present inside it. So we can easily use for loops, if\/else statements, switch statements and variable declarations inside the EJS template.
\nFor examlpe:
\n[js]
\n <table>
\n <tr>
\n <th>Name<\/th>
\n <th>Age<\/th>
\n <th>Email<\/th>
\n <\/tr>
\n<% result.forEach(function(obj){ %>
\n <tr>
\n <td><%=obj.name%><\/td>
\n <td><%=obj.age%><\/td>
\n <td><%=obj.email%><\/td>
\n <\/tr>
\n <%})%>
\n<\/table>
\n[\/js]<\/p>\n2. <%= ><\/strong> : The value of the variable present between this tag is printed as it is given by JSON data.<\/p>\n3. <%- ><\/strong> : This tag renders the actual html code present between it.
\nFor example:
\nJSON data = {myPage : “<html><body><h3>Hello World<\/h3><\/body><\/html>”}<\/p>\nSo for rendering this html code we use:
\n[js]
\n<div><%- myPage><\/div>
\n[\/js]<\/p>\n
4. <%== ><\/strong> : This tag is commonly used to include templates in other templates.<\/p>\nNOTE<\/strong>: EJS also allow us to include another ejs template or file into our current ejs page. This can be done using <% include otherPage.ejs %>.<\/p>\nHope this will help \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"
EJS as the name implies embedded JavaScript, is a JavaScript templating library used to render html code along with JSON data in an easy and clean way. In a Node.JS application(here we are using an express application), you need to set the value of ‘view engine’ parameter to ‘ejs’. [js] var app = express(); app.set(‘view […]<\/p>\n","protected":false},"author":65,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":16},"categories":[1],"tags":[1294,1124],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/11578"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=11578"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/11578\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=11578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=11578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=11578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}