Making my first steps in vue. I am crashing in importing a .json file. This job concernes a small shop. Goal of this paragraph is to enter 4 products in the shop. The productfiles are imported with an Axios hook. But the Vue Dev Tool errors an undefined (see picture). When loading the website the div with v-else is automatically loaded.
The products.json files is nested in the same folder as index.html. http://localhost:8000/products.json shows me the .json file.
Here you 'll find all the code for this small shop. Even with a copy/paste of this code mine is not working. I also made it smaller with the relevant code:
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Pet Depot</title>
<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/app.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div id="app">
<header>
<div class="navbar navbar-default">
<div class="navbar-header">
<h1>{{ sitename }}</h1>
</div>
<div class="nav navbar-nav navbar-right cart">
<button type="button" class="btn btn-default btn-lg" v-on:click="showCheckout">
<span class="glyphicon glyphicon-shopping-cart">{{ cartItemCount}}</span> Checkout
</button>
</div>
</div>
</header>
<main>
<div v-if="showProduct"> <!--not working-->
<div v-for="product in sortedProducts">
<div class="row">
<div class="col-md-5 col-md-offset-0">
<figure>
<img class="product" v-bind:src="product.image">
</figure>
</div>
<div class="col-md-6 col-md-offset-0 description">
<h1 v-text="product.title"></h1>
<p v-html="product.description"></p>
<p class="price">
{{product.price | formatPrice}}
</p>
<button class=" btn btn-primary btn-lg" v-on:click="addToCart(product)" v-if="canAddToCart(product)">Add to cart</button>
<button disabled="true" class=" btn btn-primary btn-lg" v-else>Add to cart</button>
<span class="inventory-message" v-if="product.availableInventory - cartCount(product.id) === 0">
All Out!
</span>
<span class="inventory-message" v-else-if="product.availableInventory - cartCount(product.id) < 5">
Only {{product.availableInventory - cartCount(product.id)}} left!
</span>
<span class="inventory-message" v-else>
Buy Now!
</span>
<div class="rating">
<span v-bind:class="{'rating-active' :checkRating(n, product)}" v-for="n in 5">
☆
</span>
</div>
</div>
<!-- end of col-md-6-->
</div>
<!-- end of row-->
<hr />
</div>
<!-- end of v-for-->
</div>
<!-- end of showProduct-->
<div v-else>
<!--skipped this part-->
</div>
</main>
</div>
<!-- end of app-->
</div>
<script type="text/javascript">
var APP_LOG_LIFECYCLE_EVENTS = true;
var webstore = new Vue({
el: '#app',
data: {
sitename: "Vue.js Pet Depot",
showProduct: true,
a: false,
states: []
},
order: []
},
products: [],
cart: []
},
methods: {
checkRating(n, myProduct) {
return myProduct.rating - n >= 0;
},
addToCart(aProduct) {
this.cart.push(aProduct.id);
},
showCheckout() {
this.showProduct = this.showProduct ? false : true;
},
submitForm() {
alert('Submitted');
},
canAddToCart(aProduct) {
//return this.product.availableInventory > this.cartItemCount;
return aProduct.availableInventory > this.cartCount(aProduct.id);
},
cartCount(id) {
let count = 0;
for (var i = 0; i < this.cart.length; i++) {
if (this.cart[i] === id) {
count++;
}
}
return count;
}
},
computed: {
cartItemCount() {
return this.cart.length || '';
},
sortedProducts() {
if (this.products.length > 0) {
let productsArray = this.products.slice(0);
console.log(productsArray);
console.log(this.products);
function compare(a, b) {
if (a.title.toLowerCase() < b.title.toLowerCase())
return -1;
if (a.title.toLowerCase() > b.title.toLowerCase())
return 1;
return 0;
}
return productsArray.sort(compare);
}
}
},
filters: {
formatPrice(price) { //#B
..
}
},
beforeCreate: function () { //#B
if (APP_LOG_LIFECYCLE_EVENTS) { //#B
..
},
created: function () {
axios.get('./products.json')
.then((response) => {
this.products = response.data.products;
console.log(this.products);
});
},
beforeMount: function () {
..
},
mounted: function () {
..
},
beforeUpdate: function () {
..
},
updated: function () {
..
},
beforeDestroyed: function () {
..
},
destroyed: function () {
..
}
});
</script>
</body>
</html>
I tried out the same code here and it's working fine, i had did axios call to this json file :
https://raw.githubusercontent.com/ErikCH/VuejsInActionCode/master/chapter-05/products.json
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Pet Depot</title>
<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/app.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div id="app">
<header>
<div class="navbar navbar-default">
<div class="navbar-header">
<h1>{{ sitename }}</h1>
</div>
<div class="nav navbar-nav navbar-right cart">
<button type="button" class="btn btn-default btn-lg" v-on:click="showCheckout">
<span class="glyphicon glyphicon-shopping-cart">{{ cartItemCount}}</span> Checkout
</button>
</div>
</div>
</header>
<main>
<div v-if="showProduct">
<div v-for="product in sortedProducts">
<div class="row">
<div class="col-md-5 col-md-offset-0">
<figure>
<img class="product" v-bind:src="product.image">
</figure>
</div>
<div class="col-md-6 col-md-offset-0 description">
<h1 v-text="product.title"></h1>
<p v-html="product.description"></p>
<p class="price">
{{product.price | formatPrice}}
</p>
<button class=" btn btn-primary btn-lg" v-on:click="addToCart(product)" v-if="canAddToCart(product)">Add to cart</button>
<button disabled="true" class=" btn btn-primary btn-lg" v-else>Add to cart</button>
<span class="inventory-message" v-if="product.availableInventory - cartCount(product.id) === 0">All Out!
</span>
<span class="inventory-message" v-else-if="product.availableInventory - cartCount(product.id) < 5">
Only {{product.availableInventory - cartCount(product.id)}} left!
</span>
<span class="inventory-message" v-else>Buy Now!
</span>
<div class="rating">
<span v-bind:class="{'rating-active' :checkRating(n, product)}" v-for="n in 5">☆
</span>
</div>
</div>
<!-- end of col-md-6-->
</div>
<!-- end of row-->
<hr />
</div>
<!-- end of v-for-->
</div>
<!-- end of showProduct-->
<div v-else>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-info">
<div class="panel-heading">Pet Depot Checkout</div>
<div class="panel-body">
<div class="form-group">
<div class="col-md-12">
<h4>
<strong>Enter Your Information</strong>
</h4>
</div>
</div>
<div class="form-group">
<div class="col-md-6">
<strong>First Name:</strong>
<input v-model.trim="order.firstName" class="form-control" />
</div>
<div class="col-md-6">
<strong>Last Name:</strong>
<input v-model.trim="order.lastName" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<strong>Address:</strong>
</div>
<div class="col-md-12">
<input v-model.trim="order.address" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<strong>City:</strong>
</div>
<div class="col-md-12">
<input v-model.trim="order.city" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<strong>State:</strong>
<select v-model="order.state" class="form-control">
<option disabled value="">State</option>
<option v-for="(state, key) in states" v-bind:value="state">
{{key}}
</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-4">
<strong>Zip / Postal Code:</strong>
<input v-model.number="order.zip" class="form-control" type="number" />
</div>
</div>
<div class="form-group">
<div class="col-md-6 boxes">
<input type="checkbox" id="gift" value="true" v-bind:true-value="order.sendGift" v-bind:false-value="order.dontSendGift" v-model="order.gift">
<label for="gift">Ship As Gift?</label>
</div>
</div>
<!-- end of form-group -->
<div class="form-group">
<div class="col-md-6 boxes">
<input type="radio" id="home" v-bind:value="order.home" v-model="order.method">
<label for="home">Home</label>
<input type="radio" id="business" v-bind:value="order.business" v-model="order.method">
<label for="business">Business</label>
</div>
</div>
<!-- end of form-group-->
<div class="form-group">
<div class="col-md-6">
<button type="submit" class="btn btn-primary submit" v-on:click="submitForm">Place Order</button>
</div>
<!-- end of col-md-6-->
</div>
<!-- end of form-group-->
<div class="col-md-12 verify">
<pre>
First Name: {{order.firstName}}
Last Name: {{order.lastName}}
Address: {{order.address}}
City: {{order.city}}
Zip: {{order.zip}}
State: {{order.state}}
Method: {{order.method}}
Gift: {{order.gift}}
</pre>
</div>
<!-- end of col-md-12 verify-->
</div>
<!--end of panel-body-->
</div>
<!--end of panel panel-info-->
</div>
<!--end of col-md-10 col-md-offset-1-->
</div>
<!--end of row-->
</div>
</main>
</div>
<!-- end of app-->
</div>
<script type="text/javascript">
var APP_LOG_LIFECYCLE_EVENTS = true;
var webstore = new Vue({
el: '#app',
data: {
sitename: "Vue.js Pet Depot",
showProduct: true,
a: false,
states: {
AL: 'Alabama',
AK: 'Alaska',
AR: 'Arizona',
CA: 'California',
NV: 'Nevada'
},
order: {
firstName: '',
lastName: '',
address: '',
city: '',
zip: '',
state: '',
method: 'Home Address',
business: 'Business Address',
home: 'Home Address',
gift: '',
sendGift: 'Send As A Gift',
dontSendGift: 'Do Not Send As A Gift'
},
products: {},
cart: []
},
methods: {
checkRating(n, myProduct) {
return myProduct.rating - n >= 0;
},
addToCart(aProduct) {
this.cart.push(aProduct.id);
},
showCheckout() {
this.showProduct = this.showProduct ? false : true;
},
submitForm() {
alert('Submitted');
},
canAddToCart(aProduct) {
//return this.product.availableInventory > this.cartItemCount;
return aProduct.availableInventory > this.cartCount(aProduct.id);
},
cartCount(id) {
let count = 0;
for (var i = 0; i < this.cart.length; i++) {
if (this.cart[i] === id) {
count++;
}
}
return count;
}
},
computed: {
cartItemCount() {
return this.cart.length || '';
},
sortedProducts() {
if (this.products.length > 0) {
let productsArray = this.products.slice(0);
function compare(a, b) {
if (a.title.toLowerCase() < b.title.toLowerCase())
return -1;
if (a.title.toLowerCase() > b.title.toLowerCase())
return 1;
return 0;
}
return productsArray.sort(compare);
}
}
},
filters: {
formatPrice(price) { //#B
if (!parseInt(price)) {
return "";
} //#C
if (price > 99999) { //#D
var priceString = (price / 100).toFixed(2); //#E
var priceArray = priceString.split("").reverse(); //#F
var index = 3; //#F
while (priceArray.length > index + 3) { //#F
priceArray.splice(index + 3, 0, ","); //#F
index += 4; //#F
} //#F
return "$" + priceArray.reverse().join(""); //#G
} else {
return "$" + (price / 100).toFixed(2); //#H
}
}
},
created: function() { //#C
axios.get('https://raw.githubusercontent.com/ErikCH/VuejsInActionCode/master/chapter-05/products.json')
.then((response) => {
this.products = response.data.products;
// console.log(this.products);
});
}
});
</script>
</body>
</html>
Related
I have a problem to loading data with API call with axios, I have an infinit loop when the method loadTasks() is called.
I want to load todo list, and load associated tasks inside. Maybe I'm using the wrong way.
Here my template with Todo liste v-for loop and inside an another v-loop lo display Task list associated, loaded with loadTasks(list.id).
<template >
<div class="todo-list-container">
<div class="list flex flex-col max-w-sm mx-auto">
<hr class="text-gray1 mb-4">
<div v-for="list in allTodoList" :value="list.id" :key="list.id" class="mb-4 px-4 py-2 bg-gray-dark rounded-xl ">
<div class="flex items-center gap-4 mb-4">
<div class="date text-sm text text-left text-gray1">{{ list.order }}</div>
<div class="title font-bold">{{ list.title }}</div>
<div class="ml-auto font-bold text-right">
<button v-if="list.id" #click="this.$store.dispatch('removeTodoList', list.id)">Supprimer</button>
</div>
</div>
<div class="task-container">
{{loadTasks(list.id)}}
<div v-if="loading">loading...</div>
<div v-if="tasks" class="list weekList flex flex-col p-6 max-w-sm mx-auto bg-gray rounded-xl shadow-lg">
<div class="flex flex-row gap-4">
Liste des taches <button #click="displayForm(list.id)" href="#" class="px-2 rounded bg-blue text-white text-sm uppercase right">+</button>
<hr class="text-gray1 mb-4">
</div>
<div v-for="task in tasks" :value="task.id" :key="task.id" class=" mb-4 flex items-center gap-4 flex-row">
<div class="date text-sm text text-left text-gray1">{{ task.position }}</div>
<div class="">
<div class="title font-bold">{{ task.title }}</div>
<div class="date text-sm text text-left text-gray1">Terminé <input type="checkbox" name="finish" id="" :checked="task.finish" ></div>
</div>
<div class="ml-auto font-bold text-right">
<button v-if="task.id" #click="this.$store.dispatch('removeTask', task.id)">Supprimer</button>
</div>
</div>
</div>
</div>
</div>
{{this.$store.state.error}}
<div :class="[ showForm === true ? '' : 'hidden' ] + ' addNewForm'">
<add-task-form :listId="getListId" :showForm="showForm" ></add-task-form>
</div>
</div>
</div>
</template>
Script:
<script>
import addTaskForm from './addTaskForm.vue';
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:3000';
export default {
name: 'todoList',
props: ['allTodoList'],
components: {
addTaskForm,
},
data() {
return {
loading: false,
visibleForm: false,
listId: 0,
tasks: [],
};
},
methods: {
displayForm(listId) {
this.listId = listId;
this.visibleForm = !this.visibleForm;
},
async loadTasks(listId) {
try {
if(!listId) { return; }
const tasksList = await axios.get(`/list/${listId}/tasks`);
if (!tasksList.data.tasks || !tasksList.data.tasks.length) {
return;
}
else {
this.tasks = tasksList.data.tasks
}
} catch (error) {
this.$store.dispatch('setError', error);
}
},
cancelForm() {
this.visibleForm = false;
},
},
computed: {
showForm() {
return this.visibleForm;
},
getListId() {
return this.listId;
},
},
}
</script>
Here is my app.js
const express = require('express');
const https = require('https');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
mongoose.connect("mongodb+srv://Tibor:asdfsadf#weatherdb.pcmad.mongodb.net/weatherDB")
//Adatszerkezet (schema) Mongo-hoz
const weatherSchema = {
varos: String,
lat: Number,
lon: Number,
homerseklet: Number,
meresideje: Date,
szelirany: Number,
szelsebesseg: Number,
legnyomashPa: Number,
legnyomashgmm: Number,
paratartalom: Number,
felhozet: Number
}
//model
const Weather = mongoose.model("Weather", weatherSchema)
const app = express();
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));
app.get('/', (req, res) => {
//res.send('express működik')
res.render('index', {data: ''});
})
//API elérése(éss mongoDB Post)
app.post('/', (req, res) => {
const location = req.body.location ? req.body.location : "Budapest";
const appId = "asdfasdfasd";
const url = "https://api.openweathermap.org/data/2.5/weather?q=" + location + "&appid=" + appId + "&units=metric";
https.get(url, (response) => {
if (response.statusCode === 200) {
response.on("data", (data) => {
const weatherData = JSON.parse(data);
res.render('index', {data: weatherData});
})
} else {
res.render('index', {data: "0"});
}
});
let newWeather = new Weather({
varos: req.body.varos,
lat: req.body.lat,
lon: req.body.lon,
homerseklet: req.body.homerseklet,
meresideje: req.body.homerseklet,
szelirany: req.body.szelirany,
szelsebesseg: req.body.szelsebesseg,
legnyomashPa: req.body.legnyomashPa,
legnyomashgmm: req.body.legnyomashgmm,
paratartalom: req.body.paratartalom,
felhozet: req.body.felhozet
})
newWeather.save();
});
app.listen(process.env.PORT || 3000, function(){
console.log('A szerver fut/Port:3000');
});
And here is my index.ejs.
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WeatherApp</title>
<link rel="stylesheet" href="/public/style.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<!-- Már régóta ki akartam próbálni az EJS-t és úgy gondoltam ez egy jó alkalom rá. -->
<!-- Ha talált adatot -->
<% if (data === '') { %>
<div class="container mt-4 col-lg-5">
<!-- Title -->
<h4 class="font-weight-bold">Melyik város időjárását szeretnéd megtekinteni?</h4>
<!-- Város gombok -->
<form action="/" method="post">
<div class="form-group mt-3">
<button type="submit" class="btn btn-primary btn-lg btn-block" name="location" value="Budapest">Budapest</button>
<button type="submit" class="btn btn-primary btn-lg btn-block" name="location" value="Győr">Győr</button>
<button type="submit" class="btn btn-primary btn-lg btn-block" name="location" value="Debrecen">Debrecen</button>
<button type="submit" class="btn btn-primary btn-lg btn-block" name="location" value="Miskolc">Miskolc</button>
<button type="submit" class="btn btn-primary btn-lg btn-block" name="location" value="Pécs">Pécs</button>
<button type="submit" class="btn btn-primary btn-lg btn-block" name="location" value="Sopron">Sopron</button>
<button type="submit" class="btn btn-primary btn-lg btn-block" name="location" value="Szeged">Szeged</button>
<button type="submit" class="btn btn-primary btn-lg btn-block" name="location" value="Gyékényes">Gyékényes</button>
</div>
</form>
<% } else { %>
<div class="container mt-3 ">
<!-- Időjárás szerkezet -->
<div class="card">
<div class="card-body">
<!-- "head" -->
<h5 class="card-title" name="varos"><%= data.name %></h5>
<h8><%= data.sys.country %></h8>
<div class="container">
<p class="text-muted" name="lat"><%= data.coord.lat %></p>
<p class="text-muted" name="lon"><%= data.coord.lon %></p>
</div>
<!-- icon -->
<img class="float-right" src="http://openweathermap.org/img/wn/<%= data.weather[0].icon %>#2x.png" alt="icon">
<!-- Hőmérséklet -->
<p class="display-1" name="homerseklet"><%= data.main.temp%><sup>o</sup>C</p>
<!-- Hőérzet -->
<span class="text-muted">Hőérzet: <%= data.main.feels_like %><sup>o</sup>C</span>
<!-- Az adatok mérésének időpontja -->
<h5 class="font-weight-bold">Mérés időpontja:</h5>
<h6 name="meresideje"><%= new Date(data.dt*1000) %></h6>
<!-- Másodlagos adatok -->
<div class="container mt-3 text-center ">
<div class="row font-weight-bold border-top border-info">
<div class="col border-right border-info"><i class="fas fa-paper-plane"></i> Szélirány</div>
<div class="col"></div>
<div name="szelirany" class="col"><%= data.wind.deg %>°</div>
</div>
<div class="row font-weight-bold">
<div class="col border-right border-info"><i class="fas fa-wind"></i> Szélsebesség</div>
<div class="col"></div>
<div name="szelsebesseg" class="col"><%= data.wind.speed %>m/s</div>
</div>
<div class="row font-weight-bold">
<div class="col border-right border-info"><i class="fas fa-spinner"></i> Légnyomás</div>
<div name="legnyomashPa" class="col"><%= data.main.pressure %>(hPa)</div>
<div name="legnyomashgmm" class="col"><%= data.main.pressure * 0.75 %>(hgmm)</div>
</div>
<div class="row font-weight-bold">
<div class="col border-right border-info"><i class="fas fa-water"></i> Páratartalom</div>
<div class="col"></div>
<div name="paratartalom" class="col"><%= data.main.humidity %>%</div>
</div>
<div class="row font-weight-bold">
<div class="col border-right border-info"><i class="fas fa-eye"></i> Látási-viszonyok</div>
<div class="col"></div>
<div class="col"><%= data.visibility/1000 %>km</div>
</div>
<div class="row font-weight-bold">
<div class="col border-right border-info"><i class="fas fa-cloud"></i> Felhőzet</div>
<div class="col"></div>
<div name="felhozet" class="col"><%= data.clouds.all %>%</div>
</div>
</div>
</div>
</div>
<!-- Másik város gomb(to /) -->
<div class="text-center">
Másik Település
</div>
</div>
<!-- ejs end -->
<% } %>
<script src="https://kit.fontawesome.com/ad862d8e11.js" crossorigin="anonymous">
</script>
</body>
</html>
So this is it.
Somewhy if I check MongoDB I only see empty objects with only an id, maybe I didn't submit it or my ejs is wrong? (I'm new to this)
Also if anyone knows how I can do something like, checking if since the previous date 10 minutes didn't pass then use those measurements?
Any help is welcome!
mongoose.connect('mongodb://localhost:27017/test');
const Cat = mongoose.model('Cat', { name: String });
const kitty = new Cat({ name: 'Zildjian' });
kitty.save().then(() => console.log('meow'));```
```.save()``` is returns a promise resolves with ```(err)```
check that
The actual challenge that I am facing now is how to load the comment properly. My Ajax is creating the comment but I am struggling to load the comment properly in line with other comments.
what happening now is that the comment loads but it doesn't load properly, I am struggling to load it with the right ID in the right place. when it loads, it shows my title and descriptions together and it doesn't load the date.
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h1>Comment App</h1>
<form action="/programs/<%= program._id %>/createComment" method="POST" >
<div class="form-group">
<input name="name" id="username" class="form-control" placeholder="username">
</div>
<div class="form-group">
<textarea name="description" id="descriptioncomment" class="form-control" placeholder="comment"></textarea>
</div>
<div class="form-group">
<input type="submit" id="post-comment" class="btn btn-primary" value="Submit">
</div>
</form>
<ul id="commentList" class="list-group">
</ul>
</div>
</div>
</div>
<section class="content-item" id="comments">
<div class="row" id="comment-lists" >
<div class="col-sm-10" >
<h3 id="comments-count" ><%= program.programcomments.length%> </h3>
<% program.programcomments.forEach(comments=> { %>
<div class="media" >
<div class="media-body" >
<h4 class="media-heading" id="lists" ><%= comments.name %></h4>
<p id="lists" ><%=comments.description %></p>
<ul class="list-unstyled list-inline media-detail pull-left" id="lists">
<li id="lists"><i class="fa fa-calendar" ></i><%= moment(comments.createdAt).format('llll') %></li>
</ul>
</div>
</div>
<% });%>
</div>
</div>
</section>
$('#post-comment').on('click', function(event) {
event.preventDefault();
$.ajax({
url : "/programs/<%= program._id %>/createComment",
method : 'POST',
data : {
name : $('#username').val(),
description : $('#descriptioncomment').val()
},
success : function(result ) {
$('.form-control').each(function () {
let comments = this.value;
$('#comment-lists').append($('#lists').text(comments))
document.getElementById('comments-count').innerHTML++
});
$("#username").val('');
$("textarea#descriptioncomment.form-control").val('');
}
});
})
You are using same ids for mutliple elements so first remove them and use class. Then , you can generate entire media div inside success function of ajax with the value of inputs and then append them inside your comment-lists div.
Demo Code :
$('#post-comment').on('click', function(event) {
event.preventDefault();
/*$.ajax({
url: "/programs/<%= program._id %>/createComment",
method: 'POST',
data: {
name: $('#username').val(),
description: $('#descriptioncomment').val()
},
success: function(result) {*/
//append new div .. with username & desc
$('#comment-lists').append(`<div class="media">
<div class="media-body">
<h4 class="media-heading">${$('#username').val()}</h4>
<p class="lists">${$('#descriptioncomment').val()}</p>
<ul class="list-unstyled list-inline media-detail pull-left lists">
<li><i class="fa fa-calendar"></i>${moment(new Date()).format('llll') }</li>
</ul>
</div>
</div>`)
$("#comments-count").text(parseInt($("#comments-count").text()) + 1) //updated total
//then emtpy
$("#username").val('');
$("textarea#descriptioncomment.form-control").val('');
/*}
});*/
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h1>Comment App</h1>
<form action="/programs/<%= program._id %>/createComment" method="POST">
<div class="form-group">
<input name="name" id="username" class="form-control" placeholder="username">
</div>
<div class="form-group">
<textarea name="description" id="descriptioncomment" class="form-control" placeholder="comment"></textarea>
</div>
<div class="form-group">
<input type="submit" id="post-comment" class="btn btn-primary" value="Submit">
</div>
</form>
<ul id="commentList" class="list-group">
</ul>
</div>
</div>
</div>
<section class="content-item" id="comments">
<div class="row" id="comment-lists">
<div class="col-sm-10">
<h3 id="comments-count">2</h3>
<div class="media">
<div class="media-body">
<h4 class="media-heading">Abc</h4>
<p class="lists">Descp xyz</p>
<ul class="list-unstyled list-inline media-detail pull-left lists">
<li><i class="fa fa-calendar"></i>23-2-2022</li>
</ul>
</div>
</div>
<div class="media">
<div class="media-body">
<h4 class="media-heading lists">Abc</h4>
<p class="lists">Descp xyz</p>
<ul class="list-unstyled list-inline media-detail pull-left lists">
<li><i class="fa fa-calendar"></i>23-2-2022</li>
</ul>
</div>
</div>
</div>
</div>
</section>
I am using express js as framework and ejs for view engine now for specific controller while passing data from controller to view it shows user not define with in view/partial/header.ejs which is working fine for other controller.
Controller code:
app.get('/add_home_content', function(req, res) {
User.findById(req.user, function(err, doc) {
if (doc.local.role == 'admin') {
var catId = '59f9be1aa40c152bc990f98f';
var contentid2 = '59faef18ce5da81b59c70a34';
var homeimgid = "59fc0e3e20942a15d7633cfd";
var contentplanid = "5a002bf79a62fc0bf2f14bbe";
content.findById(catId, function(err, content) {
//content.find({} ,{ "type": "homepage" }, function (err, content) {
//res.send(req.user.local);
trainercontent.findById(contentid2, function(err, trainercontent) {
homeimage.findById(homeimgid, function(err, homeimage) {
trainerinfo.find({}).exec(function(err, trainerinf) {
traininginfo.find({}).exec(function(err, traininginf) {
subscplancontent.findById(contentplanid, function(err, plancontent) {
banner.find({}).exec(function(err, bannerinf) {
// notification.find({}).exec(function(err, notifications) {
//res.send(content);
//trainercontent.find({}).exec(function(err, trainercontent) {
// res.send(notifications);
res.render('admin/content/addcontent.ejs', {
editContent: content,
editcontent2: trainercontent,
editcontent3: homeimage,
trainerinfo: trainerinf,
traininginfo: traininginf,
plancontents: plancontent,
bannerinfo: bannerinf,
message: false,
user: req.user.local
});
});
});
});
});
});
});
});
}
});
});
View page code(view engine ejs code) Showing user undefined error:
<script type="text/javascript">
/********signUp form validation *********/
$(document).ready(function() {
$('#planAdd').submit(function(e) {
var valid = $("#planAdd").valid();
if (valid) {} else {
e.preventDefault();
}
});
$('#planAdd').validate({
rules: {
'plan_name': 'required',
'price': 'required',
'currency': 'required',
'plan_duration': 'required'
},
messages: {
plan_name: {
required: "Plan can't be blank"
},
price: {
required: "Price can't be blank"
},
currency: {
required: "Currency can't be blank",
},
plan_duration: {
required: "Plan Duration can't be blank"
}
}
});
});
/********end of form validation *********/
</script>
<div class="page-inner">
<% if (message.length > 0) { %>
<div class="alert alert-danger">
<%= message %>
</div>
<% } %>
<div id="main-wrapper">
<a class="btn btn-success btn-lg " href="javascript: history.go(-1)">←Back To previous page</a>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-8 add-plan-form">
<div class="row m-t-md">
<h1 class="add-plan-heading">Add Content</h1>
<script type="text/javascript">
$(document).ready(function(){
$("#myTab li:eq(0) a").tab('show');
});
</script>
<style type="text/css">
.bs-example{
margin: 20px;
}
.col-sm-8 {
width: 96.667%;
}
#media (min-width: 320px) and (max-width: 480px){
#myTab li {
width: 100%;
margin: 5px 0;
}
}
#media (min-width: 481px) and (max-width: 640px){
#myTab li {
width: 50%;
margin: 5px 0;
padding: 5px;
}
}
#media (min-width: 641px) and (max-width: 767px){
#myTab li {
width: 33%;
margin: 5px 0;
padding: 5px;
}
}
</style>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-tabs" id="myTab">
<li><a data-toggle="tab" href="#sectionA">Home page content</a></li>
<li><a data-toggle="tab" href="#sectionB">Trainer content</a></li>
<li><a data-toggle="tab" href="#sectionc">Home page bottom content</a></li>
<li><a data-toggle="tab" href="#sectiond">Trainers</a></li>
<li><a data-toggle="tab" href="#sectione">Add training type</a></li>
<li><a data-toggle="tab" href="#sectionf">Subscription plan content</a></li>
<li><a data-toggle="tab" href="#sectiong">Add Banner</a></li>
</ul>
<div class="tab-content clearfix">
<div id="sectionA" class="tab-pane fade in active">
<form action="/updateContent?id=<%= editContent.id %>" method="POST" id="planAdd">
<div class="form-group">
<label>Content Heading</label>
<input type="text" class="form-control" name="content_heading" value="<%= editContent.content_heading %>">
</div>
<div class="form-group">
<label>Content Description</label>
<textarea rows="7" cols="50" name="content_desc" class="form-control" ><%= editContent.content_desc %>
</textarea>
<span class="Phon_err"></span>
</div>
<button type="submit" class="btn btn-warning btn-lg">Save</button>
</form>
</div>
<div id="sectionB" class="tab-pane fade">
<form action="/updatetrainContent?id=<%= editcontent2.id %>" method="POST" id="categoryAdd">
<div class="form-group">
<label>Heading</label>
<input type="text" class="form-control" name="heading" value="<%= editcontent2.heading %>">
</div>
<div class="form-group">
<label>Description</label>
<!-- <input type="text" class="form-control" name="desc"> -->
<textarea rows="7" cols="50" name="desc" class="form-control" ><%= editcontent2.desc %>
</textarea>
</div>
<button type="submit" class="btn btn-warning btn-lg">Save</button>
</form>
</div>
<div id="sectionc" class="tab-pane fade">
<form action="/add_img?id=<%= editcontent3.id %>" method="post" id="videoAdd" enctype="multipart/form-data" >
<div class="form-group">
<label>Heading</label>
<input type="text" class="form-control" name="title" value="<%= editcontent3.title %>" >
</div>
<div class="form-group img-d">
<label > Thumbnail</label>
<div "><input type="file" class="" id="e_Img_file" name=" home_img"></div>
<img src="./uploads/homepageimage/<%= editcontent3.home_img %>" height="200" width="220">
<span class="value"></span>
</div>
<button type="submit" class="btn btn-success btn-lg pull-right">Save</button>
</form>
</div>
<div id="sectiond" class="tab-pane fade in active m-div clearfix">
<h2 class="h-div">
Add new trainer</h2>
<!-- <% if(trainerinfo){ trainerinfo.forEach( function (trainerinf){ %>
<div class="members animated fadeInLeft visible" data-animation="fadeInLeft" data-animation-delay="300"><div class="content_slider_text_block_wrap"><div class="team-img"><img src="/uploads/trainerprofile/<%- trainerinf.trainer_profile %>" alt="image" class="member_photo" width="250" height="320"></div><div class="team-inner"><div class="team-top center"><h4 class="membername"><%- trainerinf.trainer_name %></h4><br><span class="membername_dec"><%- trainerinf.trainig_type %></span></div></div></div><div class="clear"></div></div><div class="sharemedeia"><a target="_self" href="<%- trainerinf.trainer_facebook %>"><i class="fa fa-facebook"></i></a><a target="_self" href="<%- trainerinf.trainer_twiter %>"><i class="fa fa-twitter"></i></a><a target="_self" href="<%- trainerinf.trainer_google %>"><i class="fa fa-google-plus"></i></a></div>
Edit
Delete
<% }); }%> -->
<div class="members_section">
<div class="row">
<% if(trainerinfo){ trainerinfo.forEach( function (trainerinf){ %>
<div class="col-sm-4 col-xs-6 team_m">
<img src="/uploads/trainerprofile/<%- trainerinf.trainer_profile %>" alt="image" class="member_photo img-responsive">
<h4 class="membername"><%- trainerinf.trainer_name %><span class="membername_dec">(<%- trainerinf.trainig_type %>)</span></h4>
<div class="sharemedeia">
<a target="_self" href="%- trainerinf.trainer_facebook"><span class="s-bg"><i class="fa fa-facebook"></i></span></a>
<a target="_self" href=""<%- trainerinf.trainer_twiter %>"><span class="s-bg"><i class="fa fa-twitter"></i></span></a>
<a target="_self" href="<%- trainerinf.trainer_google %>"><span class="s-bg"><i class="fa fa-google-plus"></i></span></a></div>
<div class="ed_de">
Edit
Delete
</div>
</div> <!--col-sm-4-->
<% }); }%>
</div> <!--row-->
</div> <!--members_section-->
</div>
<div id="sectione" class="tab-pane fade in active">
<h2 class="h-div"><a href="/addtrainingtype" >Add new training type</a></h2>
<div class="members_section">
<div class="row">
<% if(traininginfo){ traininginfo.forEach( function (traininginf){ %>
<div class="col-sm-4 col-xs-6 team_m">
<img src="/uploads/trainingtype/<%- traininginf.training_profile %>" alt="image" class="member_photo img-responsive">
<h4 class="membername"><%- traininginf.trainer_title %></h4>
<div class="ed_de">
Edit
Delete
</div>
</div> <!--col-sm-4-->
<% }); }%>
</div> <!--row-->
</div> <!--members_section-->
</div>
<div id="sectionf" class="tab-pane fade in active">
<form action="/subsplanContent?id=<%= plancontents.id %>" method="POST" id="planAdd">
<div class="form-group">
<label>Heading</label>
<input type="text" class="form-control" name="title" value="<%= plancontents.title %>" >
</div>
<div class="form-group">
<label>Content Description</label>
<textarea rows="7" cols="50" name="content_desc" class="form-control" ><%= plancontents.content_desc %>
</textarea>
<span class="Phon_err"></span>
</div>
<button type="submit" class="btn btn-warning btn-lg">Save</button>
</form>
</div>
<div id="sectiong" class="tab-pane fade in active">
<h2 class="h-div">
Add banner image</h2>
<div class="members_section">
<div class="row">
<% if(bannerinfo){ bannerinfo.forEach( function (bannerinf){ %>
<div class="col-sm-4 col-xs-6 team_m">
<img src="/uploads/bannerimage/<%- bannerinf.banner_image %>" alt="image" class="member_photo img-responsive">
<div class="ed_de">
Edit
Delete
</div>
</div> <!--col-sm-4-->
<% }); }%>
</div> <!--row-->
</div> <!--members_section-->
</div>
</div>
</div>
</body>
</html>
</div>
</div>
</div>
</div>
we have created a e-commerce project in that while clicking on categories in UI it will renders to category page in that page it has show one product of each subcategory
i have written the code in which the entire products with the specific category name is displaying how i can remove the extra products as of now i required only one product of each sub category of the particular category
the routing code is
router.get("/shop/:category_name", function(req, res){
//querystring
var url = require('url');
var url_parts = url.parse(req.url, true);
var query = url_parts.query;
var viewModel = {
breadCrumb: [],
categories : [],
featuredProducts :[],
products : [],
};
viewModel.breadCrumb.push({
name : 'Home',
class : 'breadcrumb-ordinary'
});
viewModel.breadCrumb.push({
name : req.params.category_name,
class : 'breadcrumb-active'
});
async.parallel({
categories: function(cb){
Category.find({}, cb);
},
categories1:function(cb){
Category.find({category_name:req.params.category_name}, cb);
}
}, function(err, results) {
if (err) throw err;
viewModel.categories1=results.categories1;
viewModel.categories=results.categories;
res.render('shop/prod_grid',viewModel);
});
});
the view UI code is
<!doctype html>
<html lang="en-US"> <!--<![endif]-->
<head>
</head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../../../shop-plugins/css/jplist-pagination.css">
<link rel="stylesheet" href="../../../shop-plugins/css/breadcrumb.css">
<body>
{{> shop/header}}
<!-- BAR -->
<div class="shipping-wrap">
<div class="container">
<div class="row">
<div class="span12">
<ul>
<li>
{{#each breadCrumb}}
{{#if #first}}
<a href="/" class="{{class}}">{{name}}
{{else}}
<a class="{{class}}">{{name}}
{{/if}}
{{#if #last}}
{{else}}
<i class="fa fa-angle-double-right"></i></a>
{{/if}}
{{/each}}
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- BAR -->
<!-- PRODUCT-OFFER -->
<div class="product_wrap">
<div class="container">
<div class="row">
<div id="span9" class="span9 product-grid">
<div id="products" class="box jplist jplist-grid-view">
<div class="jplist-panel box jplist-panel-top">
<div
class="jplist-drop-down"
data-control-type="items-per-page-drop-down"
data-control-name="paging"
data-control-action="paging">
<ul id="per-pages">
<li><span data-number="3">3 per page</span></li>
<li><span data-number="6" data-default="true">6 per page</span></li>
<li><span data-number="9">9 per page</span></li>
<li><span data-number="12">12 per page</span></li>
</ul>
</div>
<div
class="jplist-drop-down"
data-control-type="sort-drop-down"
data-control-name="sort"
data-control-action="sort">
<ul id="sorting">
<li><span data-path="default">Sort By</span></li>
<li><span data-path=".brand" data-order="asc" data-type="text">Brand A-Z</span></li>
<li><span data-path=".brand" data-order="desc" data-type="text">Brand Z-A</span></li>
<li><span data-path=".cost" data-order="asc" data-type="number">Cost Low-High</span></li>
<li><span data-path=".cost" data-order="desc" data-type="number">Cost High-Low</span></li>
</ul>
</div>
<div
class="jplist-label"
data-type="Page {current} of {pages}"
data-control-type="pagination-info"
data-control-name="paging"
data-control-action="paging">
</div>
<div
class="jplist-views"
data-control-type="views"
data-control-name="views"
data-control-action="views"
data-default="jplist-grid-view">
</div>
</div>
{{#each subcategoryprod}}
<div>
<ul>
<li>{{subcategory}}</li>
</ul>
</div>
{{/each}}
<!--category wise products-->
<div id="jp-panel" class="list box text_shadow">
{{#each subcategoryprod}}
<div id="jp-panel-item" class="list-item box">
<div class="span3 product">
<div>
<figure>
{{#each image}}
{{#if #first}}
<img src="../../../uploads/products/{{../_id}}/{{img}}" alt="" onerror="this.src='../../../shop-images/coming-soon.png'">
<div class="overlay">
</div>
{{/if}}
{{else}}
<img src="../../../shop-images/coming-soon.png" alt="">
<div class="overlay">
</div>
{{/each}}
</figure>
<div class="detail">
<span name="retailprice" class="cost">₹{{RetailPrice}}</span>
<span>{{colour}}</span>
<h4 class="brand">{{brand}}</h4>
<span>{{Description}}</span>
<div class="icon">
</div>
</div>
</div>
</div>
</div>
{{/each}}
</div>
<div class="box jplist-no-results text-shadow align-center">
<p> No results Found</p>
</div>
<div class="jplist-panel box panel-bottom">
<div
class="jplist-label"
data-type="{start} - {end} of {all}"
data-control-type="pagination-info"
data-control-name="paging"
data-control-action="paging">
</div>
<div
class="jplist-pagination back-top"
data-control-animate-to-top="true"
data-control-type="pagination"
data-control-name="paging"
data-control-action="paging">
</div>
</div>
</div>
</div>
<div class="span3">
<div class="row">
</div>
<div id="sidebar">
<div class="widget">
<h4>Price Filter</h4>
<div class="price-range">
<div id="slider-range"></div>
<p class="clearfix">
<input type="text" id="amount" readonly />
<input type="text" id="amount2" readonly />
</p>
</div>
</div>
<div class="widget">
<h4>BRANDS</h4>
<div id="">
<div class="brands">
<input type='text' id='txtList' onkeyup="searchBrand(this)" placeholder="search brands here....." />
<!-- <ul id="fromList" class="myid"> -->
{{#each products}}
<ul id="fromList" class="myid">
<li> <input type="checkbox" id="{{brand}}" class="brandFilterCheckBox pull-right" align="center"/> <label for="{{brand}}">{{brand}}<label></li>
</ul>
{{/each}}
<!-- </ul> -->
</div>
</div>
</div>
</div>
<div class="widget">
<h4>CATEGORIES</h4>
<div id="accordion">
{{#each categories}}
<h5>{{category_name }}</h5>
<div>
<ul>
{{#each subcategories1}}
<li>{{subcategory_name}}</li>
{{/each}}
</ul>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Featured Products -->
<div class="container" style="margin-top:10px">
<div class="row heading-wrap">
<div class="span12 heading">
<h2>Featured Products <span></span></h2>
</div>
</div>
<div class="row similar_products">
<div id="feat_prod">
{{#each featuredProducts}}
<div class="span3 product">
<figure>
{{#each image}}
{{#if #first}}
<img src="../../../uploads/products/{{../_id}}/{{img}}" alt="">
<div class="overlay">
</div>
{{/if}}
{{/each}}
</figure>
<div class="detail">
<span>₹{{RetailPrice}}</span>
<h4>{{product_name}}</h4>
<span>{{Description}}</span>
</div>
</div>
{{/each}}
</div>
</div>
</div>
<!-- PRODUCT-OFFER -->
<!-- FOOTER -->
{{> shop/footer}}
<script type="text/javascript" src="../../../shop-plugins/js/jplist-pagination.js"></script>
<script src="../../../bootstrap/js/star.min.js"></script>
<script src="../../../shop-plugins/js/jquery.paginate.js"> </script>
<script>
$(function(){
$('#feat_prod').paginate();
});
</script>
<script>
$(document).ready(function(){
$('#products').jplist({
itemsBox: '.list'
,itemPath: '.list-item'
,panelPath: '.jplist-panel'
});
});
</script>
<script>
$('document').ready(function(){
$("#slider-range").slider({change : function(event,ui){
var lowerLimit=$("#amount").val();
var numberLowerLimit=Number(lowerLimit.substring(1,lowerLimit.length));
var upperLimit=$("#amount2").val();
upperLimit=upperLimit.substring(1,upperLimit.length);
var numberUpperLimit=Number(upperLimit.replace("₹",""));
console.log("LOWER LIMIT :"+lowerLimit+" UPPER LIMIT :"+upperLimit);
$(".cost").each(function(){
var rowUnitCost=$(this).text();
var unitCost=Number(rowUnitCost.substring(1,rowUnitCost.length));
if(unitCost<numberLowerLimit || unitCost>numberUpperLimit){
var hiddingBox=$(this).parents(".list-item");
/*hiddingBox.removeClass("list-item").addClass("rafsal-test");*/
hiddingBox.hide();
console.log("Values IN:"+unitCost);
}
else{
var hiddingBox=$(this).parents(".list-item");
if(hiddingBox.attr('id')==undefined || hiddingBox.attr('id')=="undefined"){
hiddingBox=$(this).parents(".rafsal-test");
hiddingBox.addClass("list-item").removeClass("rafsal-test");
}
hiddingBox.show();
console.log("Values OUT:"+unitCost);
}
$('#products').jplist({
itemsBox: '.list' ,
itemPath: '.list-item' ,
panelPath: '.jplist-panel'
});
});
}
});
// Brand Filter
$(".brandFilterCheckBox").on('click',function(){
$(".brand").each(function(){
var hiddingBox=$(this).parents(".list-item");
hiddingBox.removeClass("list-item").addClass("rafsal-test");
hiddingBox.hide();
});
$(".brandFilterCheckBox").each(function(){
if($(this).prop("checked")){
var filterBrand=$(this).attr("id");
$(".brand").each(function(){
var unitBrandName=$(this).text().trim();
if(unitBrandName== filterBrand){
console.log(unitBrandName);
var hiddingBox=$(this).parents(".list-item");
if(hiddingBox.attr('id')==undefined || hiddingBox.attr('id')=="undefined"){
hiddingBox=$(this).parents(".rafsal-test");
hiddingBox.addClass("list-item").removeClass("rafsal-test");
}
hiddingBox.show();
}
});
$('#products').jplist({
itemsBox: '.list' ,
itemPath: '.list-item' ,
panelPath: '.jplist-panel'
});
}
});
})
var textCheck="##";
removeDuplicateBrands()
});
function removeDuplicateBrands(){
var textCheck="##";
$(".brandFilterCheckBox").each(function(){
$(this).attr('id');
if(textCheck.indexOf("##"+$(this).attr('id')+"##")==(-1)){
textCheck=textCheck+$(this).attr('id')+"##";
}
else{
$(this).parent("li").hide();
}
});
}
</script>
<script>
function searchBrand(element) {
var value = $(element).val();
$("#fromList li").each(function () {
if ($(this).text().search(value) > -1) {
$(this).show();
$(this).prevAll('.header').first().show();
} else {
$(this).hide();
}
});
removeDuplicateBrands();
}
</script>
</body>
so i am posting a photo in which my output is there it contains all products of a specified category i need only one product from each sub category of the specified category and the image contains four products of protection category and two sub categories air freshners and Head unit , air freshners contains three products i need to display only one from airfreshner and one from head unit in which we need
In Your Router Code, Edit this section
categories1:function(cb){
Category.find({category_name:req.params.category_name}, cb);
}
Change the above to this
categories1:function(cb){
Category.findOne({category_name:req.params.category_name}, cb);
}
That should solve it for you.