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?
Related
I'm getting this error in my when I load my .ejs view:
ReferenceError: plants is not defined
All of my other views work with the includes and such.
plants.js router:
router.get('/plants', plantsController.getPlantsPage);
plants.js controller:
const Plant = require('../models/plant');
exports.getPlantsPage = (req, res, next) => {
res.render('plants', {
plants: plants,
pageTitle: 'Plants',
path: '/plants',
hasPlants: plants.length > 0
});
};
plant.js model:
module.exports = class Plant {
constructor(common_name, image_url, scientific_name) {
this.common_name = common_name;
this.image_url = image_url;
this.scientific_name = scientific_name;
}
}
plants.ejs:
<% if (hasPlants) { %>
<% for (let plant of plants) { %>
<div class="col s12 m4">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="<%= plant.image_url %>">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4"><%= plant.common_name %><i class="material-icons right">MORE</i></span>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4"><%= plant.common_name %><i class="material-icons right">CLOSE</i></span>
<p><%= plant.scientific_name %></p>
<p>Plant Details</p>
</div>
</div>
</div>
<% } %>
<% } else { %>
<div class="row">
<div class="col s12">
<p>No Plants Added!</p>
</div>
</div>
<% } %>
Thanks.
Did you make sure you set the plants variable? The error says plants is not defined. Try console.log() the variable.
Curently i'm doing a Node JS System which will display username and roles in navigation bar. I felt it is hard for me everytime i using GET request i need to include find by session ID in my Code. Is there a better solution?
Example of Get Request.
router.get('/admin_user',mid, function(req,res){
User.findById(req.session.userId).exec(function (error, user) {
if (error) {
return next(error);
} else {
console.log(user);
User.find({},function(err,users){
if (err) throw err;
res.render('admin_content/admin_user',{'users':users, user:user});
});
}
});
});
Dashboard Interface
<!DOCTYPE html>
<html lang="en">
<%- include('layout/head.ejs') %>.
<body class="sb-nav-fixed">
<%- include('layout/topbar.ejs') %>.
<div id="layoutSidenav">
<%- include('teacher_content/sidenav_admin.ejs') %>.
<div id="layoutSidenav_content">
<%- include('teacher_content/dashboard.ejs') %>.
<%- include('layout/footer.ejs') %>.
</div>
</div>
<%- include('layout/js.ejs') %>.
</body>
</html>
Sidebar Interface
<div id="layoutSidenav_nav">
<nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
<div class="sb-sidenav-menu">
<div class="nav">
<div class="sb-sidenav-menu-heading">Main Menu</div><a class="nav-link" href="/admin">
<div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>Dashboard
</a><a class="nav-link" href="admin_user">
<div class="sb-nav-link-icon"><i class="fas fa-female"></i></div>User Management
</a><a class="nav-link" href="timetable">
<div class="sb-nav-link-icon"><i class="fas fa-table"></i></div>Annual Time Table
</a><a class="nav-link" href="classroom">
<div class="sb-nav-link-icon"><i class="fas fa-graduation-cap"></i></div>Classroom
</a><a class="nav-link" href="subject">
<div class="sb-nav-link-icon"><i class="fas fa-pen"></i></div>Subject
</a>
</div>
</div>
<div class="sb-sidenav-footer">
<div class="small">Welcome</div>
<div class="small"><%= user.name %></div>
<div class="small" class="capitalize"><%= user.roles %></div>
</div>
</nav>
</div>
app.get("/navbar",(req,res)=>{
const user = req.user.id;
pool.query('SELECT *FROM cust where id=$1',[user],(err,data,rows)=>{
//when done wiyt connection,release it
if(!err){
res.render('navbar',{title:'User List', data: data.rows});
}else{
console.log(err);
}
//console.log('The data from car_details',data)
});
})
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>
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>
I'm working on a node project. And node is very new to me so sorry if I ask a lot of stupid questions.
I'm trying to show all of my topics on my index.ejs. The root file already shows them in the console log but I can't seem to get them to show in the view.
The view already loops and knows that there are 2 topics, but the content is empty.
This is my code from the routes/index.js
router.get('/', function(req, res, next) {
Topic.find({}).exec(function(err, topic)
{
if(err){
console.log('There ware no topics');
return next(err)
}
else
{
console.log('Whoop whoop there are some topics');
res.render('index', { topic: topic } );
console.log("Logging data: " + topic);
console.log("Loggin data title out db: " + topic.topicTitle);
console.log("Loggin data desc out db: " + topic.topicDescription);
console.log("Loggin data date out db: " + topic.topicDateCreated);
}
});
});
module.exports = router;
And here is how I try to show it in my views/index.ejs
<ul>
<% for(var i = 0; i < topic.length; i++) {%>
<li>
<div class="post animated fadeInLeft">
<div class="wrap-ut pull-left">
<div class="userinfo pull-left">
<div class="avatar">
<img src="images/avatar.jpg" alt="default avatar" />
<p class="moderator"> <%= topic.fbUsername %> </p>
</div>
</div>
<div class="posttext pull-left">
<h2 class="topictitle"><a href="/topicdetail/{topic_id}" <%= topic.topicTitle %> </a></h2>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</li>
<% } %>
</ul>
The topic variable is an array, so you need to pass the index in order to get the proper Topic document. For instance:
<%= topic[i].fbUsername %>
Your view should look like:
<ul>
<% for(var i = 0; i < topic.length; i++) {%>
<li>
<div class="post animated fadeInLeft">
<div class="wrap-ut pull-left">
<div class="userinfo pull-left">
<div class="avatar">
<img src="images/avatar.jpg" alt="default avatar" />
<p class="moderator"> <%= topic[i].fbUsername %> </p>
</div>
</div>
<div class="posttext pull-left">
<h2 class="topictitle"> <%= topic[i].topicTitle %> </h2>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
</li>
<% } %>
</ul>
UPDATE
You also forgot to close the tag here:
--------------------------------------------------------↴
<h2 class="topictitle"><a href="/topicdetail/{topic_id}" <%= topic[i].topicTitle %> </a></h2>
Closing the tag, I was able to see the titles:
<h2 class="topictitle"> <%= topic[i].topicTitle %> </h2>