При удалении последнего товара из корзины, остается пустой массив, хотя я его удаляю

Рейтинг: 0Ответов: 1Опубликовано: 23.01.2023

Написал функцию , которая получает id продукта, который нужно удалить из корзины. Перебором массива let cart = JSON.parse(localStorage.getItem("products")); я получаю элемент, содержащий нужный нам id. С помощью indexOf Я узнаю порядковый номер этого продукта в нашем массиве cart. С помощью cart.splice(serialNum, 1); я удаляю нужный мне элемент. Запарился и сделал проверки, авось пустой массив останется или еще что. В общем, этот вот скрипт ищет нужный мне элемент, удаляет его и заново забрасывает массив в LS

    function deleteFromCart (x){
    /*Вносим наши данные в массив*/
    let cart = JSON.parse(localStorage.getItem("products"));
    /*Перебираем каждый элемент массива на наличие совпадений с id удаляемого товара*/
    for(i=0;i<cart.length;i++){
        /*Если такой id есть*/
        if (cart[i].id == x){
            /*Полностью выводим объект, чтоб по нему найти его порядковый номер в массиве*/
            let ourX = cart[i];
            /*Находим порядковый номер в массиве*/
            let serialNum = cart.indexOf(ourX);
            cart.splice(serialNum, 1);
        }
    }
    /*Делаем проверку, если массив после удаления товаров пустой, то полностью чистим LS, чтоб корректно выводилась запись в корзину*/
    if(cart==null){
        localStorage.removeItem("products");
    }else{
        /*Пушим обратно уже отредактированный(без удаленного элемента) массив*/
        localStorage.setItem("products",JSON.stringify(cart));
        loadItemsToCart();
    }
} 

Затем я обновляю корзину в скрипте выше с помощью вызова этой функции:

function loadItemsToCart() {
/*Записываем массив товаров из нашего LS с товарами*/
let isProducts = JSON.parse(localStorage.getItem("products"));
/*Если в LS нет товаров*/
if(isProducts == null){
    let targetPlace = document.querySelector('.prodFromCart');
    targetPlace.innerHTML = "";
    targetPlace.insertAdjacentHTML('afterBegin', '<a id="emptyBasket">Ваша корзина пустая(</a>');
}else{
    /*Если длина массива товаров СТРОГО БОЛЬШЕ НУЛЯ*/
    if(isProducts.length>0){
        /*Для этого я обнуляю html в корзине, присваивая всему, что было в этом теге, пустую строку*/
        document.querySelector('.prodFromCart').innerHTML = "";
        /*Далее перебором массива товаров я заполняю корзину*/
        for(let i=0; i<isProducts.length;i++){
            let targetPlace = document.querySelector('.prodFromCart');
            targetPlace.insertAdjacentHTML('afterBegin',
            '<div id="cartForm'+isProducts[i].id+'" class="cart-form">'
                +'<img class="cart-img" src='+isProducts[i].photo+'>'
                +'<div class="this-info">'
                    +'<div class="this-pname"><a class="this-pname-text">'+isProducts[i].name+'</a></div>'
                    +'<div class="this-count-and-price"><a class="this-count-text" id="this-count'+isProducts[i].id+'">'+isProducts[i].count+' &times; '+'</a><a class="this-price-text">'+isProducts[i].price+' AED'+'</a></div>'
                    +'<div class="this-amount"><a class="this-amount-text">Amount:</a></div></div>'
                    +'<div class="delAndAmountBtn"><div class="deleteCart" id="'+isProducts[i].id+'" onclick="deleteFromCart(this.id)"><a class="deleteX">&times;</a></div><div class="amountBtns amountCartBtns"><button class="btnMinus" id="minus'+isProducts[i].id+'" onclick="delCountCart(this.id)">-</button><input class="amountInput" id="amount'+isProducts[i].id+'" type="number" value="'+isProducts[i].count+'" min="1" maxlength="4" size="4"><button class="btnPlus" id="plus'+isProducts[i].id+'" onclick="addCountCart(this.id)">+</button></div></div>'
                    +'<hr class="cartHR" color="#6A6A6A" size="1">'
                +'</div>'
            );
        }
    }
}

}

Но даже после всего проделанного мной, в LS остается пустой элемент, который портит мне жизнь. Где я мог ошибиться? Помогите пожалуйста. Уже 37 час сижу за компом и хочу добить сайт, но все как обычно идет не так как хотелось...

Ответы

▲ 0Принят

Замените

if(cart==null)
if(isProducts == null)

на

if(!cart.length)
if(!isProducts.length)

Хоть и пустой, но массив, никогда не будет null, однако можно с помощью свойства length получить его длину.

Будьте внимательны, если вы "занулите" массив, а при первом добавлении товара в корзину не превратите переменную в массив принудительно, получите ошибку Cannot read property of undefined или is not a function в зависимости от того, как определена переменная.