How to create a new array of objects based on the values of two existing arrays?

Question

I have a data set like so where there can be many objects in the array:

tableCols = [
    {
        "id": 50883,
        "header": "ABC",
        "operator": "Sum",
        "order": 2
    },
    {
        "id": 50884,
        "header": "Leakage",
        "operator": "Sum",
        "order": 3
    },
     .....
]

And I have another data set like so where there can be many objects in the array:

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
    },
    .....
]

Note that every single grid_col_id in the second array exists as an id in the first array.

I want to create another array like so:

formattedData = [
    {
        "ABC": 10,
        "Leakage": 34,
        ....
    },
    {
        "ABC": 22,
        "Leakage": 100,
        ....
    },
    ....
]

Essentially, for every item in dataArr, for all objects with the same grid_row_id, create an object in a new array where we have new key-value pairs where the key is equal to the header in tableCols where grid_col_id = id.

For example, in the dataArr above, we have 4 known objects, with grid_row_ids 170712 and 170713 (note that there could be more). The first object has grid_row_id 50883, which in tableCols with the id 50883 has headed ABC, so a new key is created the key as ABC and the value as 10 (because data = 10 in the dataArr object).

Hence why we have the following in formattedData:

"ABC": 10,

I have something which kind of works but it creates a new object for each item in dataArray instead of filtering through the array and creating a new object for every row:

        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);
        });

How would I be able to achieve the new structure?

I don't understand how you got that leakeage value. I thought you wanted to create this new array based on the id shouldn't it look more like this? formattedData = [{ "ABC": 10, "ABC": 22 }, { "Leakage": 34, "Leakage": 100,}] — Chris G
– Chris G, Commented Aug 30, 2022 at 13:10
The leakage is 34 and ABC is 10 for the first object because the first two items in the dataArr have the same "grid_row_id": 170712, so they go in the same object. The second item in dataArr has grid_col_id 50884, which in tableCols with the same value as the id has "header": "Leakage". Back in the dataArr, we have "data": 34. So Leakage: 34 — Beginner_Hello
– Beginner_Hello, Commented Aug 30, 2022 at 13:11

trincot · Accepted Answer · 2022-08-30 13:20:13Z

3

You could create a map to translate a column id to a header name, and another map to translate a row id to an (initially empty) object. Then traverse the data to populate those objects with the help of these two maps. Finally extract the objects into an array.

const tableCols = [{"id": 50883,"header": "ABC","operator": "Sum","order": 2},{"id": 50884,"header": "Leakage","operator": "Sum","order": 3},];
const 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},];

const headerMap = new Map(tableCols.map(({id, header}) => [id, header]));
const rowMap = new Map(dataArr.map(({grid_row_id}) => [grid_row_id, {}]));
for (const {grid_row_id, grid_col_id, data} of dataArr) {
    rowMap.get(grid_row_id)[headerMap.get(grid_col_id)] = +data;
}
const data = [...rowMap.values()];

console.log(data)

answered Aug 30, 2022 at 13:20

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris G Over a year ago

good old master js trincot to the rescue. You even made it look easy. thanx pal, I was also struggling trying to solve the issue with .map but couldn't get it to work

mplungjan · Accepted Answer · 2022-08-30 14:17:08Z

1

let ogGrid = {};
let formattedData = [];
let newObj = {};

dataArr.forEach(row => {
  if (!ogGrid[row.grid_row_id]) {
    ogGrid[row.grid_row_id] = {};
  }

  tableCols.forEach(element => {
    if (row.grid_col_id === element.id) {
      ogGrid[row.grid_row_id][element.header] = Number(row.data);
    }
  });
});

for (let id in ogGrid) {
  formattedData.push(ogGrid[id]);
}

console.log(formattedData);

<script>
  const tableCols = [{
      "id": 50883,
      "header": "ABC",
      "operator": "Sum",
      "order": 2
    },
    {
      "id": 50884,
      "header": "Leakage",
      "operator": "Sum",
      "order": 3
    }
  ]

  const 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
    }
  ]
</script>

edited Aug 30, 2022 at 14:17

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Aug 30, 2022 at 13:23

Robi Szekely

114 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to create a new array of objects based on the values of two existing arrays?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related