Как сформировать корректно объект js
У меня имеются две таблицы с возможностью выделения checkbox. К каждой таблице имеется соответствующий массив значений (objLeft, objRight). индекс строки (value) равен порядковому номеру массива далее я ищу все выбранные checkbox в каждой таблице document.getElementById('leftTable').querySelectorAll('input[type=checkbox]:checked'); document.getElementById('rightTable').querySelectorAll('input[type=checkbox]:checked'); и захожу в массив каждого для того чтобы сформировать новый массив paramList , там фигурируют как правило значения правого столбца, но нужно добавить ключ filter с данными левого столбца Проблема в том, что в ключ filter у меня попадает только последние значения левой таблицы (одни и теже), не пойму как сделать цикл, чтобы сопоставить эти объекты и расфасовать так, чтобы у каждой строки правой таблицы по порядку были значения левой таблицы примерный результат :
0:{
'shop' : 'anyVal',
'agr' : 'anyVal',
'table' : 'anyVal',
'columns': {
column_name: 'l2',
column_id: 1,
rus_column_name: 'Значение 1',
table_name: "headersParams",
filter : {
'vParam' : "param",
'vDescr' : "Натяжение",
'vVal' : "80",
'vParamRus' : 'Параметр Натяжение'
}
}
},
1:{
'shop' : 'anyVal',
'agr' : 'anyVal',
'table' : 'anyVal',
'columns': {
column_name: 'l2',
column_id: 1,
rus_column_name: 'Значение 2',
table_name: "headersParams",
filter : {
'vParam' : "param",
'vDescr' : "Напряжение",
'vVal' : "80",
'vParamRus' : 'Параметр Напряжение'
}
}
},
2:{
'shop' : 'anyVal',
'agr' : 'anyVal',
'table' : 'anyVal',
'columns': {
column_name: 'l2',
column_id: 1,
rus_column_name: 'Значение 3',
table_name: "headersParams",
filter : {
'vParam' : "param",
'vDescr' : "Напряжение нити",
'vVal' : "80",
'vParamRus' : 'Параметр Напряжение нити'
}
}
}
let objLeft = [
{
descr: "Натяжение",
table_name: "headersParams",
column_name: 'param',
val: "81"
},
{
descr: "Напряжение",
table_name: "headersParams",
column_name: 'param',
val: "82"
},
{
descr: "Напряжение нити",
table_name: "headersParams",
column_name: 'param',
val: "83"
},
{
descr: "Напряжение лески",
table_name: "headersParams",
column_name: 'param',
val: "84"
}
];
let objRight =[
{
column_name: 'l2',
column_id: 1,
rus_column_name: 'Значение 1',
table_name: "headersParams"
},
{
column_name: 'l2',
column_id: 1,
rus_column_name: 'Значение 2',
table_name: "headersParams"
},
{
column_name: 'l2',
column_id: 1,
rus_column_name: 'Значение 3',
table_name: "headersParams"
}
];
function funcVal(){
let paramList = [];
var checkboxesLeft = document.getElementById('leftTable').querySelectorAll('input[type=checkbox]:checked');
var checkboxesRight = document.getElementById('rightTable').querySelectorAll('input[type=checkbox]:checked');
checkboxesLeft.forEach((valL) => {
checkboxesRight.forEach((valR) => {
objRight[valR.value].filter = {
'vParam' : objLeft[valL.value].column_name,
'vDescr' : objLeft[valL.value].descr,
'vVal' : objLeft[valL.value].val,
'vParamRus' : 'Параметр '
}
paramList.push({
'shop' : paramKeyShop,
'agr' : paramKeyAgr,
'table' : paramKeyTable,
'columns': objRight[valR.value]
})
})
});
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="leftTable">
<thead>
table 1
</thead>
<br/>
<tbody>
<input class="checkbox checkbox-lg" type="checkbox" value="0" > 0
<input class="checkbox checkbox-lg" type="checkbox" value="1" > 1
<input class="checkbox checkbox-lg" type="checkbox" value="2" > 2
<input class="checkbox checkbox-lg" type="checkbox" value="3" > 3
</tbody>
</table>
<br/>
<table id="rightTable">
<thead>
table 2
</thead>
<br/>
<tbody>
<input class="checkbox checkbox-lg" type="checkbox" value="0" > 0
<input class="checkbox checkbox-lg" type="checkbox" value="1" > 1
<input class="checkbox checkbox-lg" type="checkbox" value="2" > 2
</tbody>
</table>
<button onClick="funcVal()">click</button>
в конструкторе не работает checkboxesLeft.forEach() не знаю почему, но суть попытался выразить. прошу помощи хоть какой-то