I have an array
{"count":3,"rows":[{"p_id":"P1","gender":"M","patient_name":"a"},{"p_id":"D1","gender":"M","patient_name":"Davin"},{"p_id":"M1","gender":"M","patient_name":"Marv"}]}
Which I render from my express to my ejs file. I have a profile card in which I need to display each string in list. so for 3 strings 3 cards.
my ejs file:
<ul>
<% for(var i= 0 ; i < userData.length; i++) {%>
<li>
<span><%=userData[i].count %>
</li>
<ul>
<% for(var j=0 ; j < userData[i].rows.length; j++) {%>
<li>
<span><%=userData[i].rows[j].p_id %>
</li>
<% } %>
</ul>
<% } %>
</ul>
You haven't defined how you're rendering the EJS file so I'm going to guess that it's correct.
I'd suggest using the .forEach(...) function when looping through an array. See example below.
<% if (locals.userData) { %> <!-- Make sure userData is defined -->
<ul>
<% userData.forEach(user => { %> <!-- Loop through the array -->
<li>
<span><%= user.count %>
</li>
<ul>
<% user.rows.forEach(row => { %> <!-- Loop through the rows -->
<li>
<span><%= row.p_id %>
</li>
<% }); %>
</ul>
<% }); %>
</ul>
<% } %>
Related
<ul>
<% if ('contacts'.length) { %> <% 'contacts'.forEach(({ link, name }) => { -%>
<li>
<%= name %>
</li>
<% }) %> <% } %>
</ul>
I have a syntacxis problem with this part of ejs file.What would be the correct syntax?
I try ejslint,but he doesnt support me
Can someone help me convert this EJS code to PUG? I'm trying to learn PUG and I'd like to implement this piece of code; it's for pagination. Everything works fine in EJS but I haven't quite grasped how to write conditionals and loops in PUG just yet . Below is a snippet of the code:
</div>
<% if (pages > 0) { %>
<ul class="pagination text-center">
<% if (current == 1) { %>
<li class="disabled"><a>First</a></li>
<% } else { %>
<li>First</li>
<% } %>
<% var i = (Number(current) > 5 ? Number(current) - 4 : 1) %>
<% if (i !== 1) { %>
<li class="disabled"><a>...</a></li>
<% } %>
<% for (; i <= (Number(current) + 4) && i <= pages; i++) { %>
<% if (i == current) { %>
<li class="active"><a><%= i %></a></li>
<% } else { %>
<li><%= i %></li>
<% } %>
<% if (i == Number(current) + 4 && i < pages) { %>
<li class="disabled"><a>...</a></li>
<% } %>
<% } %>
<% if (current == pages) { %>
<li class="disabled"><a>Last</a></li>
<% } else { %>
<li>Last</li>
<% } %>
</ul>
<% } %>
</div>
All research I've done point me to either HTML to EJS or HTML to PUG, or vice versa. Any help will be much appreciated.
I am sending three arrays from my node server to .ejs page and I want to display as like, Image
But I am ending up like,Image
Here is The code,
<div class="webvUI-panel__bd">
<a href="javascript:void(0);" class="webvUI-media-box webvUI-media-box_appmsg">
<% for(var i=0; i < image.length; i++) { %>
<div class="webvUI-media-box__hd">
<img class="webvUI-media-box__thumb" src="<%= image[i]%>" alt="">
</div>
<% } %>
<div class="webvUI-media-box__bd">
<% for(var i=0; i < food.length; i++) { %>
<h4 class="webvUI-media-box__title">
<%= food[i] %>
</h4>
<% } %>
<% for(var i=0; i < price.length; i++) { %>
<p class="webvUI-media-box__desc">
<%= price[i] %>$
</p>
<% } %>
</div>
</a>
</div>
Since every object has the same attributes such as image, food and price. If you define all these attributes within an object, you could group them together as in the below. Instead of sending them seperately, you can model them inside of an object and then you can loop through that object.
<div class="webvUI-panel__bd">
<a href="javascript:void(0);" class="webvUI-media-box webvUI-media-box_appmsg">
<% object.forEach(function(obj)) { %>
<div class="webvUI-media-box__hd">
<img class="webvUI-media-box__thumb" src="<%= obj.image[i]%>" alt="">
<%= obj.food[i] %>
<%= obj.price[i] %>$
</div>
<% } %>
</a>
</div>
NodeJS, Mongoose
<% for(var i = 0; i < articles.length; i++){ %>
<ul class="list-group">
<li class="list-group-item">
<a href="/article/<%=articles._id%>">
<%= articles[i].title %>
</a>
</li>
</ul>
<% } %>
<% include partials/html-footer %>
How do I make it go to /articles/articles._id? I've tried -
<a href="/article/"+<%=articles._id%>>
as well. If there's anything else you need to see, let me know. Don't know what else to post.
You are missing the array index:
<a href="/article/<%= articles[i]._id %>">
I have a results variable that is an array of objects. I carry the results variable from my javascript file to my main route file. I am trying to render my page to display lists of each object in my template ejs file. I am able to list everything fine, but the lists are coming out as [object object] instead of the actual words that are in the objects. How do I get this to display as strings in my template file?
This is my route file:
app.get('/announcement', function(req,res){
var getAnnouncements = require('../public/javascripts/announcement.js'); //Load the module, get the name of the script file
//define the functions here
var onSpreadsheetSuccess = function (results) { //result is announcementArray
//add results list to template);
res.render('announcement', {title: "Announcement page", results: results});
}
getAnnouncements.loadSheet(onSpreadsheetError, onSpreadsheetSuccess); //call the function from script with the parameters passed
})
This is what I am doing in my template ejs file:
<ul>
<% results.forEach(function(result){ %>
<li><%= result %></li>
<% }); %>
</ul>
<ul>
<% for(var i=0; i<results.length; i++) { %>
<li>
<%= results[i] %>
</li>
<% } %>
</ul>
This will show list of id of your results, just change _id by your property of objects as you want to show.
<ul>
<% results.map((result)=>{ %>
<li>
<%= result._id %>
</li>
<% }) %>
</ul>
My answer is as follows. I changed one line from the answer by other person.
<ul>
<%for (var result in results){%>
<li><%=result%>:<%=results[result]%></li>
<%}%>
</ul>
With modern JS it can be simplified to
<ul>
<% for (var result of results) { %>
<li>
<%= result %>
</li>
<% } %>
</ul>
You should be fine with this:
<ul>
<% for(let i = 0; i < results.length; i++){ %>
<li><%= results[i].title %></li>
<% } %>
</ul
or when you rather like to use the forEach:
<ul>
<% results.forEach( function (result) { %>
<li><%= result.title %></li>
<% }) %>
</ul
the object you push(ed) into your array:
const result = {
title: anyTitle,
input: anyInput
}
Try this:
<ul>
<%for (var result in results){%>
<li><%=result%></li>
<%}%>
</ul>