TypeError: Cannot read properties of undefined (reading 'length') in Mongoose / Array is undefined / Angela Yu's Web Development Bootcamp Course

Question

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.sstatic.net/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 here

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!

Answer 1

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 function app.get("/", function(req, res) to:

app.get("/", function (req, res) {
  Item.find({})
    .then(foundItems => {
      if (foundItems.length === 0) {
        Item.insertMany(defaultItems)
          .then(function () {
            console.log("Successfully saved default items to DB!");
            console.log(defaultItems);
            res.redirect("/");
          })
          .catch(function (err) {
            console.log("Error inserting default items:", err);
          });
      } else {
        res.render("list", { listTitle: "Today", newListItems: foundItems });
        console.log(foundItems);
      }
    })
    .catch(err => {
      console.log("Error finding items:", err);
    });
});