0

Всем доброго времени, вопрос касается удаления объектов из localStorage. Имеется корзина в которую при клике отрендерилась карточка с данными и записалась в localStorage под ключом "cabins" который получаю c помощью getItem как currentTariff, при клике на "крестик" карточка удаляется вместе с e.target объектом из массива currentTariff в localStorage. функционал удаления объектов из currentTariff отрабатывает правильно. При переходе на следующую страницу и заполнении формы добавляется еще один массив passengers в localStorage. При возвращении на страницу с корзиной нужно реализовать правильное удаление объектов из массивов currentTariff и passengers на основе их общего ключа cabinCategoryID. Подскажите пожалуйста как это можно реализовать.

// 2 массива из localStorage
 let currentTariff = [{
     cabinCategoryID: 1,
   },
   {
     cabinCategoryID: 2,
   }
 ]
 let passengers = [{
     name: 'Bob',
     cabinCategoryID: 1,
   },
   {
     name: 'Jack',
     cabinCategoryID: 2,
   }
 ]

 /*  let currentTariff = JSON.parse(localStorage.getItem("cabins") || "[]");
  let passengers = JSON.parse(localStorage.getItem("Passengers") || "[]"); */

 function updateState() {
   localStorage.setItem("cabins", JSON.stringify(currentTariff)); //создание ключа "cabins"
 }

 function deleteState(index, idxPass) { // функия удаления объектов из массивов currentTariff и passengers
   if (index > -1) {
     currentTariff.splice(index, 1);
     updateState();
   }
   if (idxPass > -1) { // вот тут не получается удалять "выбранные объекты" 
     let passDel = passengers.splice(idxPass, 1);
     console.log("delete pass: ", passDel);
   }
 }

 function removeItem(e) { // функция удаления карточки
   if (e.target.classList.contains("tariff__port-close")) { // "крестик" на карточке
     let info = e.target.closest(".sidebar-item"); // сама карточка
     let idxCabin = [...sidebarInfo.children].findIndex( // удаление карточки из рендера 
       (el) => el.querySelector(".tariff__port-close") == e.target
     );

     // организация удаления второго объекта из массива passengers
     // нужно удалить из двух массивов currentTariff и passengers объекты с одинаковым cabinCategoryID 
     let idxPass = currentTariff.findIndex((cabin) => // сравниваю ключи из двух массивов  
       passengers.some(
         (cabinPass) => cabin.cabinCategoryID === cabinPass.cabinCategoryID
       )
     );
     deleteState(idxCabin, idxPass);
     info.remove();
   }
 }

1 ответ 1

0
  1. Если у вас есть ID, то зачем вы обращаетесь по индексам? Может лучше хранить объект, в котором ключ это cabinCategoryID, а значение данные?

  2. Можно сделать костыль вроде этого.

 let currentTariff = [{
     cabinCategoryID: 1,
   },
   {
     cabinCategoryID: 2,
   }
 ]
 let passengers = [{
     name: 'Bob',
     cabinCategoryID: 1,
   },
   {
     name: 'Jack',
     cabinCategoryID: 2,
   }
 ]

 /*  let currentTariff = JSON.parse(localStorage.getItem("cabins") || "[]");
  let passengers = JSON.parse(localStorage.getItem("Passengers") || "[]"); */

 function updateState() {
   console.log(currentTariff); // localStorage.setItem("cabins", JSON.stringify(currentTariff));
   console.log(passengers); // localStorage.setItem("Passengers", JSON.stringify(passengers));
 }

 function deleteState(index) { // функия удаления объектов из массивов currentTariff и passengers
   if (index > -1) {
     
     const cabinCategoryID = currentTariff[index].cabinCategoryID;
     passengers = passengers.filter((i) => i.cabinCategoryID !== cabinCategoryID);
     
     currentTariff.splice(index, 1);
     updateState();
   }
 }
 
 deleteState(0);

3
  • Спасибо, я хотел еще уточнить правильно ли я понял вашу работу. Насколько я понимаю в этой переменной const cabinCategoryID = currentTariff[index].cabinCategoryID; инициализируется ключ cabinCategoryID массива currentTariff, в passengers мы присваиваем сравнение ключей двух массивов и при удалении currentTariff.splice(index, 1) должен удалиться еще и объект из passengers помимо currentTariff благодаря манипуляциям выше? Спасибо за ответ. 1 ноя 2022 в 15:36
  • 1. Находим по индексу запись в тарифах; 2. В переменную cabinCategoryID ID категории; 3. Фильтруем массив passengers исключая элементы с ID категории; Но это больше костыль. Вам нужно построить логику именно на ID категории, а не на индексах. Используя индексы массива вы делаете логику запутанной и оставляете много мест для ошибок 2 ноя 2022 в 8:32
  • Я всё еще пытаюсь решить данную задачу, я правильно понял ваш вариант? Оно удаляет теперь всё из хранилища passengers. jsfiddle.net/muhoja52 Я не могу понять почему у меня не получается из массива passengers удалить именно тот объект который совпадает с объектом массива currentTariff по ключу cabinCategoryID. 2 ноя 2022 в 13:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.