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

Question

[Andy Koshman]

Всем привет, нужно при вводе формы заполнить данными объекты массива currentPassengers по id. В данном случае я использовал такую конструкцию для поиска одинакового id:

if (item.PassengersId === passengerIdEdit) { 
          return {
            ...item,
            Name: dataName,
            Surname: dataSurname,
          };
}

Проблема в том что объекты заполняются не правильно, хотя правильный id ищется и находится даже. Подскажите пожалуйста где и в чем может быть ошибка? Как-то оно совершенно криво работает, может быть что-то связано с map.

https://jsfiddle.net/748k6guh/8/
https://codepen.io/Andy41/pen/abaovBJ?editors=1112

<form class="form">
  <div class="form-item">
    <input type="hidden" class="passenger-id" value="86">
    Name: <input class="form-name" type="text">
    Surname: <input class="form-surname" type="text">
    <button type="submit" class="btn">get</button>
  </div>
  <div class="form-item">
    <input type="hidden" class="passenger-id" value="42">
    Name: <input class="form-name" type="text">
    Surname: <input class="form-surname" type="text">
    <button type="submit" class="btn">get</button>
  </div>
  <div class="form-item">
    <input type="hidden" class="passenger-id" value="45">
    Name: <input class="form-name" type="text">
    Surname: <input class="form-surname" type="text">
    <button type="submit" class="btn">get</button>
  </div>
</form>

const form = document.querySelector('form')

const currentPassengers = [{
    CabinCategoryID: 1,
    PassengersId: 86,
    Name: '',
    Surname: '',
    WithSeat: 1,
  },
  {
    CabinCategoryID: 2,
    PassengersId: 42,
    Name: '',
    Surname: '',
    WithSeat: 0,
  },
  {
    CabinCategoryID: 2,
    PassengersId: 45,
    Name: '',
    Surname: '',
    WithSeat: 0,
  }
]

form.addEventListener('click', function(e) {
  e.preventDefault();
  let targetItem = e.target;
  const parentBlock = targetItem.closest(".form-item");
  if (targetItem.classList.contains("btn")) {
    const formName = parentBlock.querySelector(".form-name").value;
    const formSurname = parentBlock.querySelector(".form-surname").value;
    const passengerIdEdit = +parentBlock.querySelector(".passenger-id").value;

    let dataForm = { //введенны данные формы
      CabinCategoryID: parseInt(parentBlock.dataset.id),
      PassengersId: parseInt(passengerIdEdit),
      Name: formName,
      Surname: formSurname,
    };

		//введеные данные формы
    const dataName = dataForm.Name; 
    const dataSurname = dataForm.Surname;

    const pushPassDataInObj = (...args) => {
      currentPassengers.map((item) => { //перебираю массив который хочу заполнить по id
        if (item.PassengersId === passengerIdEdit) { //нахожу актуальный id
          return { //изменяю актуальны данные массива currentPassengers на введенные по id
            ...item,
            Name: dataName,
            Surname: dataSurname,
          };
        }
        item.Name = args[0];
        item.Surname = args[1];
      });
    }
    pushPassDataInObj(
      dataName,
      dataSurname,
    );
    console.log("currentPassengers: ", currentPassengers);
  }
})

Answer 1

[chelnokov_a]

Метод map() не меняет исходный массив а возвращает модифицированный (пример на скрине)



Такж е, если тебе надо поменять данные в 1 обьекте из массива, то лучше сначала получить его через метод find()

const currentObj = currentPassengers.find(item => item.PassengersId === passengerIdEdit)
currentObj.Name = dataName;
currentObj.Surname: dataSurname;

Как-то так. Это не обязательно, но более понятно что происходит.

Comments

[Andy Koshman]

Да спасибо, этот вариант сработал. Можете пожалуйста еще подсказать, как мне правильно теперь измененные объекты перезаписывать в массив currentPassengers? Вот вариант с find: https://jsfiddle.net/ypt7e50a/1/

[chelnokov_a]

Ссылка не рабочая.

currentObj.Name = dataName;
currentObj.Surname: dataSurname;

Эти строки должны изменить исходный обьект

[chelnokov_a]

Andy Koshman,