Как отредактировать актуальные данные в localStorage по конкретному id в объекте?

Question

[Andy Koshman]

Всем добрый вечер, делаю функционал редактирования формы. В данном случае на определенной странице имеется 3 карточки с заполненной информацией из 3 форм и соответственно 3 объекта в localStorage. При клике на кнопку "редактировать" на одной из карточек пользователь возвращается на одну из форм, в которой по условию появляется из localStorage. Я написал скрипт который имеет функционал редактирования объекта из localStorage, но редактирование происходит не по актуальному PassengersId, а по последнему. Как реализовать редактирование по актуальному id?

let currentPassengers = [{
    Name: 'Jack',
  }]

  if (passengerIdEdit) { //проверяю на наличие в форме <input type="hidden" value="">
    let passengerID;
    for (let key in currentPassengers) {
      passengerID = currentPassengers[key].PassengersId; //перебираю все имеющиеся PassengersId
    }
    let newPassengersEdit = currentPassengers.map((item) => {
      if (item.PassengersId === 49) { //если вручуную ввожу актуальный id==49 
то изменения сработают, но тут нужно вместо 49 получить 
актуальный passengerID что-то типа if (item.PassengersId === passengerID)
        return {
          ...item,
          Name: 'Bob', //перезаписываю данные
        }
      }
    })
  }

Comments

[ProjectSoft]

но редактирование происходит не по актуальному PassengersId, а по последнему

Ну так это вы сами так задаёте.
Посмотрите на свой цикл и скажите, чему равен passengerID в итоге? Да, именно последнему элементу из currentPassengers.

Answer 1

[Kotaro Hiba]

// Получаем массив с объектами
const arr = localeStorage.getItem('foo')
// Ищем нужный объект по id
const item = arr.find(i => i.id === 1) // если работаем с объектами, помним, что мы получаем ссылку на объект
// Если находим, меняем какое то значение 
if (item) item.key = 123123
// Записываем массив с измененными данными в localeStorage
localeStorage.setItem('foo', arr)

Comments

[Andy Koshman]

Спасибо, я попробую по вашему примеру попрактиковаться. Еще хотел уточнить, как можно поступить в случае если id динамический? Например в данном методе:

const item = arr.find(i => i.id === 'записать выбранный(кликнутый) id из localStorage')

У меня как раз таки с этим трудности.

[Kotaro Hiba]

Andy Koshman, вы же слушатель на какую то кнопку вешаете.
можете на кнопку с которой ловите клик добавить дата атрибут

<div class="item">
 <button data-id="1" class="item__button"></button>
</div>

document.querySelectorAll('item__button').forEach(i => i.addEvenListener('click', function() {
 console.log(this.dataset.id)
}))

В коде ошибся мб чутка, но примерно так.

[Kotaro Hiba]

Вы используете какой то фреймворк?

[Andy Koshman]

Kotaro Hiba, Проект пишется на ванильном js. Я решил задачу, таким образом:

let newPassengersEdit = currentPassengers.map((item) => {
        if (item.PassengersId == passengerIdEdit.value) {
"какой то код"
        } 
   }

Я сравнил id пассажира из локального хранилища с id которое выводиться как value в скрытом инпуте, который появляется в случае редиректа.
Спасибо за внимание, вы мне тоже помогли додуматься до некоторых моментов.