Как удалить все объекты из массива по заданному свойству и правильно пересчитать значения данных свойств?

Question

[Andy Koshman]

Всем привет, суть кода в том чтобы при клике на крестик удалить объекты из массива prices и пересчитать общую сумму sumPrice. В данном кусочке кода при клике на Х, я реализовал "очистку" массива prices, в который уже имеются объекты с ценойprice, в данном случае есть 2 объекта в корзине: cabin и baggage. Проблема в том, что по какой-то причине общая сумма sumPrice при клике на Х оставляет сумму багажа в sumPrice, хотя все объекты из prices были удалены и оно не пересчитывается на 0. Подскажите пожалуйста, глаз зымылился.

https://jsfiddle.net/2waf95gx/34/
https://codepen.io/Andy41/pen/NWLdjvw?editors=1111

<div class="sidebar">
  <div class="info">
    <div class="cabin">cabin <span class="remove" >X</span></div>
    <div class="baggage">baggage</div>
  </div>
  sum: <span id="tariff-val">0</span>
</div>

const cabin = [{ //карточка каюты
   cabinID: 12,
   name: 'Bob',
 }]
 const baggage = [{ //карточка выбранного багажа
   baggageID: 4,
 }]

 const prices = [{ //массив цен 
     cabinID: 12,
     price: 100,
   },
   {
     baggageID: 4,
     price: 80,
   }
 ]

 const deleteTariff = document.querySelector('.remove')
 const sidebarInfo = document.querySelector('.sidebar')
 const cab = document.querySelector('.cab')

 //записываю массивы в LS
 const cabinLS = localStorage.setItem("cabin", JSON.stringify(cabin));
 const priceLS = localStorage.setItem("prices", JSON.stringify(prices));
 const baggageLS = localStorage.setItem("baggage", JSON.stringify(baggage));

 //подсчет актуальной суммы
 let sum = prices.reduce((acc, curr) => acc + curr.price, 0)
 const sumPrice = localStorage.setItem("sumPrice", JSON.stringify(sum)); // общая сумма в LS

 //функция вывода суммы карточек cabin в разметку
 function getSumPriceToRender() {
   let tariffVal = document.querySelector("#tariff-val");
   let sumPrice = parseInt(localStorage.getItem("sumPrice")) || 0;
   tariffVal.innerHTML = sumPrice;
 }
 getSumPriceToRender();

 //удаление карточки cabin
 deleteTariff.addEventListener('click', function(e) { //удаляем карточку каюты
   let idxCabin = [...sidebarInfo.children].findIndex( //нахожу актуальную "кликнутую" карточку
     (el) => el.querySelector(".remove") == e.target
   );
   deleteState(idxCabin); //передаю аргумент индекс в функцию deletState
   getSumPriceToRender(); //актуализирую вывод суммы карточек cabin в разметку при удалении 

   function deleteState(index) {
     const prices = JSON.parse(localStorage.getItem("prices") || "[]"); //получаю текущий массив цен
     if (index > -1) {
       const cabinID = cabin[index].cabinID;
       prices.splice(index, 1); //удаление объекта "актуальной" цены в массиве price
       cabin.splice(index, 1); //удаление объекта "актуальной" цены в массиве cabin
       removeBaggagePrice(prices);
     }
   }

   //удаление объекта имеющего свойство baggageID и перезапись price и sumPrice
   function removeBaggagePrice(price) {
     const deleteBaggagePrice = price.filter( //проверка price на наличие свойства baggageID
       (prop) => !prop.hasOwnProperty("baggageID") //если есь удалить объект
     );
     localStorage.setItem("prices", JSON.stringify(deleteBaggagePrice));
     let sumAfterRemove = price.reduce((acc, curr) => acc + curr.price, 0);
     localStorage.setItem("sumPrice", JSON.stringify(sumAfterRemove));
   }
 })

Answer 1

[szQocks]

Ты не отфильтровываешь price , ты получаешь ссылку на отфильрованный массив, а сам price массив не изменяется.

Решение:

const deleteBaggagePrice = price = price.filter( //проверка price на наличие свойства baggageID
       (prop) => !prop.hasOwnProperty("baggageID") //если есь удалить объект
     );

Comments

[Andy Koshman]

Спасибо большое, всё работает. Подскажите еще пожалуйста, данная записьconst deleteBaggagePrice = price = price.filter() означает присвоить ссылку отфильтрованного массива в исконный и записать в переменную deleteBaggagePrice?

[szQocks]

Andy Koshman, да

[szQocks]

Andy Koshman, или лучше даже так сделать

//удаление объекта имеющего свойство baggageID и перезапись price и sumPrice
   function removeBaggagePrice(price) {
     const filteredPrices = price.filter( //проверка price на наличие свойства baggageID
       (prop) => !prop.hasOwnProperty("baggageID") //если есь удалить объект
     );
     localStorage.setItem("prices", JSON.stringify(filteredPrices));
     let sumAfterRemove = filteredPrices.reduce((acc, curr) => acc + curr.price, 0);
     localStorage.setItem("sumPrice", JSON.stringify(sumAfterRemove));
   }
 })

[Andy Koshman]

szQocks, Еще раз спасибо.