'How to resolve the error "Cannot read property 'X' of null" in NodeJs?

I am doing online NodeJs course, all code are just working fine but I am stuck at some point of mongoose part I think and this is not fetching the product title and Id in cart.ejs file and shows null.

I am getting this JavaScript error:

TypeError: D:\Huzaifa\NODE BOOTCAMP\Node 7 MONGOOSE\views\shop\cart.ejs:12
        

    10|  <% products.forEach(p => { %>
    11|                  <li class="cart__item">
 >> 12|                      <p><%= p.productId.title %></p>
    13|                      <p>Quantity: <%= p.quantity %></p>
    14|                      <form action="/cart-delete-item" method="POST">
    15|                      <input type="hidden" value="<%= p.productId._id %>"name="productId">

Cannot read property 'title' of null

My code is below:

Models product.js

 const mongoose = require('mongoose');
    
    const Schema = mongoose.Schema;
    
    const productSchema = new Schema({
      title: {
        type: String,
        required: true,
      },
      price: {
        type: Number,
        required: true,
      },
      description: {
        type: String,
        required: true,
      },
      imageUrl: {
        type: String,
        required: true,
      },
      userId: {
        type: Schema.Types.ObjectId,
        ref: 'User',
        required: true,
    },
    });
    module.exports = mongoose.model('Product', productSchema);

user.js

const mongoose = require('mongoose');

const Schema = mongoose.Schema;

const userSchema = new Schema({
  name: {
    type: String,
    required: true,
  },
  email: {
    type: String,
    required: true,
  },
  cart: {
    items: [
      {
        productId: {
          type: Schema.Types.ObjectId,
          ref: 'Product',
          required: true,
        },
        quantity: { type: Number, required: true },
      },
],
  },
});

userSchema.methods.addToCart = function (product) {
const cartProductIndex = this.cart.items.findIndex((cp) => {
    return cp.productId.toString() === product._id.toString();
  });
  let newQuantity = 1;
  const updatedCartItems = [...this.cart.items];

  if (cartProductIndex >= 0) {
    newQuantity = this.cart.items[cartProductIndex].quantity + 1;
    updatedCartItems[cartProductIndex].quantity = newQuantity;
  } else {
    updatedCartItems.push({
      productId: product._id,
      quantity: newQuantity,
    });
  }
  const updatedCart = {
    items: updatedCartItems,
  };
  this.cart = updatedCart;
  return this.save();
};

userSchema.methods.removeFromCart = function (productId) {
  const updatedCartItems = this.cart.items.filter((item) => {
    return item.productId !== productId;
  });
  this.cart.items = updatedCartItems;
  return this.save();
};
module.exports = mongoose.model('User', userSchema);

Controller shop.js

exports.getCart = (req, res, next) => {
  req.user
    .populate('cart.items.productId') 
    .then((user) => {
      // console.log(user.cart.items);
      const products = user.cart.items;

      res.render('shop/cart', {
        path: '/cart',
        pageTitle: 'Your Cart',
        products: products,
      });
    })
    .catch((err) => console.log(err));
};

exports.postCart = (req, res, next) => {
  const prodId = req.body.productId;
  Product.findById(prodId)
    .then((product) => {
      return req.user.addToCart(product);
    })
    .then((result) => {
      console.log(result);
      res.redirect('/cart');
    }); 
};
exports.postCartDeleteProduct = (req, res, next) => {
  const prodId = req.body.productId;
  req.user
    .removeFromCart(prodId)
    .then((result) => {
      console.log('removed');
      res.redirect('/cart');
    })
    .catch((err) => console.log(err));
};

cart.ejs

 <%- include('../includes/head.ejs') %>
            <link rel="stylesheet" href="/css/cart.css">
            </head>
        
            <body>
                <%- include('../includes/navigation.ejs') %>
                <main>
                    <% if (products.length > 0) { %>
                        <ul class="cart__item-list">
                            <% products.forEach(p => { %>
                                <li class="cart__item">
                                    `<p><%= p.productId.title %></p>`
                                     <p>Quantity: <%= p.quantity %></p>
                                     <form action="/cart-delete-item" method="POST">
                                        <input type="hidden" value="<%=p.productId._id %>" name="productId">
                                        <button class="btn danger" type="submit">Delete</button>
                                    </form>
                                </li>
                            <% }) %>
                        </ul>
                        <hr>
                        <div class="centered">
                            <form action="/create-order" method="POST">
                                <button type="submit" class="btn">Order Now!</button>
                            </form>
                        </div>
                        
                    <% } else { %>
                        <h1>No Products in Cart!</h1>
                    <% } %>
                </main>
                <%- include('../includes/end.ejs') %>
node.js


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions