How to modify an array's each object's properties based on another array in React/JS?

Question

I have two arrays in an object named "customData". The arrays names are "headings" and "tabularData".
I want to modify "tabularData" array objects such that each object has properties matching first 6 properties of "headings" array and an "id" property in "tabularData".

sample "customData" object-

{
  headings: [{"id":"k1"},{"id":"k2"},...,{"id":"k6"}],
  tabularData: [{"k1":"v11","k2":"v12",...,"id":1},{"k1":"v21":"k2":"v22",...,"id":2}]
}

Expected result should be -

[{"k1":"v11","k2":"v12",...,"k6":"v16","id":1},
{"k1":"v21","k2":"v22",...,"k6":"v26","id":2}]

My code-

let selectedHeadings = customData.headings.slice(0, 6);

let array = [];
let temp = {};
customData.tabularData.forEach((eachObj) => {
  for (const [key, value] of Object.entries(eachObj)) {
    if (
      selectedHeadings.find((heading) => heading.id === key) ||
      key === "id"
    ) {
      temp[key] = value;
      array.push(temp);
    }
  }
});
console.log(array);

sanbox link

Please help.

Jamiec · Accepted Answer · 2020-12-11 15:27:09Z

1

To start with, it makes things much easier if you turn your selected headings into a map

let selectedHeadings = customData.headings.slice(0, 6).reduce((acc, h) => {
  acc[h.id] = h;
  return acc;
}, {});

Beyond that, you were pushing to the new array inside the inner loop, not the outer loop. You should also start a new temp object inside each outer loop. This should do it:

let array = [];
customData.tabularData.forEach((eachObj) => {
  let temp = {};
  for (const [key, value] of Object.entries(eachObj)) {
    if (selectedHeadings[key] != undefined || key === "id") {
      temp[key] = selectedHeadings[key] || value;
    }
  }
  array.push(temp);
});

Forked Sandbox

answered Dec 11, 2020 at 15:27

Jamiec

136k15 gold badges142 silver badges202 bronze badges

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

Collectives™ on Stack Overflow

How to modify an array's each object's properties based on another array in React/JS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related