Develop Reference

Cannot read property items of null

I am learning javascript and databases, so I am practicing by making a todo list application. Which add item dynamically in the lists. List is created through URL like http://localhost:3000/work creates a work list, but whenever I try to add something it shows an error.
my JS code:
const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const app = express();
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));
mongoose.connect("mongodb://localhost:27017/todolistDB", {useNewUrlParser: true, useUnifiedTopology: true });
const itemsSchema = {
name: String
};
const Item = mongoose.model ("Item", itemsSchema);
const item1 = new Item ({
name: "item1"
});
const item2 = new Item ({
name: "item2"
});
const item3 = new Item ({
name: "item3"
});
const defaultItems = [item1, item2, item3];
const listSchema = {
name: String,
items: [itemsSchema]
};
const List = mongoose.model("List", listSchema);
app.get("/", function(req, res) {
Item.find({}, function(err, foundItems){
if(foundItems.length === 0){
Item.insertMany(defaultItems, function(err){
if(err){
console.log(err);
} else {
console.log("Succesfully saved the items");
}
});
res.redirect("/");
} else {
res.render("list", {listTitle: "Today", newListItems: foundItems});
}
});
});
app.get("/:customListName", function(req, res){
const customListName = req.params.customListName;
List.findOne({name: customListName}, function(err, foundList){
if(!err){
if(!foundList){
//Create a new list
const list = new List({
name: customListName,
items: defaultItems
});
list.save();
res.redirect("/" + customListName);
} else{
//show the existing list
res.render("list", {listTitle: foundList.name, newListItems: foundList.items})
}
}
});
});
app.post("/", function(req, res){
const itemName = req.body.newItem;
const listName = req.body.list;
const item = new Item ({
name: itemName
});
if(listName === "Today"){
item.save();
res.redirect("/");
} else {
List.findOne({name: listName}, function(err, foundList){
if(err){
console.log(err);
} else{
foundList.items.push(item);
foundList.save();
res.redirect("/" + listName);
}
});
}
});
app.post("/delete", function(req, res){
const checkedItemId = req.body.checkbox;
Item.findByIdAndRemove(checkedItemId, function(err){
if(!err){
console.log("Succesfully deleted the item!!");
res.redirect("/");
}
});
});
app.get("/about", function(req, res){
res.render("about");
});
app.listen(3000, function() {
console.log("Server started on port 3000");
});
My ejs code:
<%- include("header") -%>
<div class="box" id="heading">
<h1> <%= listTitle %> </h1>
</div>
<div class="box">
<% newListItems.forEach(function(item) { %>
<form action="/delete" method="post">
<div class="item">
<input type="checkbox" name="checkbox" value="<%=item._id%>" onchange="this.form.submit()">
<p><%=item.name%></p>
</div>
</form>
<% }); %>
<form class="item" action="/" method="post">
<input type="text" name="newItem" placeholder="New Item" autocomplete="off">
<button type="submit" name="list" value="<%=listTitle%>">+</button>
</form>
</div>
<%- include("footer") -%>

The List.findOne function might return either one "List" { name: String, items: [itemsSchema]} item or null. Unfortunately, you don't check for the null condition which can happen if this list hasn't been created yet in your database.
To solve this issue, you'll need to add an existence check for the foundList variable in your code.
If the foundList variable isn't null, then the foundList contains a list and a new item can be pushed to it.
Else if the foundList variable is null, you can create a new list with this name and the item you want to add to it.
if (err) {
console.log(err);
} else if (foundList !== null) {
foundList.items.push(item);
foundList.save();
res.redirect("/" + listName);
} else {
// List is not found, here you can create a new list with the item, or possibly return an error to the user (listName not found!)
foundList = new List({ foundList: [item], name: listName });
foundList.save();
res.redirect("/" + listName);
}
PS: You could refactor the code I wrote above to reduce duplication.

Read data from mongoose with node in Atom

i'm building a web page for a library with node and mongoose in atom. I've created a log in form, register and an "add book". Now in the home page i want to see all the books and i dont know to to do that. I know it way have something to do with double {{}} or triple {{{}}} brackets but I'm not sure. I will put it later in a prettyer form, for now i just want to see how I can print, for example the titles. Btw i'm using the handlebars view engine.
<h2 class="page-header">Cartile existente</h2>
<h4>In curand!</h4> // <- there I'm supposed to put the book titles.
<h2 class="page-header">Adauga o carte noua</h2>//this is the "add a book"
{{#if errors}}
{{#each errors}}
<div class="alert alert-danger">{{msg}}</div>
{{/each}}
{{/if}}
<form method="post" action="/booksImp/addbook">
<div class="form-group">
<label>Numar Inventar</label>
<input type="text" class="form-control" placeholder="Numar curent" name="nrinv">
</div>
<div class="form-group">
<label>Titlu</label>
<input type="text" class="form-control" placeholder="Titlu" name="titlu">
</div>
<div class="form-group">
<label>Autor</label>
<input type="text" class="form-control" placeholder="Autor" name="autor">
</div>
<div class="form-group">
<label>Editura</label>
<input type="text" class="form-control" placeholder="Editura, Locul publicatiei" name="editura">
</div>
<div class="form-group">
<label>An</label>
<input type="text" class="form-control" placeholder="An publicatie" name="an">
</div>
<div class="form-group">
<label>Pret</label>
<input type="text" class="form-control" placeholder="Pret" name="pret">
</div>
<button type="submit" class="btn btn-success">Trimite</button>
</form>
var mongoose = require('mongoose');
var bcrypt = require('bcryptjs');
var BookSchema = mongoose.Schema({
nrinv: {
type: String,
index: true
},
titlu: {
type: String
},
autor: {
type: String
},
editura: {
type: String
},
an: {
type: String
},
pret: {
type: String
}
});
var Book = module.exports = mongoose.model('bookImp', BookSchema);
module.exports.getBooks = (callback, limit) => {
Book.find(callback).limit(limit);
}
module.exports.getBookById = (id, callback) => {
Book.findById(id, callback);
}
module.exports.addBook = (book, callback) => {
Book.create(book, callback);
}
module.exports.removeBook = (id, callback) => {
var query = {
_id: id
};
BookImp.remove(query, callback);
}
var express = require('express'); //this is the controller code =))))
var router = express.Router();
var passport = require('passport');
var LocalStrategy = require('passport-local').Strategy;
var Book = require('../models/bookImp');
router.get('/addbook', ensureAuthenticated, function(req, res, next) {
res.render('addbook');
});
router.post('/addbook', function(req, res, next) {
var nrinv = req.body.nrinv;
var titlu = req.body.titlu;
var autor = req.body.autor;
var editura = req.body.editura;
var an = req.body.an;
var pret = req.body.pret;
//console.log(name);
req.checkBody('nrinv', 'Introduceti numarul de inventar').notEmpty();
req.checkBody('titlu', 'Introduceti titlul').notEmpty();
req.checkBody('autor', 'Introduceti autorul').notEmpty();
req.checkBody('editura', 'Introduceti editura si locul').notEmpty();
req.checkBody('an', 'Introduceti anul').notEmpty();
// req.checkBody('an', 'Introduceti anul').isnumber();
req.checkBody('pret', 'Introduceti pretul').notEmpty();
var errors = req.validationErrors();
if (errors) {
res.render('addbook', {
errors: errors
});
} else {
var newBook = new Book({
nrinv: nrinv,
titlu: titlu,
autor: autor,
editura: editura,
an: an,
pret: pret
});
Book.addBook(newBook, function(err, book) {
if (err) throw err;
console.log(book);
});
req.flash('success_msg', 'Ati adaugat o carte cu succes');
res.redirect('/booksImp/addbook');
}
});
router.post('/addbook',
passport.authenticate('local', {
successRedirect: '/',
failureRedirect: '/booksImp/addbook',
failureFlash: true
}),
function(req, res) {
res.redirect('/');
});
function ensureAuthenticated(req, res, next) {
if (req.isAuthenticated()) {
return next();
} else {
//req.flash('error_msg', 'Trebuie sa va logati');
res.redirect('/users/login');
}
}
module.exports = router;
var express = require('express');
var router = express.Router();
var Book = require('../models/bookImp');
router.get('/', ensureAuthenticated, function(req, res, next) {
res.render('index');
});
router.get('/api/books', ensureAuthenticated, function(req, res) {
Book.getBooks(function(err, books) {
if (err) {
throw err;
}
res.json(books);
});
});
function ensureAuthenticated(req, res, next) {
if (req.isAuthenticated()) {
return next();
} else {
//req.flash('error_msg', 'Trebuie sa va logati');
res.redirect('/users/login');
}
}
module.exports = router;

Node/Express Routing issue - invoking incorrect path

Everything seems to be working fine, however when attempting to reach '/posts/new' I get "TypeError: Cannot read property 'title' of null" referencing '/routes/posts.js:24' which is in the '/:title' GET method. Any ideas why?
'routes/posts.js'
var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var Post = mongoose.model('posts');
/* posts displays*/
// posts index
router.get('/', (req, res) => {
Post.find((err, posts) => {
res.render(
'posts/index',
{
title: 'Get All the Posts!',
posts: posts
}
);
});
});
// single post
router.get('/:title', (req, res) => {
var query = {"title": req.params.title};
Post.findOne(query, (err, post) => {
res.render(
'posts/post',
{
title: post.title,
date: post.date,
body: post.body
}
);
});
});
/* posts new */
router
// GET new posts route and form
.get('/new', (req, res) => {
res.render('posts/new', { title: 'Add a new Post' });
})
// POST new post data
.post('/new', (req, res) => {
new Post({
title: req.body.title,
date: req.body.date,
body: req.body.body
})
// Save post to db
.save((err, post) => {
res.redirect('/posts');
});
});
/* posts edit */
router
// GET the post
.get('/edit/:title', (req, res) => {
var query = {'title': req.params.title};
Post.findOne(query, (err, post) => {
res.render(
'posts/edit',
{
title: post.title,
date: post.date,
body: post.body
}
);
});
})
// PUT to update the post
.put('/edit/:title', (req, res) => {
var query = {'title': req.params.title};
var update = {
title: req.body.title,
body: req.body.body
};
var options = {new: true};
Post.findOneAndUpdate(query, update, options, (err, post) => {
res.render(
'posts/post',
{
title: post.title,
date: post.date,
body: post.body
}
);
});
})
// DELETE to delete a post
.delete('/edit/:title', (req, res) => {
var query = {'title': req.params.title};
Post.findOneAndRemove(query, (err, posts) => {
res.redirect('/');
})
});
module.exports = router;
'views/posts/new' with Swig:
{% extends '../layout.html' %}
{% block title %}{% endblock %}
{% block content %}
<h1>{{ title }}</h1>
<form method='post' action='/posts/new' class='form-posts'>
<label>Title:</label>
<input type="text" name='title' class='form-posts-text' required>
<label>Body</label>
<input type="text" name='body' class='form-posts-body' required>
<button type='submit' class='btn-submit'>Submit</button>
</form>
{% endblock %}

Try placing the route for /new before the generic /:title root.
Because /:title is defined first, it gets called first if it matches (which it does). Since you have no post with the name "new", your database search comes up empty. You should probably have an error handler there. The error seems to be on the line title: post.title.
If /new is defined first, it will get called if it matches. If it doesn't, the more generic /:title will be.

CKEditor Not Appropriately Displaying Tags

I am trying to use CKEDITOR for my express app, but I'm running into an issue where I try to use the list element tags, but instead of displaying my content with the appropriate HTML format, I am shown the tags. I recently configured the editor to remove the <p> tags from appearing, but it appears that there is something else I need to add to get tags appearing in the correct HTML format.
UPDATE: Attached is a screenshot of what the source code looks like for those <ul> and <li> elements.
blogpost-create.ejs:
<html>
<head>
<% include ../partials/head %>
<script src="//cdn.ckeditor.com/4.4.5/standard/ckeditor.js"></script>
</head>
<body>
<header>
<% include ../partials/header %>
</header>
<div class="grid grid-pad">
<div class="col-1-1">
<h1>Blog Create</h1>
<form action="/admin/posts/create" method="POST">
Title: <input type="text" name="title"><br>
Author:
<select name="author">
<option value="Author">Author</option>
</select><br>
Category:
<select name="category">
<option value="Analytics/SEO/SEM">Analytics/SEO/SEM</option>
<option value="Advice">Advice</option>
<option value="Programming">Programming</option>
<option value="Thoughts">Thoughts</option>
</select><br>
Tagline: <input type="text" maxlength="160" name="tagline"><br>
Content:<br>
<textarea name="content" id="blog-editor" rows="10" cols="80">
</textarea><br>
Tags: <input type="text" name="tags"><br>
<input type="submit" value="Submit">
</form>
</div>
</div>
<script>
// Replace the <textarea id="blog-editor"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'blog-editor' );
CKEDITOR.config.enterMode = 2;
</script>
<footer>
<% include ../partials/footer %>
</footer>
</body>
</html>
routes.js:
var express = require('express');
var router = express.Router();
var blogDB = require('../config/blogDB.js');
var Blogpost = require('./models/blogModel.js');
var paginate = require('express-paginate');
//index
router.use(paginate.middleware(10, 50));
router.route('/')
// START GET method
.get(function(req, res, next) {
Blogpost.paginate({}, req.query.page, req.query.limit, function(err, pageCount, blogpost, itemCount) {
if (err) return next(err)
if (err)
res.send(err);
function dateDisplayed(timestamp) {
var date = new Date(timestamp || Date.now() );
return (date.getMonth() + 1 + '/' + date.getDate() + '/' + date.getFullYear());
}
blogpost.title = req.body.title; // get the blog title
blogpost.author = req.body.author; // get the author name
blogpost.tagline = req.body.tagline; // get tagline
blogpost.content = req.body.content; // get the blog content
blogpost.category = req.body.category; // get the category
blogpost.tags = req.body.tags; // get the tags
blogpost.date = dateDisplayed(req.body.date);
console.log(blogpost.date);
res.format({
html: function() {
res.render('pages/index', {
blogpost: blogpost,
pageCount: pageCount,
itemCount: itemCount
})
},
json: function() {
res.json({
object: 'blogpost',
has_more: paginate.hasNextPages(req)(pageCount),
data: blogpost
})
}
}); // END res.format(html, json)
}); // END Blogpost.paginate
}); // END GET method
router.route('/admin/posts/create')
// START POST method
.post(function(req, res) {
console.log("New instance");
var blogpost = new Blogpost(); // create a new instance of a Blogpost model
blogpost.title = req.body.title; // set the blog title
blogpost.blogUrl = blogpost.title.toLowerCase().replace(/\s+/g,"-");
blogpost.author = req.body.author; // set the author name
blogpost.tagline = req.body.tagline; // set the tagline
blogpost.content = req.body.content; // set the blog content
blogpost.category = req.body.category; // set the category
blogpost.tags = req.body.tags; // set the tags
//Save Blog Post
blogpost.save(function(err) {
if (err)
res.send(err);
res.redirect(303, '/'); //NEEDS TO BE CHANGED
});
}) // END POST method
.get(function(req, res) {
res.render('pages/blogpost-create');
});
function getSearchCriteria(params) {
return {
blogUrl: params.blogpost_blogUrl
};
}
router.route('/blog/:blogpost_blogUrl')
.get(function (req, res) {
var searchCriteria = getSearchCriteria(req.params);
Blogpost.findOne(searchCriteria, function (err, blogpost) {
if (err)
res.send(err);
res.render('pages/blogpost', {
blogpost: blogpost
})
})
})
.put(function (req, res) {
var searchCriteria = getSearchCriteria(req.params);
var updated = getBlogpostUpdate(req.body)
Blogpost.findOneAndUpdate(searchCriteria, updated, function (err, updated) {
if (err)
res.send(err);
res.json({ message: 'Blog updated.' });
});
})
.delete(function (req, res) {
var searchCriteria = getSearchCriteria(req.params);
Blogpost.findOneAndRemove(searchCriteria, function (err, removed) {
if (err)
res.send(err);
res.json({ message: 'Successfully deleted' });
});
});
module.exports = router;
blogpost.ejs:
<html>
<head>
<% include ../partials/head %>
</head>
<body>
<header>
<% include ../partials/header %>
</header>
<div class="grid">
<div class="col-1-1">
<div class="blog-content">
<h1><%= blogpost.title %></h1>
<p><%= blogpost.content %></p>
</div>
</div>
</div>
<footer>
<% include ../partials/footer %>
</footer>
</body>
</html>

Expressjs Incorrect Redirect after POST method

I have a form page that is routed to /admin/posts/create. When the form is submitted, there should be a POST method with a redirect to '/'. The issue is that when I submit the form, the redirect is not allowing for the post to go through. Cannot POST /. What is preventing this from happening?
routes.js:
var express = require('express');
var router = express.Router();
var blogDB = require('../config/blogDB.js');
var Blogpost = require('./models/blogModel.js');
var paginate = require('express-paginate');
//index
router.use(paginate.middleware(10, 50));
router.route('/')
// START GET method
.get(function(req, res, next) {
Blogpost.paginate({}, req.query.page, req.query.limit, function(err, pageCount, blogpost, itemCount) {
if (err) return next(err)
if (err)
res.send(err);
blogpost.title = req.body.title; // get the blog title
blogpost.author = req.body.author; // get the author name
blogpost.tagline = req.body.tagline; // get tagline
blogpost.content = req.body.content; // get the blog content
blogpost.category = req.body.category; // get the category
blogpost.tags = req.body.tags; // get the tags
res.format({
html: function() {
res.render('pages/index', {
blogpost: blogpost,
pageCount: pageCount,
itemCount: itemCount
})
},
json: function() {
res.json({
object: 'blogpost',
has_more: paginate.hasNextPages(req)(pageCount),
data: blogpost
})
}
}); // END res.format(html, json)
}); // END Blogpost.paginate
}); // END GET method
router.route('/admin/posts/create')
// START POST method
.post(function(req, res) {
var blogpost = new Blogpost(); // create a new instance of a Blogpost model
blogpost.title = req.body.title; // set the blog title
blogpost.author = req.body.author; // set the author name
blogpost.tagline = req.body.tagline; // set the tagline
blogpost.content = req.body.content; // set the blog content
blogpost.category = req.body.category; // set the category
blogpost.tags = req.body.tags; // set the tags
//Save Blog Post
blogpost.save(function(err) {
if (err)
res.send(err);
res.redirect(303, '/'); //NEEDS TO BE CHANGED
});
}) // END POST method
.get(function(req, res) {
res.render('pages/blogpost-create');
});
blogpost-create.ejs:
<html>
<head>
<% include ../partials/head %>
<script src="//cdn.ckeditor.com/4.4.5/standard/ckeditor.js"></script>
</head>
<body>
<header>
<% include ../partials/header %>
</header>
<div class="grid grid-pad">
<div class="col-1-1">
<h1>Blog Create</h1>
<form action="/" method="POST">
Title: <input type="text" name="title"><br>
Author:
<select>
<option>Author</option>
</select><br>
Category:
<select>
<option>Analytics/SEO/SEM</option>
<option>Advice</option>
<option>Programming</option>
<option>Thoughts</option>
</select><br>
Tagline: <input type="text" maxlength:"160" name="tagline"><br>
Content:<br>
<textarea name="blog-editor" id="blog-editor" rows="10" cols="80">
Text editor.
</textarea><br>
Tags: <input type="text" name="tags"><br>
<input type="submit" value="Submit">
</form>
</div>
</div>
<script>
// Replace the <textarea id="blog-editor"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'blog-editor' );
</script>
<footer>
<% include ../partials/footer %>
</footer>
</body>
</html>

There is no route POST /, only a route GET /.
Add
.post(function(req, res, next) {
res.json({test: 'Hello World!'});
})
after router.route('/') and try again.