my jQuery code not working on the first click?

Question

In the first click, the code not finding the "item.id". "items" is come from LocalStorage, and it is not NULL

console.log(items);
$('.user-basket__product-delete>span.icon-trash').click(function(){
            let n = $(this).parents('.user-basket__product').attr('data-id');
           console.log(items);
            $.each(items, function(index,item){
                if(item.id === parseInt(n)){
                    items.splice(index,1);
                    localStorage.setItem('items',JSON.stringify(items)); 
                    $.priceEvents.totalPriceEvent(items);
                }
            })
            $(this).parents('.user-basket__product').remove();
            setTimeout(function() { 
                $.noContent();
            }, 200);
        })

and the bug

Uncaught TypeError: Cannot read property 'id' of null
    at all.js:4075
    at Function.each (all.js:169)
    at HTMLSpanElement.<anonymous> (all.js:4074)
    at HTMLSpanElement.dispatch (all.js:1945)
    at HTMLSpanElement.h.handle (all.js:1883)
(anonymous) @ all.js:4075
each @ all.js:169
(anonymous) @ all.js:4074
dispatch @ all.js:1945
h.handle @ all.js:1883

and the items in the console before click and after the first click. I realized now, the code deleted the item.id in LocalStorage in the first click but return 3-element array. After a second click, remove parents element and fix array

(3) [{…}, {…}, {…}]
0: {id: 5, name: "Product 4", detail: "Lorem ipsum dolor sit amet", price: "99", cargo: "9.95", …}
1: {id: 3, name: "Product 2 Lorem Ipsum mix Pro", detail: "Lorem ipsum dolor sit amet", oldPrice: "110", price: "99", …}
2: {id: 4, name: "Product 3", detail: "Lorem ipsum dolor sit amet", price: "99", cargo: "9.95", …}
length: 3
__proto__: Array(0)
all.js:4074 
(3) [{…}, {…}, {…}]
0: {id: 3, name: "Product 2 Lorem Ipsum mix Pro", detail: "Lorem ipsum dolor sit amet", oldPrice: "110", price: "99", …}
1: {id: 4, name: "Product 3", detail: "Lorem ipsum dolor sit amet", price: "99", cargo: "9.95", …}
length: 2
__proto__: Array(0)

Show initial value of `items`. `console.log(items); $('.user-basket...-trash').click(` — Justinas, Feb 08 '21 at 08:15
Notice how the second log is `(3) [{...}, {...}, {...}]` but when expanded there are only 2 items. Logging objects can be tricky because they are "live". To debug an object you may need to `console.log(JSON.stringify(obj))` to get a "fixed" representation. — Niet the Dark Absol, Feb 08 '21 at 08:33

score 1 · Accepted Answer · edited Feb 08 '21 at 18:48

It appears that localStorage.setItem() is unreliably synchronous (see here). It might be a good idea to call that method outside of a loop. Also, to prevent race conditions you may want to avoid removing the data you're using before your operation has completed. Maybe make a copy of the data and work from that. In the example below it uses filter since you seem to be removing an item by ID but saving all other info to storage.

$('.user-basket__product-delete>span.icon-trash')
  .click(function () {
    const n = $(this).parents('.user-basket__product').attr('data-id');
    const updatedItems = items.filter(item => item.id !== parseInt(n));
    items = updatedItems;

    localStorage.setItem('items', JSON.stringify(items));
    $.priceEvents.totalPriceEvent(items);
    $(this).parents('.user-basket__product').remove();

    // Probably safe to do this without a timeout
    setTimeout(function() { 
      $.noContent();
    }, 200);
}

my jQuery code not working on the first click?

1 Answers1