Node.js - rendering a undefined variable - node.js

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

Why is my ejs outputting the actual html code and not rendering it as html?

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?

error in nodejs using sripe for payment for website

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"> &#8377 <%= 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?

How can I use JSON image file object on ejs

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.

How do I return the blogs in my database and render them by sorting them according to the most recent?

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.

Why is my JS logic appearing on index (using ejs/express)

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>

Resources