I am unable to use the else if condition in my ejs file.
<% if(locals.user && (locals.user.id == post.user.id)){ %>
<small>
<a href="/comments/destroy/?comment_id=<%= comment.id %>&post_id=<%= post.user.id %>">
<i class="fa fa-trash"></i>
</a>
</small>
<% } else if(locals.user && (locals.user.id == post.user.id)){ %>
<small>
<a href="/comments/destroy/<%= comment.id %>">
<i class="fa fa-trash"></i>
</a>
</small>
<% } %>
It throws a syntax error for some reason. If I remove else from the code it works. How can I fix this?
Related
I am implementing a payment method in my e-commerce website using stripe and node.js , and I am not using a database only using JSON files to add my items to the website, but I am getting errors in ejs file. for rendering the page I used the fs module in node js. I wanted to know where I can define the items in ejs , or server , or HTML file
''' shop.ejs'''
<div class="box-container">
<% items.products.forEach(function(item){ %>
<div class="box" data-item-id="<%= item.id %>">
<div class="icons">
</div>
<img class="image" src="/image/<%= item.imgName %>" alt="">
<div class="content">
<div class="price"> ₹ <%= item.price %></div>
<h3 class="shop-item-title"><%= item.name %></h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<span> (50) </span>
</div>
</div>
</div>
<% }) %>
'''server.js'''
app.get('/shop', function(req, res){
fs.readFile('items.json', function(error, data){
if(error){
res.status(500).end()
}else {
res.render('shop.ejs', {
items: JSON.parse(data)
})
}
})
})
'''error'''
>> 172| <% items.products.forEach(function(item){ %>
173| <div class="box-container" data-item-id="<%= item.id %>">
174| <div class="box">
175| <div class="icons">
items are not defined
Did you pass the items data object to the ejs render function?
I made a page and I get from database an array of paths
eg:
images/file_name.jpg
and I want to display those images in a carousel from bootstrap
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" >
<div class="carousel-inner">
<% for(let picture of modelpics) { %>
<div class="carousel-item">
<img class="d-block w-100" src="/<%= picture %>" >
</div>
<% }%>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Data are fetched correctly from db. I'm working with EJS, NodeJS and Mongoose. Can you please tell me what should I do for this to work? I copied the code from Boostrap Page , but it's not working, I also deleted that active class, maybe that's why, but how can I programatically add new "Carousel Item " after that active class? If I do ' picture[0] ' it wont work in that " FOR ".
Thank you very much!
running in same issue, using node js, ejs and mysql. Getting individual arrays of paths representing images to show in a bs carousel.
Therefore you need the item-active and item class respectively two image, src classes. To differentiate while looping put in an "if - else" clause running a var like i==0 -> active class, else -> other items for indexing array inputs.
Hope this is a start.
works for me:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<% for (var pfad of players){%>
<% if (i==0) {%>
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<%} else {%>
<li data-target="#carouselExampleIndicators" data-slide-to="<% i %>"></li>
<!--<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>-->
<% } %>
<% i = i+1; %>
<% } %>
</ol>
<!--<ol class="carousel-indicators">-->
<div class="carousel-inner">
<% var i = 0; %>
<% for(var pfad of players){%>
<% if (i==0) {%>
<!--<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>-->
<div class="carousel-item active">
<img class="d-block w-100" src="<%= '/assets/img/' + pfad.image_gallery %>" alt="First slide">
</div>
<%} else {%>
<!--<li data-target="#carouselExampleIndicators" data-slide-to="<% i %>"></li>-->
<div class="carousel-item">
<img class="d-block w-100" src="<%= '/assets/img/' + pfad.image_gallery %>" alt="Second slide">
</div>
<% } %>
<% i = i+1; %>
<% } %>
</div>
<!--</ol>-->
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
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!
Here i was trying for image to load, If image comes then it should show else default image. I have tried but no result
<% getdata.forEach((user) => { %>
<div class="col-md-4 col-sm-4">
<div class="service-box">
<% if ( typeof user.image == 'undefined' ) { %>
<img src="images/logo.png" class="" width='260' height='220'>
<% }else { %>
<img src="<%= user['image'] %>" class="">
<% } %>
</div>
</div>
<% }) %>
user.image may also be null or an empty string, in which case it doesn't pass your test for undefined.
Try this:
<% if (! user.image) { %>
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