I’m making a todolist in browser from Angela Yu’s Web Development Bootcamp Course. My problem is that when I try to start the web app from the browser (localhost:3000
) I get the error:
TypeError: Cannot read properties of undefined (reading 'length')
My code is:
//jshint esversion:6
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://127.0.0.1:27017/todolistDB",
{
useUnifiedTopology: true,
useNewUrlParser: true,
serverSelectionTimeoutMS: 5000
}).catch(err => console.log(err.reason));
const itemsSchema = {
name: String
};
const Item = mongoose.model("Item", itemsSchema);
const item1 = new Item({
name: "Welcome to your todolist!"
});
const item2 = new Item({
name: "Hit the + button to add a new item."
});
const item3 = new Item({
name: "<-- Hit this to delete an item."
});
const defaultItems = [item1, item2, item3];
app.get("/", function(req, res) {
Item.find({}).then(function(err, foundItems){
if(foundItems.length === 0) {
Item.insertMany(defaultItems).then(function(err) {
if(err) {
console.log(err);
} else {
console.log("Successfully saved default items to DB!");
console.log(defautItems);
}
});
res.redirect("/");
}
else {
res.render("list", {listTitle: "Today", newListItems: foundItems});
console.log(foundItems);
}
});
});
app.post("/", function(req, res){
const itemName = req.body.newItem;
const item = new Item({[enter image description here](https://i.stack.imgur.com/C2viu.png)
name: itemName
});
item.save();
res.redirect("/");
});
app.get("/work", function(req,res){
res.render("list", {listTitle: "Work List", newListItems: workItems});
});
app.get("/about", function(req, res){
res.render("about");
});
app.listen(3000, function() {
console.log("Server started on port 3000.");
});
The error refers to the foundItems array which is strangely undefined. The elements of this array are stored in the MongoDB database and must be displayed in the web application todolist. But this is not happening because of the mentioned error. If the foundItems array does not have any items (its length is equal to zero), the items of the defaultItems array will be automatically added to the list when the web application is loaded in the browser. Because the "foundItems" array is undefined, the application cannot execute the statement foundItems.length === 0, which causes the error to occur.
Finally I mention the fact that the connection to the MongoDB server is functional and that I can store (outside the app.get method) the items of the "defaultItems" array in the database.
I await your answers with great interest!
2
Answers
This is because
foundItems
might not have data all the time. You can add a check to see if foundItems is defined.Change your
if
condition with this check before accessing the length.You’re probably receiving another error from Mongoose on
app.get("/", function(req, res)
function. If you change your code slightly, you’ll see the real error. So replace your functionapp.get("/", function(req, res)
to: