Задать вопрос
Chupachar
@Chupachar
front-end dev

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

Всем привет, нужно при вводе формы заполнить данными объекты массива 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);
  }
})
  • Вопрос задан
  • 76 просмотров
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы