Maybe the name of the title is wrong but I have a specific problem. The thing I want to do is to show possibilities of editing and deleting a post if a user is an admin. I have a local variable called currentUser that holds data specifically username, password, and role. This line of code works fine if the user is logged in but the problem that I have is when there is no data in local variable. if i give a statement if(currentUser == undefined or null) i still get a error and the site is not rendering(error that i get is role is not defined). Since I'm still new to this I believe currentUser data is coming from a middleware function from passport js. My question is how to render a page when currentUser is undefined.
Thanks in advance!
<% menu.forEach(function(menu){ %>
<div class="col-lg-4 col-md-6 col-12 p-2 m-0 d-inline-block">
<div class="card" style="width: 22rem; ">
<img class="card-img-top img-fluid" src="<%= menu.pictureUrl %>" alt="Card image cap">
<div class="card-body">
<div style="height: 9rem;">
<h5 class="card-title"><%= menu.meal %></h5>
<div style="height: 4rem;">
<p class="card-text"><%= menu.description %></p>
</div>
<div style="height: 4rem;">
<p class="card-text"><strong><%=menu.price %>,00 Kn</strong></p>
</div>
</div>
<% if(currentUser.role == undefined){ %>
Stavi u košaricu
<%} else if(currentUser.role === "admin"){ %>
Uredi
<div class="d-inline">
<form class="d-inline" action="/menu/<%=menu._id%>?_method=DELETE" method="post"><button
class="btn btn-danger">Obriši</button></form>
</div>
<%}%>
</div>
</div>
</div>
<% }); %>
</div>
</div>
</div>
Related
I am doing some simple validation on a form and using bootstrap for alert dismissing. I have an ejs partial for displaying error messages. When trying to render the error message its just showing the actual block of code.
Here is my partials ejs:
<% if(typeof errors != 'undefined') { %>
<% errors.forEach(error => { %>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<%= error.msg %>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<% }) %>
<% } %>
Here is where I include that partial to the register.ejs file I have
<%= include ("./partials/messages") %>
<form action="/users/register" method="POST">
<div class="form-group">
<label for="name">Name</label>
<input
type="name"
id="name"
name="name"
class="form-control"
placeholder="Enter Name"
value="<%= typeof name != 'undefined' ? name : '' %>"
/>
Here is a screenshot of what it is outputting:
Why is it showing the actual code instead of rendering as HTML?
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 want to use an image on my ejs code, but I use loop with JSON array, so I want to make image url to object of JSON.
I put the JSON object way on the source code.
{
"champion" :
[
{
"id": "266",
"key": "Aatrox",
"name": "Aatrox",
"origin": ["Demon"],
"class": ["Blademaster"],
"cost": 3,
"img" : "https://ddragon.leagueoflegends.com/cdn/9.17.1/img/champion/Aatrox.png",
This json file's local data name is "cdata".
<!-- Champion Data -->
<% for(var i=0; i<cdata.champion.length; i++){ %>
<div class="col-xl-12 col-md-6 mb-12">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-3"><h3><%= cdata.champion[i].name %></h3></div>
<img src= <%= "cdata.champion[0].img" %> class="ChampionImage__ChampImage-xj39xo-2 fhAQxz">
<div class="h5 mb-0 font-weight-bold text-gray-800"><%= cdata.champion[i].key %></div>
</div>
<div class="col-auto">
<i class="fas fa-calendar fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<% } %>
My website shows broken image https://ykyuen.files.wordpress.com/2015/10/svg-image-broken.png
after that, I changed the code to
<img src= "<%= cdata.champion[0].img %>" class="ChampionImage__ChampImage-xj39xo-2 fhAQxz">
and
<img src= <%= cdata.champion[0].img %> class="ChampionImage__ChampImage-xj39xo-2 fhAQxz">
but it still doesn't work.
You can simplify your code from using for loop to use .forEach Here is docs
<% cdata.champion.forEach(function(champion){ %>
<div class="col-xl-12 col-md-6 mb-12">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-3"><h3><%= champion.name %></h3></div>
<img src="<%= champion.img %>" class="ChampionImage__ChampImage-xj39xo-2 fhAQxz">
<div class="h5 mb-0 font-weight-bold text-gray-800"><%= champion.key %></div>
</div>
<div class="col-auto">
<i class="fas fa-calendar fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<% }) %>
In my case, I've used <img src="<%= image %>" and it worked.
Of course, the code should work only in case of correctly parsed JSON.
I have some blog posts in my Database (MongoDB) which I want to render to the screen by sorting them according to the most recent post. Please I need a solution or tutorial link to the solution. Thanks in advance
I have tried using the .toDateString() JavaScript inbuilt method which sometimes returns the most recent and sometimes doesn't for me.
<div id="top2">
<div class="row">
<% blogs.forEach((blog) => { %>
<div class="col-md-3 col-sm-6 thumb">
<img src="<%= blog.image %>" />
<div class="caption">
<h3><%= blog.title %></h3>
<p><%- blog.content.substring(0, 100) %>...</p>
<p id="created"><span id="author"><%= blog.author.username %></span> - <%= blog.created.toDateString() %></p>
</div>
<br>
<br>
</div>
<% }) %>
</div>
</div>
</div>
I expect the returned blogs from the database to be sorted by the date created.
im having an issue understanding why my JS is appearing on my layout. Im currently following along with a tutorial on sitepoint creating forms with in express and when i render the layout.ejs + index.ejs with contact as a partial, the logic on partial is appearing on the page as text.
here is the code:
<div class="form-header">
<% if (Object.keys(errors).length === 0) { %>
<h2>Send us a message aa</h2>
<% } else { %>
<h2 class="errors-heading">Oops, please correct the following:</h2>
<ul class="errors-list">
<% Object.values(errors).forEach(error => { %>
<li><%= error.msg %></li>
<% }) %>
</ul>
<% } %>
</div>
<form method="post" action="/contact" novalidate>
<div class="form-field <%= errors.message ? 'form-field-invalid' : ''
%>">
<label for="message">Message</label>
<textarea class="input" id="message" name="message" rows="4"
autofocus><%= data.message %></textarea>
<% if (errors.message) { %>
<div class="error"><%= errors.message.msg %></div>
<% } %>
</div>
<div class="form-field <%= errors.email ? 'form-field-invalid' : '' %>">
<label for="email">Email</label>
<input class="input" id="email" name="email" type="email" value="<%=
data.email %>" />
<% if (errors.email) { %>
<div class="error"><%= errors.email.msg %></div>
<% } %>
</div>
<div class="form-actions">
<button class="btn" type="submit">Send</button>
</div>
</form>