How to handle callback responses in Ejs - javascript

In my Node.js application I want to call some async function in Ejs code and render the result. I tried:
<ul>
<% setTimeout(function () { %>
<% supplies = [1, 2, 3, 4]; %>
<% for(var i=0; i<supplies.length; i++) {%>
<li><%= supplies[i] %></li>
<% } %>
<% }, 1000) %>
</ul>
But it seems it doesn't work. Why doesn't it work and how I can fix it?

Ok, so it seems that Ejs doesn't support such a feature, but what we can do is to deasync the function using the deasync module.
<% function foo (timeout, callback) { %>
<% setTimeout(function () { %>
<% callback(null, [1, 2, 3, 4]; %>
<% }, timeout); %>
<% } %>
<% var Deasync = require("deasync") %>
<% var fooSync = Deasync(foo) %>
<ul>
<% supplies = fooSync(1000); %>
<% for(var i=0; i<supplies.length; i++) {%>
<li><%= supplies[i] %></li>
<% } %>
<% }, 1000) %>
</ul>

Related

How to place ejs in loops

People is an array of objects having firstName andlastName
<% for (var i = 0; i < people.length; i++) { %>
<%= firstName %> <%= lastName %>
<% } %>
Why end of %> is after loop { brakcet.
What is the need of ejs in end bracket of loop <% }%>

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>

jQuery if/else condition doesn't work fine in js.erb files

I'm running into problem with jQuery if/else condition here.
I perform a render partial in both the conditions, when I check by placing a debugger both these conditions get executed irrespective of if condition.
And every-time the partial from else condition is updated even though if condition is true.
<% if #associated_goal.present? %>
<% goal_status = #associated_goal.completion_percentage(#required_tasks) %>
var progress_bar_selector = "#cjs_show_goal_progress_bar_<%=#associated_goal.id.to_s%>";
var progress_from_goals = "#cjs_show_goal_progress_from_goals_<%=#associated_goal.id.to_s%>";
var goal_progress_display = ".cjs-mentoring-model-goal-progress-<%=#associated_goal.id.to_s%>";
if(progress_bar_selector != "")
{
$(progress_bar_selector).html("<%= escape_javascript(render :partial => "mentoring_model/goals/display_goal_progress", locals: { goal: #associated_goal, goal_status: goal_status, connection_and_reports_page: true }) %>");
var percentage_content = <% content_tag(:span, goal_status.to_s+"%", :class => "pull-right cjs-mentoring-model-goal-progress-#{#associated_goal.id}") %>;
jQuery(goal_progress_display).replaceWith(percentage_content);
}
else
{
$(progress_from_goals).html("<%= escape_javascript(render :partial => "mentoring_model/goals/display_goal_progress.html.erb", locals: {goal: #associated_goal, goal_status: goal_status}) %>");
}
<% end %>
This is the final solution which helped me to resolve my issue.
<% if #associated_goal.present? %>
<% goal_status = #associated_goal.completion_percentage(#required_tasks) %>
var progress_bar_selector = jQuery("#cjs_show_goal_progress_bar_<%=#associated_goal.id.to_s%>");
var progress_from_goals = jQuery("#cjs_show_goal_progress_from_goals_<%=#associated_goal.id.to_s%>");
var goal_progress_display = jQuery(".cjs-mentoring-model-goal-progress-<%=#associated_goal.id.to_s%>");
if(progress_bar_selector.length > 0){
progress_bar_selector.replaceWith("<%= j(render :partial => "mentoring_model/goals/display_goal_progress", locals: { goal: #associated_goal, goal_status: goal_status, connection_and_reports_page: true }) %>");
<% percentage_content = content_tag(:span, goal_status.to_s+"%", :class => "pull-right cjs-mentoring-model-goal-progress-#{#associated_goal.id}") %>
goal_progress_display.replaceWith("<%= j(percentage_content) %>");
}
else{
progress_from_goals.replaceWith("<%= j(render :partial => "mentoring_model/goals/display_goal_progress.html.erb", locals: {goal: #associated_goal, goal_status: goal_status}) %>")
}
<% end %>

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