How to array of objects in template ejs? - node.js

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>

Related

File type:ejs.I have a problem with syntacxis

<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

how to display array values in a list using ejs

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>
<% } %>

How do I implement an EJS template in PUG?

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.

How to concatenate HREF to get id from database?

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 %>">

a property is not defined ejs: nodejs

I was following a tutorial and got stuck here. Everything looks ok to me. Still I am getting this error. Can some one point me to the right direction.
memberName is not defined
<% for(var i=0; i < notes.length; i++) { %>
<div class="list-group-item">
<div>Note from <em><strong><%=memberName[i]%></strong></em> on:
<%= createdOn.toDateString() %>
<strong><%= project[i] %></strong></div>
<div><strong>Work yesterday:</strong>
<%= workYesterday[i] %>
</div>
<div><strong>Work today:</strong>
<%= workToday[i] %>
</div>
<div><strong>Impediment:</strong>
<%= impediment[i] %>
</div>
</div>
<%}%>
Controller code:
exports.list = function (req, res) {
var query = Standup.find();
query.limit(12)
.exec(function (err, results) {
console.log(results);
res.render('index', { title: 'Standup - List', notes: results });
});
};

<%=memberName[i]%> in the ejs file mean "when I ll send the ejs, I ll replace that by the value of memberName".
But in your controller, you don t provide it, which block ejs.
In the controller, you should have something like:
res.render('index', {
title: 'Standup - List',
notes: results,
memberName: memberName //<--
});
When this one will be fixed, you ll also have to provide createdOn, project, workYesterday, workToday, workTomorrow and impediment.

<%= is a EJS tag for evaluating values in HTML.
<%= memberName %> will output the value of variable memberName in your HTML code. Thus you need to pass the parameter memberName while you are rendering the html page. You have missed out the parameter.
Your controller code should look like:
exports.list = function (req, res) {
var query = Standup.find();
query.limit(12)
.exec(function (err, results) {
console.log(results);
res.render('index', { title: 'Standup - List', notes: results, memberName: 'Test Member Name' });
});
};

You're probably looking for this:
<% for(var i=0; i < notes.length; i++) { %>
<div class="list-group-item">
<div>Note from <em><strong><%= notes[i].memberName %></strong></em> on:
<%= notes[i].createdOn.toDateString() %>
<strong><%= notes[i].project %></strong></div>
<div><strong>Work yesterday:</strong>
<%= notes[i].workYesterday %>
</div>
<div><strong>Work today:</strong>
<%= notes[i].workToday %>
</div>
<div><strong>Impediment:</strong>
<%= notes[i].impediment %>
</div>
</div>
<%}%>
Which can be further reduced to this:
<% notes.forEach(function(note) { %>
<div class="list-group-item">
<div>Note from <em><strong><%= note.memberName %></strong></em> on:
<%= note.createdOn.toDateString() %>
<strong><%= note.project %></strong></div>
<div><strong>Work yesterday:</strong>
<%= note.workYesterday %>
</div>
<div><strong>Work today:</strong>
<%= note.workToday %>
</div>
<div><strong>Impediment:</strong>
<%= note.impediment %>
</div>
</div>
<% }) %>

Resources