Skip to content Skip to sidebar Skip to footer
Home / Javascript / Local Storage

Push() Not Working In Javascript

Post a Comment
Problem : Uncaught TypeError: Object # has no method 'push' in console. Code in http://jsfiddle.net

Solution 1:

Change storage item id(Cart) and try again, looks like previously stored item under "Cart" id is not json array as @dc5 suggested in comment section

UPD: Try this http://jsfiddle.net/vJkBQ/4/

HTML

<div id='cart'></div>
<input type="button"id="add" value="Add To Cart item 1" />
<input type="button"id="add2" value="Add To Cart item 2" />

Javascript 

//TODO: move from globalsvar storageName = 'myCART';

$(document).ready(function () {
    var item = {
        DepartmentID :333,
        CategoryID:117,
        BrandID:19,
        BrandImage:"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",
        BrandName:"General",
        ID:711
    };
    var item2 = {
        DepartmentID :123,
        CategoryID:321,
        BrandID:18,
        BrandImage:"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;",
        BrandName:"Common",
        ID:712
    };

    localStorage.clear(storageName);
    $('#add').click(function(){
       addToCart(item);
    });

    $('#add2').click(function(){
       addToCart(item2);
    });
});

functionaddToCart(item){
    //by @slebetman   var items = JSON.parse(localStorage.getItem(storageName));
    if (! (items instanceofArray) ) {
        items = [];
    }

    var itemIndex = getItemIndexById(items, item.ID);    
    if(typeof(itemIndex) === 'number'){
        items[itemIndex].quantity++;
    }
    else{
        item.quantity = 1;
        items.push(item);
    }

    localStorage.setItem(storageName, JSON.stringify(items));
    console.log(localStorage.getItem(storageName));
}

//find search item indexfunctiongetItemIndexById(items, id){
    for(var i = 0; i < items.length; i++){
        if(items[i].ID == id){
            return i;
        }
    }

    returnfalse;
}

Solution 2:

The expression:

JSON.parse(localStorage.getItem(storageName))

is most likely not returning an array. In which case the statement:

var oldStorage = JSON.parse(localStorage.getItem(storageName)) || [];

is insufficient.

What you should do instead is something like this:

var oldStorage = JSON.parse(localStorage.getItem(storageName));
if (! (oldStorage instanceofArray) ) {
    oldStorage = [];
}

This is a simple way to detect arrays. There are more advanced methods such as checking for the existance of .length etc. that detects arrays and array like objects as well as detect arrays in cases where the Array object have been overwritten or works across iframes.

Additional answer:

You've changed the code a lot but the problem is still the same. The line:

if(items!=null) {

is not sufficient to check that items is an array. You should instead do:

if ( items instanceofArray ) {

to make sure that it really is an array.

Also, in the else block:

}else{
    console.log('Cart is empty, preparing new cart array');
    items.push(item);

The console.log message says that a new array is being prepared. However it lies as the code doesn't initialize a new array but uses the items variable as if it was an array. You should instead do this:

}else{
    console.log('Cart is empty, preparing new cart array');
    items = [];
    items.push(item);

Warning:

However, after all that, please heed the the commenters to my question. If you wrote this whole thing from scratch than doing the things I advised would solve all your problems. But if what you're doing is modifying someone else's code then it's probable that Cart was stored in a different format than what you expected.

Please do console.log(localStorage['Cart']) before calling JSON.parse and post your results here. The problem is with your local storage on your browser and cannot usually be reproduced on other people's machines.

Solution 3:

Does 

JSON.parse(localStorage.getItem(storageName))

always return an array? If so, the issue is that not all browsers support the push method. You can add use this snippet to add it if it is missing:

if(!Array.prototype.push){
    Array.prototype.push=function(x){
        this[this.length]=x;
        returntrue
    }
};

This code is just a start, you can definitely improve it

Solution 4:

You can use you can invoke Array.prototype.push() on an object using call().

JSFiddle

JavaScript

functionappendToStorage(storageName, data){
    var oldStorage = JSON.parse(localStorage.getItem(storageName)) || [];
    Array.prototype.push.call(oldStorage, data);
    localStorage.setItem(storageName,JSON.stringify(oldStorage));
}

Solution 5:

JSON.parse returns an object or null. So here you don't know if you have an object or an Array.

JSON.parse(localStorage.getItem(storageName)) || [];

You can use this instead:

functionappendToStorage(storageName, data){
    var oldStorage = JSON.parse(localStorage.getItem(storageName)) || {};
    if (oldStorage != null){
        $(oldStorage).extend(data);
        localStorage.setItem(storageName,JSON.stringify(oldStorage));
    } 
}

$.extend() will add your item to another JSON object. Info here

You may like these posts

Post a Comment for "Push() Not Working In Javascript"

Menu Halaman Statis