Всем привет, имеется форма ввода с двумя 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: "Грузовая"
}]