In my data collection, I have multiple objects stored in arrays like so:
tableCols = [
{
"id": 50883,
"header": "ABC",
"operator": "Sum",
"order": 2
},
{
"id": 50884,
"header": "Leakage",
"operator": "Sum",
"order": 3
},
.....
]
Additionally, there is another dataset with its own array of objects:
dataArr = [
{
"id": 925095,
"grid_row_id": 170712,
"grid_col_id": 50883,
"data": "10",
"error_msg": null,
"locked": 1
},
{
"id": 926137,
"grid_row_id": 170712,
"grid_col_id": 50884,
"data": "34",
"error_msg": null,
"locked": 1
},
{
"id": 926137,
"grid_row_id": 170713,
"grid_col_id": 50883,
"data": "22",
"error_msg": null,
"locked": 1
},
{
"id": 926137,
"grid_row_id": 170713,
"grid_col_id": 50884,
"data": "100",
"error_msg": null,
"locked": 1
},
.....
]
It is noteworthy that each grid_col_id in the second array corresponds to an id in the first array.
The goal is to create a new array structured as follows:
formattedData = [
{
"ABC": 10,
"Leakage": 34,
....
},
{
"ABC": 22,
"Leakage": 100,
....
},
....
]
This involves iterating through dataArr, grouping objects by grid_row_id, and generating key-value pairs where the key matches the header in tableCols based on grid_col_id = id.
For instance, using the provided dataArr example, with grid_row_ids 170712 and 170713, we can extract the ABC and Leakage values accordingly:
"ABC": 10,
The current implementation generates a new object for each item in dataArray instead of filtering through to create a new object per row. The existing code snippet looks somewhat like this:
let ogGrid = [];
let formattedData = [];
let newObj = {};
dataArr.forEach(row => {
tableCols.forEach(element => {
if(row.grid_col_id === element.id)
newObj[element.header] = Number(row.data);
});
})
ogGrid = {...newObj};
formattedData.push(ogGrid);
});
To achieve the desired structure, what modifications should be made?