Merge two arrays of objects and add array name as a property

Question

I try to merge two arrays of objects and at the same time add their name as a property to the objects:

const firstGroup = [
    {
        firstname: 'Nick',
        id: 1
    },
    {
        firstname: 'Joe',
        id: 2
    },
]

const secondGroup = [
    {
        firstname: 'Tom',
        id: 1
    },
]

The desired output:

allGroups = [
    {
        groupname: 'firstGroup',
        firstname: 'Nick',
        id: 1
    },
    {
        groupname: 'firstGroup',
        firstname: 'Joe',
        id: 2
    },
    {
        groupname: 'secondGroup',
        firstname: 'Tom',
        id: 1
    }
]

Here is what I tried:

Object
    .entries({ firstGroup, secondGroup })
    .reduce((acc, [name, [firstname, id]]) => ([{
        ...acc,
        groupname: name,
        firstname,
        id
    }]), [])

But it doesn't work and I can't figure out how I can do it.

Thanks for your help !

Answer 1

Your code was close, but you're creating a new array on each iteration rather than modifying the "accumulator" array reduce passes around, and only taking the properties from the first entry in the source array, not all of them.

reduce just adds complexity here IMHO, I'd use a for-of loop over the entries of the object you created. Within the loop body, map the entries to new entries with the group name, then push them all on allGroups. Like this:

const allGroups = [];
for (const [groupname, entries] of Object.entries({firstGroup, secondGroup})) {
    allGroups.push(...entries.map(entry => ({groupname, ...entry})));
}

Live Example:

const firstGroup = [
    {
        firstname: 'Nick',
        id: 1
    },
    {
        firstname: 'Joe',
        id: 2
    },
];

const secondGroup = [
    {
        firstname: 'Tom',
        id: 1
    },
];

const allGroups = [];
for (const [groupname, entries] of Object.entries({firstGroup, secondGroup})) {
    allGroups.push(...entries.map(entry => ({groupname, ...entry})));
}
console.log(allGroups);

But here's a working version of your reduce approach:

const firstGroup = [
    {
        firstname: 'Nick',
        id: 1
    },
    {
        firstname: 'Joe',
        id: 2
    },
];

const secondGroup = [
    {
        firstname: 'Tom',
        id: 1
    },
];

const allGroups = Object.entries({ firstGroup, secondGroup })
    .reduce((acc, [groupname, entries]) => {
        acc.push(...entries.map(entry => ({groupname, ...entry})));
        return acc;
    }, []);
console.log(allGroups);

---

In a comment you've asked:

...what if I want in the final object just a selection of the initial properties eg. groupname, firstname but not id ?

You'd change the places above where I have entry => to ({firstname}) => to destructure the listed property(ies) from the object, and change where I have ...entry to firstname to fill in just that/those properties on the new object. So for instance:

allGroups.push(...entries.map(({firstname}) => ({groupname, firstname})));

Live example - for-of:

const firstGroup = [
    {
        firstname: 'Nick',
        id: 1
    },
    {
        firstname: 'Joe',
        id: 2
    },
];

const secondGroup = [
    {
        firstname: 'Tom',
        id: 1
    },
];

const allGroups = [];
for (const [groupname, entries] of Object.entries({firstGroup, secondGroup})) {
    allGroups.push(...entries.map(({firstname}) => ({groupname, firstname})));
}
console.log(allGroups);

Live example - reduce:

const firstGroup = [
    {
        firstname: 'Nick',
        id: 1
    },
    {
        firstname: 'Joe',
        id: 2
    },
];

const secondGroup = [
    {
        firstname: 'Tom',
        id: 1
    },
];

const allGroups = Object.entries({ firstGroup, secondGroup })
    .reduce((acc, [groupname, entries]) => {
        acc.push(...entries.map(({firstname}) => ({groupname, firstname})));
        return acc;
    }, []);
console.log(allGroups);

Answer 2

Below snippet of code can be used to achieve the result.

Object.entries({ firstGroup, secondGroup }).reduce((acc, [groupname, groupItems]) => {

for (item of groupItems){

    acc.push({
    ...item,
    groupname
    });
}

return acc; 

}, [])