Uncaught TypeError: Cannot read properties of null (reading 'push')

Viewed 54

When I try adding product to cart it shows this error in the developer tools Uncaught TypeError: Cannot read properties of null (reading 'push') [1]: https://i.stack.imgur.com/gdEVp.png

And this is the code for adding items to cart:

 /*-------------------------
     Shopping Cart Function
 ---------------------------*/
 var countTotalItem;//var to count total
 var cart=[];//object cart
 var Item=function(url, name, price, count){
     this.url=url;
     this.name=name;
     this.price=price;
     this.count=count;
     this.size=42;
 };//object item

 var Item1=function(url, name, price, count, size){
     this.url=url;
     this.name=name;
     this.price=price;
     this.count=count;
     this.size=size;
 };

 function addToCart(url, name, price, count){
     for(var i in cart){
         if(cart[i].name===name){
             cart[i].count+=count;
             //if there are same item, then just change the total count
             countTotalItem= countTotalItem + 1;
             saveCart();//save it to local storage
             return;
         }
     }
     var item= new Item(url, name, price, count);
     cart.push(item);//if new item, then add it to cart object
     countTotalItem= countTotalItem + 1;
     saveCart();
 }

 function addToCart(url, name, price, count,size){
     for(var i in cart){
         if(cart[i].name===name){
             cart[i].count+=count;
             countTotalItem= countTotalItem + 1;
             saveCart();
             return;
         }
     }
     var item1= new Item1(url, name, price, count,size);
     cart.push(item1);
     countTotalItem= countTotalItem + 1;
     saveCart();
 }

 function removeFromCart(name){
     var substractCount=0;
     for(var i in cart){
         if(cart[i].name===name){
             substractCount=cart[i].count;
             countTotalItem-=substractCount;
             //if find the item that match name, then remove it.
             cart.splice(i, 1);
             saveCart();// save to local storage
             break;
         }
     }
 }
 function listCart(){
     var cartCopy=[];
     for(var i in cart){
         var item=cart[i];
         var itemCopy={};
         for(var p in itemCopy){
             itemCopy[p]=item[p];
         }
         cartCopy.push(itemCopy);
     }
     return cartCopy;
 }
 function clearCart(){
     cart = [];//clear the cart
     count=0;
     saveCart();//save to local storage
 }
 function countTotalPrice(){
     var totalPrice=0;
     for(var i in cart){
         //count total price
         totalPrice += cart[i].price * cart[i].count;
     }
     return totalPrice;
 }

 function saveCart(){
     //save the cart object to local storage with in string form
     localStorage.setItem('shoppingCart', JSON.stringify(cart));
     localStorage.setItem('countItem', JSON.stringify(countTotalItem));
 }

 function loadCart(){
     //get the string of cart then parse it into object
     cart= JSON.parse(localStorage.getItem('shoppingCart'));
     countTotalItem= JSON.parse(localStorage.getItem('countItem'));
 }
 loadCart();

And from the answer of David setting the cart array as null it solves the problem of reading the data in LocalStorage but when I try to open the cart it remains empty. Can anyone please help me for the clicked product to show in the cart? I am a beginner in jQuery your help is deeply appreciated.

1 Answers

If cart.push() causes this error then clearly cart is null. If you look at everywhere you assign a value to cart in this code, most times it's explicitly an array:

cart = [];

But one instance is different:

cart = JSON.parse(localStorage.getItem('shoppingCart'));

What does this do when the "shoppingCart" item in localStorage is empty or doesn't exist? It sets cart to null.

For cases where that happens, provide a default value as an empty array:

cart = JSON.parse(localStorage.getItem('shoppingCart')) ?? [];
Related