I am trying to display json data on a website using view engine (ejs) but I am facing following error Cannot read property 'firstname' of undefined
this is my program
node.js
io.readEmp().then(function(data){
res.render('Dashboard',{data:data});
}).catch(function(err){console.log(err.message);});
index.ejs
<ul class="list-group list-group-flush">
<% for(var key in data){%>
<li class="list-group-item"><%= data.key.firstname %></li><%}%>
</ul>
jsonfile
{
"id01":{"firstname":"abc","lastname":"xy"},
"id02":{"firstname":"pqr","lastname":"xy"}
}
error
Cannot read property 'firstname' of undefined
If you have data as an object like you display then 'key' will be the item key and you need to use the key access notation for an object thusly:
<ul class="list-group list-group-flush">
<% for(var key in data){%>
<li class="list-group-item"><%= data[key].firstname %></li><%}%>
</ul>
'key' for the first item will be "id01", so this is equivalent (on the first pass) for saying data.id01.firstname.
Like I was trying to say earlier. Turning an Object into an array is better. Because if you are using a hashMap structure these can be deeply nested. Example being an object like the below
{"id01":{
"address": {
"street": "123 Main St",
"city": "San Francisco",
"state": "CA"
},
"dogs": {
"spot": {
"type": "German Shepherd",
"foods": {
"soft" : {
"Purina": "Cat Chow"
},
"unconventional": {
"vomit": "Vomit",
"squirrels" : "Squirrels"
}
}
},
"spike": {
"type": "Doberman"
}
}
}}
will result in something looking like this using the method suggested.
<ul class="list-group list-group-flush">
<% for(var key in data){%>
<li class="list-group-item"><%= data[key].firstname %></li>
<li class="list-group-item"><%= data[key].address.street %></li>
<li class="list-group-item"><%= data[key].address.city %></li>
<li class="list-group-item"><%= data[key].address.state %></li>
<li>
<ul>
<% for(var dogKey in data[key].dogs){%>
<li class="list-group-item"><%= data[key].dogs[dogKey].type %></li>
<li>
<ul>
<% for(var dogFoodKey in data[key].dogs[dogKey].foods){%>
<li class="list-group-item"><%= data[key].dogs[dogKey].foods[dogFoodKey]. %></li>
<%}%>
</ul>
</li>
<%}%>
</ul>
</li>
<%}%>
</ul>
It is terribly untidy. It needs a serious refactoring. As a practice you should not repeat yourself.
Instead, I would suggest the following which re-writes the object into an array as it receives it.
<ul class="list-group list-group-flush">
<% for(var person in Object.values(data)){%>
<li class="list-group-item"><%= person.firstname %></li>
<li class="list-group-item"><%= person.address.street %></li>
<li class="list-group-item"><%= person.address.city %></li>
<li class="list-group-item"><%= person.address.state %></li>
<li>
<ul>
<% for(var dog in person.dogs){%>
<li class="list-group-item"><%= dog.type %></li>
<li>
<ul>
<% for(var food of Object.values(dog.foods)){%>
<li class="list-group-item"><%= food %></li>
<%}%>
</ul>
</li>
<%}%>
</ul>
</li>
<%}%>
</ul>
you need to make few changes as below in your index.ejs file
<ul class="list-group list-group-flush">
<% for(var key in data){%>
<li class="list-group-item">
<%= key.firstname %>
</li>
<%}%>
</ul>
Note: you have to use key.firstname and not data.key.firstname
Related
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>
<% } %>
So the title might not be the best description of my problem because I don't really know how to sum up the problem. I have a forEach loop for each event in my database and each one is classified as type = to either "trip", "ropes course", or "other". I have a section for each type of event, but I would like a way where if there are no events in the section I can not display the bannertron header and if there are no events in the whole database I can display different HTML. My code also seems very WET and I would love any suggestions on how to DRY up this page.
<% include partials/header %>
<div class="image-text">
<img src="../images/trip-photo.jpg" class="bannertron">
<div class="centered">Upcoming Trips</div>
</div>
<div class="container event">
<% events.forEach(function(event){ %>
<% if(event.type === "trip"){ %>
</br>
<h4><strong><%= event.title %></strong></h4>
<span><%= event.startdate %> - </span>
<span><%= event.enddate %></span>
<h6><strong>Location: </strong><%= event.location %></h6>
<p><%= event.description %></p>
<% if(currentUser && (currentUser.admin === true)){ %>
Edit
<form action="/calendar/<%= event._id %>?_method=DELETE" method="POST">
<button class="btn btn-danger">Delete</button>
</form>
<% } %>
<hr class="event-hr">
<% } %>
<% }); %>
</div>
<div class="image-text">
<img src="../images/climbing-photo.jpg" class="bannertron">
<div class="centered">Upcoming Climbing Days</div>
</div>
<div class="container event">
<% events.forEach(function(event){ %>
<% if(event.type === "ropescourse"){ %>
</br>
<h4><strong><%= event.title %></strong></h4>
<span><%= event.startdate %> - </span>
<span><%= event.enddate %></span>
<h6><strong>Location: </strong><%= event.location %></h6>
<p><%= event.description %></p>
<% if(currentUser && (currentUser.admin === true)){ %>
Edit
<form action="/calendar/<%= event._id %>?_method=DELETE" method="POST">
<button class="btn btn-danger">Delete</button>
</form>
<% } %>
<hr class="event-hr">
<% } %>
<% }); %>
</div>
<div class="image-text">
<img src="../images/other-photo.jpg" class="bannertron">
<div class="centered">Other Events</div>
</div>
<div class="container event">
<% events.forEach(function(event){ %>
<% if(event.type === "other"){ %>
<h4><strong><%= event.title %></strong></h4>
<span><%= event.startdate %> - </span>
<span><%= event.enddate %></span>
<h6><strong>Location: </strong><%= event.location %></h6>
<p><%= event.description %></p>
<% if(currentUser && (currentUser.admin === true)){ %>
Edit
<form action="/calendar/<%= event._id %>?_method=DELETE" method="POST">
<button class="btn btn-danger">Delete</button>
</form>
<% } %>
<hr class="event-hr">
</br>
<% } %>
<% }); %>
</div>
<% include partials/footer %>
Ideally, I would be able to loop through the events, check which type it is, put it in its respective area, and if there are none of a type, display some text like "no events scheduled" and if there are no events in total, display something else.
If this was me, I would split the events up into 3 different arrays in the node file, instead of sorting it all out inside of an ejs file. The Array.prototype.filter command would be useful for this. The nice thing about it is it returns a new array, with only items that return true for the function you pass in. It does not alter the original array, just passes a new one in. You can do something like
var trips = events.filter(function(event){
return event.type == "trip";
});
//do similar for "rope course", and for "other" you could do something like
return event.type != "trip" && event.type != "rope course"
// for the return statement.
You can do a
if(events.length == 0){
// show different html file
} else {
// show the html file with events, passing in the arrays
}
Make sure you pass all the arrays into the ejs file. For each array, you can do a similar
if(trips.length != 0){
// show banner and stuff
}
And do it for all three.
Hope this helps!
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 love using Hexo.. :)
I've setup custom page. Is it possible to show all post in my page as paginated?
Using site.posts got me all post without pagination.
What should I do to get all post as paginated from page?
Thanks.
In the main configuration file _config.yml, there is a per_page variable to allow you to choose how many post you want ot display per page.
Create a template, index.ejs for example :
<% page.posts.each(function(post) { %>
<article>
// do what you have to do to display each post
</article>
<% }) %>
<%- partial('pagination', {type: 'page'}) %>
As you can see, We use the page variable to get 7 posts.
After that, create an other template pagination.ejs, that allow you to navigate through the page :
<div class="pagination-bar">
<ul class="pagination">
<% if (page.prev) { %>
<li class="pagination-prev">
<% if (page.prev === 1) { %>
<a class="btn btn--default btn--small" href="<%- url_for(' ') %>">
<% } else { %>
<a class="btn btn--default btn--small" href="<%- url_for(page.prev_link) %>">
<% } %>
<i class="fa fa-angle-left text-base icon-mr"></i>
<span><%= __('pagination.newer_posts') %></span>
</a>
</li>
<% } %>
<% if (page.next) { %>
<li class="pagination-next">
<a class="btn btn--default btn--small" href="<%- url_for(page.next_link) %>">
<span><%= __('pagination.older_posts') %></span>
<i class="fa fa-angle-right text-base icon-ml"></i>
</a>
</li>
<% } %>
<li class="pagination-number"><%= _p('pagination.page', page.current) + ' ' + _p('pagination.of', page.total) %></li>
</ul>
</div>
I wrote a Hexo theme : Tranquilpeak, I recommend you to check the source code to understand how I built it and of course read the official Hexo documentation
Does anyone know of a prettier way to output a class name to a list element (in this case) using EJS?
<% var active = "active"; %>
<div class="header">
<ul class="nav nav-pills pull-right">
<li class="<% if(req.path == '/user') { %><%= active %><% } %>">Users</li>
<li class="<% if(req.path == '/about') { %><%= active %><% } %>">About</li>
<li class="<% if(req.path == '/contact') { %><%= active %><% } %>">Contact</li>
</ul>
<h3 class="text-muted">Sails Tutorial App</h3>
</div></li>
You can do it like this :)
<li class="<%= (req.path == '/user') ? 'active' : '' %>">Users</li>
It's a little bit prettier I guess...