Chupachar
@Chupachar
front-end dev

По какому признаку можно присвоить id объекта другому объекту?

Всем привет, имеется форма ввода с двумя input:
1) Ввод типа автомобиля (легковая, грузовая и т.д.).
2) Ввод количества транспорта.
Допустим пользователи ввели данные (две легковые и одна грузовая машина) и сформировался вот такой массив объектов:
const cars = [{
  amount: "2",
  carId: "",
  type: "Легковая"
}, {
  amount: "1",
  carId: "",
  type: "Грузовая"
}]

Далее по шагу пользователи в следующей форме заполняют свои данные и условно создается вот такой массив водителей:
const regDriverData = [{
  carId: 10,
  driverId: 1,
  name: 'Andrew',
  type: "Легковая"
}, {
  carId: 28,
  driverId: 2,
  name: 'Bob',
  type: "Легковая"
}, {
  driverId: 3,
  carId: 36,
  name: 'Jack',
  type: "Грузовая"
}]

Вопрос заключается в том, возможно ли каким то образом присвоить carId, который создается в массиве regDriverData в объекты массива cars? Мне как то нужно связать эти 2 массива чтобы carId были правильно "расфасованы" в массиве. Или же есть какие-то другие варианты? Это мне нужно для того, чтобы при удалении какого то из объектов cars, так же удалялся объект из массива regDriverData с аналогичным carId.

https://jsfiddle.net/du4rabjv/4/

<form action="">
  <div class="car-item">
    <input type="text" class="type" placeholder="Введите тип">
    <input type="text" class="amount" placeholder="Введите количество">
  <div id="info"></div>
  <button id="btn-add">Add a car</button>
  <button id="btn-clear-all">Clear all</button>
    </div>
</form>


const info = document.querySelector('#info');
const btnAdd = document.querySelector('#btn-add');
const btnClearAll = document.querySelector('#btn-clear-all');

const getCars = () => JSON.parse(localStorage.getItem('cars')) || [];

const renderCars = () => {
  info.innerHTML = getCars().map(car => `
  	Тип автомобиля: <div>${car.type}</div>
    Количество: <div>${car.amount}</div>
  `).join('');
}

renderCars()

btnAdd.addEventListener('click', function(e) {
  e.preventDefault()
  const parentBlock = e.target.closest(".car-item");
  const type = parentBlock.querySelector(".type").value;
  const amount = parentBlock.querySelector(".amount").value;

  const addedCar = {
    carId: '',
    type: type,
    amount: amount,
  };
  const cars = getCars();
  cars.push(addedCar);
  localStorage.setItem('cars', JSON.stringify(cars));
  renderCars();
  console.log(cars)
  console.log(regDriverData)
});

btnClearAll.addEventListener('click', function(e) {
  e.preventDefault()
  localStorage.clear();
  localStorage.setItem('cars', JSON.stringify([]));
  renderCars();
});

const regDriverData = [{
  carId: 10,
  driverId: 1,
  name: 'Andrew',
  type: "Легковая"
}, {
  carId: 28,
  driverId: 2,
  name: 'Bob',
  type: "Легковая"
}, {
  driverId: 3,
  carId: 36,
  name: 'Jack',
  type: "Грузовая"
}]
  • Вопрос задан
  • 72 просмотра
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы