EJS if else statment, array items - javascript

Im trying to render some API data using express (REST) and EJS (template engine) depending on which value "status" has. If any item in the array contains a status which is not "CLOSED" it should proceed and show those and if every item in the array has the status value set to "CLOSED" it should render a message saying "not found / no active cases"
<% for (var i=0, n=array.length; i < n; ++i){ %>
<% if (array[i].status !== "CLOSED") { %>
// This works as intendend and only renders array items without the status set to closed
<div><% array[i].status %> </div>
<% } else { %>
// This will however render this message the in the amount of array items that exists.
<div>Not found / no active cases </div>
<% } %>
How can I break out of the loop somehow and only display the message once?
The following has been tried and it works, sort of, however the message keeps looping.
<% for (var i=0, n=array.length; i < n; ++i){ %>
<% if (array[i].status !== "CLOSED") { %>
// This works as intendend and only renders array items without the status set to closed
<div><% array[i].status %> </div>
<% } else { %>
// This will however render this message the in the amount of array items that exists.
<div>Not found / no active cases </div>
<% } %>
I have also tried this, this yields the same result as the above.
<% for (var i=0, n=array.length; i < n; ++i){ %>
<% if (array[i].status !== "CLOSED") { %>
<div><% array[i].status %> </div>
<% } else if(array[i].status === "CLOSED") { %>
<div>Not found / no active cases </div>
<% } %>
<% } %>

You could filter all the elements which don't have status CLOSED, and if there are any, render them, else, show the message:
<% const notClosed = array.filter(el=> el.status !== 'CLOSED'); %>
<% if(notClosed.length > 0) {%>
<% notClosed.forEach(el=>{ %>
<div><%= el.status; %> </div>
<% }); %>
<% } else { %>
<div>Not found / no active cases </div>
<% } %>

Related

Node.js ejs - How to convert a comma string into an array in the ejs templated and loop over

I know I could convert the comma string into an array on the server side. Yet, is there also a way to convert a comma string into an array on the ejs template itself and then loop over the array and check if a certain value exists?
server.js
res.render('user', {
page: 'User',
menuId: 'user',
groupID: '0,1,10702,10802'
});
user.html
<% for(var i=0; i < groupID.length; i++) { %>
<% if (groupID[i] == '1') { %>
<span>Admin</span>
<% } %>
<% } %>
That's totally possible:
<% groupID.split(",").forEach(element => { %>
<% if (element === "1"){ %>
<span>Admin</span>
<% } %>
<% }); %>
Note: EJS Templates are still rendered on the Server-side! So it doesn't really matter if you just pass an Array from your server.js to EJS.

EJS comparison between two same strings

I try in ejs to compare two Strings which in the current situation are the same and it runs the else case. Here is the code:
<% var idf = notifications.data[i].from; %>
<% var ids = notifications.users[a].id; %>
<% if(idf == ids){ %>
<% index = a; %>
<script>alert('<%= index %>');</script>
<% break; %>
<% }else{ %>
<script>console.log('<%= idf %> - <%= ids %>');</script>
<% } %>
It logs 5d5ecfd1ad6d193de86c2264 - 5d5ecfd1ad6d193de86c2264
Use === instead of == to see if this fixes the issue, as it will prevent internal type coercion.
It might also be worth trimming the strings to see if there is any white space or padding added to them.
You could use the below code to compare two string values in ejs
<% if("some text" === "some text"){ %>
<h1>Yes the above text are equal</h1>
<% } %>
If you are comparing mongoDB objectId, then use toString().
<% var idf = notifications.data[i].from; %>
<% var ids = notifications.users[a].id; %>
<% if(idf.toString() == ids.toString()){ %>
<% index = a; %>
<script>alert('<%= index %>');</script>
<% break; %>
<% }else{ %>
<script>console.log('<%= idf %> - <%= ids %>');</script>
<% } %>

How to fix render ejs in node properly

I'm fetching data from mongodb and sending it through as res.render('user', {data: result}).
Now at ejs side I'm fetching this data field is a JSON object with name, email, password etc. field and array of attendance. Like this result:
{
name:"Joe",
password:"jdsj",
attendance:[
entry: Date,
late: true/false
]
}
Now when I loop through this array like:
<% var counter = 0 %>
<% for( var i = 0; i< data.attendance.length/2;
i+2{%>
<% if(data.attendance.length===0){%>
<% counter=0 %>
<% } else{ %>
<% counter++ %>
<% } %>
<% } %>`
When I fetch it on a page, it is not rendering. It is rendering ok without the for loop, but with looping its not rendering.
<li><%= data.name%></li>
<li><%= counter %></li>
...
You should append data in li element inside loop like this
<ul>
<% for(var i=0; i<data.length; i++) {%>
<li><%= data.name %></li>
<% } %>
</ul>

How stop a looping in the fourty loop

I'm pulling data from my database, and sending for my views through my controllers. The date is coming, and I'm rendering this data in the HTML with a looping.
The problem is that I want to show only 4 items, not all. How can I solve this?
For example:
<% for(var i = 0; i < data.length; i++ { %>
<p> <%= data[i].name %>
<p> <%= data[i].age %>
<% } %>
I want only render 4 times. How achieve this?
Thanks!
Like this:
<% for(var i = 0; i < data.length && i<4; i++ { %>
<p> <%= data[i].name %>
<p> <%= data[i].age %>
<% } %>
I would do something like:
<% for(var i = 0,max = (data.length > 4 ? 4 : data.length); i < max; i++ { %>
<p> <%= data[i].name %>
<p> <%= data[i].age %>
<% } %>
What this does is iterate the loop either 4 times or the length of data (whichever is shorter). If you don't have that conditional, you might get into an index out of bounds (if data.length is 2, for example).
Coding note: its good practice to declare max at the beginning of the for-loop. Its more readable and, for performance sakes, the lookup of the length attribute of data only happens once (instead of each iteration).
Update based on comments
To add other conditionals (such as if the pageName = 'home')
<% for(var i = 0,max = ( (data.length > 4 && pageName === 'home') ? 4 : data.length); i < max; i++ { %>
<p> <%= data[i].name %>
<p> <%= data[i].age %>
<% } %>

using if statement in each-loop

I have a loop
<% _.each(kw, function (x) { %>
now I want to use a if statement which checks a string
<% if ( <%=x%> == "condition") { %>
<div>..</div>
<% } %>
but doesn't work :( any ideas?
another question:
<script>
var maxKW = $("[id^='kalenderwoche']:first").attr("id");
</script>
is declared above and what would be the correct if statement when I want to use maxKW
<% if ( <%=x%> == maxKW) { %>
<div>..</div>
<% } %>
would be great if you could help me :)
<% if (x === "condition") { %>
<div>..</div>
<% } %>
Pass maxKW as attribute to the compiled template:
var maxKW = $("[id^='kalenderwoche']:first").attr("id");
var html = _.template('your html')({maxKW:maxKW});

Categories