JavaScript, split object in 2, and push in array

Question

I have an array of objects like this:

const arrayOfObjects = [
  { A: 1, B: 2, C: 3 },
  { A: 3, B: 4, C: 1 }
]

And another array which is called "headers"

const headers = [
  ['A', 'B'],
  ['C']
]

I have to create an array similar to the first one but, with those objects splited by what headers have in it's arrays.

This should be the goal:

const result = [
  [
    { A: 1, B: 2 },
    { C: 3 }
  ],
  [
    { A: 3, B: 4 },
    { C: 1 }
  ]
]

I tried by doing a "base" array with:

const baseArray = []
headers.forEach((header) => {
  const objFromHeader = {};
  header.forEach((head) => {
    objFromHeader[head] = 0;
  });
    baseArray.push(objFromHeader);
});

That will give me the result array but with 0 values for each key.

And then loop for the first array and put inside another array the base array with the correct values.

Then I wanted to fill each key according to the value that comes from arrayOfObjects but here is where I can't see how could I loop that array of objects and put the correct value. The only problem with that approach is that the result array will have some 0 values that come from the initiation array that I'm using, it would be better to me to only put the objects that actually have values and not 0 (I was thinking on another function to delete those keys with value = 0...)

How could I achieve it in a better way?

Fiddle:

https://jsfiddle.net/pmiranda/Lpscz6vt/

Answer 1

const arrayOfObjects = [
  { A: 1, B: 2, C: 3 },
  { A: 3, B: 4, C: 1 },
];
const headers = [['A', 'B'], ['C', 'D']];
const result = arrayOfObjects.map((obj) =>
  headers.map((header) =>
    header.reduce((acc, key) => {
      acc[key] = obj[key];
      return Object.keys(acc).reduce((newAcc, key) => {
        if (acc[key]) {
          newAcc[key] = acc[key];
        }
        return newAcc;
      }
        , {});
    }, {})
  )
);
console.log(result);

Answer 2

Array.forEach implementation

Logic

• Loop through arrayOfObjects array.
• Inside that, loop through headers array.
• Inside that, loop through each array in the headers array.
• Create an empty object and assign the property from nodes in headers array with values from objects in arrayOfObjects array.

const arrayOfObjects = [
    { A: 1, B: 2, C: 3 },
    { A: 3, B: 4, C: 1 }
];

const headers = [
    ['A', 'B'],
    ['C']
];

const baseArray = []
arrayOfObjects.forEach((obj) => {
    const childNode = [];
    headers.forEach((head) => {
        const node = {};
        head.forEach((key) => node[key] = obj[key]);
        childNode.push(node);
    });
    baseArray.push(childNode);
});
console.log(baseArray)

Array.map and Array.reduce implementation.

Using the same logic implementes in the above solution, we can rewrite this using Array.map and Array.reduce as below.

const arrayOfObjects = [
    { A: 1, B: 2, C: 3 },
    { A: 3, B: 4, C: 1 }
];

const headers = [
    ['A', 'B'],
    ['C']
];

const output = arrayOfObjects.map((obj) => {
    return headers.map((header) => {
        return header.reduce((acc, curr) => {
            acc[curr] = obj[curr];
            return acc;
        }, {});
    })
})
console.log(output);