ejs - "Unexpected identifier" when using include in for loop - node.js

I'm using <% include components/aside.ejs %> or <% include components/head.ejs %> somewhere in my code without any problem. But when I use include in a for loop like this
<%
for (var i = 0; i < 20; i++) {
include components/head.ejs;
}
%>
, I get Unexpected identifier in [file path] while compiling ejs.
Is there any obvious mistake that I'm not noticing?

To fix a breaking change, as of EJS 3.x, the syntax for an include has gone from <%- include components/head.ejs %> to <%- include('components/head.ejs'); %>.

You can try this one.
<% for (var i = 0; i < 20; i++){ %>
<%- include('component/footer') %>
<% }; %>

Include the template tags <% and %> on every line, like this:
<% for (var i = 0; i < 20; i++){ %>
<%- include components/head.ejs %>
<% }; %>

Related

ejs website got a variable from server side, and not working propertly

I use Node.js, express and ejs
Client got a variable from server side
res.render('Messagess.ejs', {friendsdatas:friends, myaccount:accresult, mytoken:cookies.LoginToken})
I use this variable in html code like this. This working properly.
<% for (var i=0; i<friendsdatas.length; i++) { %>
<p class="name"><%= friendsdatas[i].Username %></p>
<% } %>
But inside the script section, I can't use like how I want
for (var i = 1; i<'<%=friendsdatas.length %>'; i++) {
console.log('<%=friendsdatas[i].id %>')
}
Here I got error
Error
If I use the variable like this, that working properly
console.log('<%=friendsdatas[1].id %>')
For this case,
<% for (var i=0; i<friendsdatas.length; i++) { %>
<p class="name"><%= friendsdatas[i].Username %></p>
<% } %>
code that is inside <% %> is executed by server. Since the control structure (for) is inside <% %>, it can run and read friendsdatas.
However, the other case
for (var i = 1; i<'<%=friendsdatas.length %>'; i++) {
console.log('<%=friendsdatas[i].id %>')
}
This for part is run by the client side. The client side can't access friendsdata.id so it can't be run.
<% for (var i = 1; i<'<%=friendsdatas.length %>'; i++) { %>
console.log('<%=friendsdatas[i].id %>')
<% } %>
This will output i console.log statement. Or alternatively
<%
let friendsdatasString = JSON.stringify(friendsdatas);
%>
<script>
let friendsdatas = <%- friendsdatasString %>;
for (var i = 1; i<friendsdatas.length; i++) {
console.log(friendsdatas[i].id)
}
</script>
Pass the server side variable to client side variable and loop normally for client side.

Create an Hashtag system using Node JS and Mongodb

I want to create an app where users have the ability to assign tags to their content using Node and MongoDB.
So far, I have been able to insert the tags into the database as an array.
This is how it looks like:
"tags": [
"laughing",
"smile"
]
Now I have a problem when it comes to displaying the tags on the frontend using the ejs template.
When I run the following the code:
<% for(var i=0; i<tags.length; i++) { %>
<%= tags[i] %>
<%}%>
The result is the following:
laughing, smiling
Yes it does give me the right answer but what I really wanted is a way to wrap each entity around <a></a>. something like smiling
I want to make this possible but I have not seen a way to achieve this using ejs.
Have you simply try:
<% for(var i=0; i<tags.length; i++) { %>
<%= tags[i] %>
<%}%>
Never used ejs but it look like all others templates languages syntax.
Try This -
<%var data = { "tags" : ["laughing", "smile"] };
var tagsArr = [];
for (let i = 0; i < data.tags.length; i++) {
tagsArr.push(data.tags[i].split(","));
}%>
Then use tagsArr -
<% for(let i=0; i<tagsArr.length; i++) { %>
<%= tagsArr[i] %>
<%}%>

ejs + nodejs - compare two variables doesn't work

I pass two variables during rendering in nodejs. Let's say they're templates & treeInfo.
In template.ejs I have.
<% for(var i=0; i<templates.length; i++) {%>
<%= templates[i]._id %> = <%= treeInfo.owner[0] %><br>
<% if (templates[i]._id == treeInfo.owner) { %>
ok
<% } %>
<% } %>
So actually if == doesn't work as expected. Here's the output.
59519779f36d284c166f9bea = 5941789e36593262bed9256b
5941789e36593262bed9256b = 5941789e36593262bed9256b
So it doesn't compare them the right way. If I just replace treeInfo.owner with something like '5941789e36593262bed9256b', it does work fine.
I assume ejs doesn't support variables comparation?
Thanks
Variable type can't understand.That's why toString() is required.
<% for(var i=0; i<templates.length; i++) {%>
<%= templates[i]._id %> = <%= treeInfo.owner[0] %><br>
<% if (templates[i]._id.toString() == treeInfo.owner.toString()) { %>
__append('Hello World');
<% } %>
To compare two objects / variables in EJS, as well as in nodejs
if(user1.equals(user2))
{
console.log("Both are equal");
}

EJS: Pass array of pages into include(page)

I've created a dashboard page where a user can save different components of the site to one page for quick viewing. I'm able to dynamically load one component as follows:
index.js
res.render('dashboard',{comp: 'component1'});
dashboard.ejs
<%- include(comp) %>
but I would like to do something like this:
index.js
res.render('dashboard',{comp: ['component1', 'component3']});
And have the ejs page loop through the include(), this way i can show 0 to n components on the dashboard page.
I've tried wrapping the include in a for loop like so:
<%- for(c in comp){include(c)} %>
but ejs did not like this.
Am I going about this the wrong way?
Try this
<% for(var i=0; i < comp.length; ++i) { %>
<%- include(comp[i]) %>
<% } %>
in your code, c is the index not value, comp[c] is your component.
<% for(c in comp){ %>
<%- include(comp[c]) %>
<% } %>

How to pass custom variable to partial in hexo?

I want to create an alternating layout using the static site generator hexo – the text of every second post on an overview page should be on the right.
The partial I’m using needs to pass on a custom variable like textOrientation = "left" to the partial function.
<%site.tags.findOne({name: 'featured'}).posts.sort('date', -1).limit(5).each(function(post, index) {%>
<%- partial('_partial/project-excerpt', {item: post}) %>
<% })%>
The template project_excerp.ejs then needs to generate the according classes bases on the passed variable.
My template (project_excerp.ejs):
<a class="???" href="/project/<%= item.slug %>"><%= item.title %></a>
So the questions are:
How can I extend the post variable with my own variable textOrientation and
How can I use an if then else in my project_excerp.ejs-template?
Okay, found a solution myself.
index.js:
<%site.tags.findOne({name: 'featured'}).posts.sort('date', -1).limit(5).each(function(post, index) {%>
<% if(index % 2 === 0) { %>
<% post.textOrientation = "left"; %>
<% } else { %>
<% post.textOrientation = "right"; %>
<% } %>
<%- partial('_partial/project-excerpt', {item: post}) %>
project_excerp.ejs:
<% var projectInfoClass = "ta-right"; %>
<% if(item.textOrientation === "right") {%>
<% projectInfoClass = "ta-left"; %>
<% } %>
<a class="<%= projectInfoClass %>" href="/project/<%= item.slug %>"><%= item.title %></a>
Also helpful to read the EJS-docs.

Resources