skip to Main Content

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 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!

2

Answers


  1. 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.

    if(!foundItems || foundItems.length === 0)
    
    Login or Signup to reply.
  2. 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);
        });
    });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search