Javascript merge array of objects, no duplicates

Question

I have the following data:

// Data
const groups = [
    [
        { group: 'All', entries: 121, score: 10.89, grade: 16, avg: 15.8 },
        { group: 'All', entries: 221, score: 20.89, grade: 26, avg: 25.8 },
        { group: 'All', entries: 321, score: 30.89, grade: 36, avg: 35.8 },
        { group: 'All', entries: 421, score: 40.89, grade: 46, avg: 45.8 }
    ],

    [
        { group: 'Inner', entries: 121, score: 10.89, grade: 16, avg: 15.8 },
        { group: 'Inner', entries: 221, score: 20.89, grade: 26, avg: 25.8 },
        { group: 'Inner', entries: 321, score: 30.89, grade: 36, avg: 35.8 },
        { group: 'Inner', entries: 421, score: 40.89, grade: 46, avg: 45.8 }
    ],

    [
        { group: 'Outer', entries: 121, score: 10.89, grade: 16, avg: 15.8 },
        { group: 'Outer', entries: 221, score: 20.89, grade: 26, avg: 25.8 },
        { group: 'Outer', entries: 321, score: 30.89, grade: 36, avg: 35.8 },
        { group: 'Outer', entries: 421, score: 40.89, grade: 46, avg: 45.8 }
    ]
];

My desired outcome is:

// Desired
[
    [
        {
            group: 'All',
            entries0: 121,
            score0: 10.89,
            grade0: 16,
            avg0: 15.8,
            entries1: 121,
            score2: 10.89,
            grade2: 16,
            avg2: 15.8,
            entries3: 121,
            score3: 10.89,
            grade3: 16,
            avg3: 15.8,
            entries4: 121,
            score4: 10.89,
            grade4: 16,
            avg4: 15.8
        }
    ]
    ... all other groups formatted the same
];

Please can anyone point me in the right direction? I have tried numerous options but my code so far is as follows:

groups.map((group) => {
    return Object.values(group).reduce((acc, curr) => {
        !acc.includes(curr.group) &&
            acc.push({
                group: curr.group,
                ...curr.score
            });

        return acc;
    });
});

Answer 1

Using reduce and Object.entries. This is just slight changes to your direction.

const groups = [
  [
    { group: "All", entries: 121, score: 10.89, grade: 16, avg: 15.8 },
    { group: "All", entries: 221, score: 20.89, grade: 26, avg: 25.8 },
    { group: "All", entries: 321, score: 30.89, grade: 36, avg: 35.8 },
    { group: "All", entries: 421, score: 40.89, grade: 46, avg: 45.8 }
  ],

  [
    { group: "Inner", entries: 121, score: 10.89, grade: 16, avg: 15.8 },
    { group: "Inner", entries: 221, score: 20.89, grade: 26, avg: 25.8 },
    { group: "Inner", entries: 321, score: 30.89, grade: 36, avg: 35.8 },
    { group: "Inner", entries: 421, score: 40.89, grade: 46, avg: 45.8 }
  ],

  [
    { group: "Outer", entries: 121, score: 10.89, grade: 16, avg: 15.8 },
    { group: "Outer", entries: 221, score: 20.89, grade: 26, avg: 25.8 },
    { group: "Outer", entries: 321, score: 30.89, grade: 36, avg: 35.8 },
    { group: "Outer", entries: 421, score: 40.89, grade: 46, avg: 45.8 }
  ]
];

const updated = groups.map(group => [
  group.reduce(
    (acc, curr, i) =>
      Object.assign(
        acc,
        Object.fromEntries(
          Object.entries(curr).map(([key, value]) => [
            `${key}${key === "group" ? "" : i}`,
            value
          ])
        )
      ),
    {}
  )
]);

console.log(updated);

Answer 2

You could take two nested loops.

const
    groups = [[{ group: 'All', entries: 121, score: 10.89, grade: 16, avg: 15.8 }, { group: 'All', entries: 221, score: 20.89, grade: 26, avg: 25.8 }, { group: 'All', entries: 321, score: 30.89, grade: 36, avg: 35.8 }, { group: 'All', entries: 421, score: 40.89, grade: 46, avg: 45.8 }], [{ group: 'Inner', entries: 121, score: 10.89, grade: 16, avg: 15.8 }, { group: 'Inner', entries: 221, score: 20.89, grade: 26, avg: 25.8 }, { group: 'Inner', entries: 321, score: 30.89, grade: 36, avg: 35.8 }, { group: 'Inner', entries: 421, score: 40.89, grade: 46, avg: 45.8 }], [{ group: 'Outer', entries: 121, score: 10.89, grade: 16, avg: 15.8 }, { group: 'Outer', entries: 221, score: 20.89, grade: 26, avg: 25.8 }, { group: 'Outer', entries: 321, score: 30.89, grade: 36, avg: 35.8 }, { group: 'Outer', entries: 421, score: 40.89, grade: 46, avg: 45.8 }]],
    result = groups.map(a => a.reduce((r, { group, ...o }, i) => {
        r.group = group;
        Object.entries(o).forEach(([k, v]) => r[k + i] = v);
        return r;
    }, {}));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Here's one option - for each group array, make an entry of the group, then flatMap the inner objects' entries, taking only non-group keys, and mapping each entry to add the index to each:

const groups = [
    [
        { group: 'All', entries: 121, score: 10.89, grade: 16, avg: 15.8 },
        { group: 'All', entries: 221, score: 20.89, grade: 26, avg: 25.8 },
        { group: 'All', entries: 321, score: 30.89, grade: 36, avg: 35.8 },
        { group: 'All', entries: 421, score: 40.89, grade: 46, avg: 45.8 }
    ],

    [
        { group: 'Inner', entries: 121, score: 10.89, grade: 16, avg: 15.8 },
        { group: 'Inner', entries: 221, score: 20.89, grade: 26, avg: 25.8 },
        { group: 'Inner', entries: 321, score: 30.89, grade: 36, avg: 35.8 },
        { group: 'Inner', entries: 421, score: 40.89, grade: 46, avg: 45.8 }
    ],

    [
        { group: 'Outer', entries: 121, score: 10.89, grade: 16, avg: 15.8 },
        { group: 'Outer', entries: 221, score: 20.89, grade: 26, avg: 25.8 },
        { group: 'Outer', entries: 321, score: 30.89, grade: 36, avg: 35.8 },
        { group: 'Outer', entries: 421, score: 40.89, grade: 46, avg: 45.8 }
    ]
];

const output = groups.map(
  groupArr => [Object.fromEntries([
    ['group', groupArr[0].group],
    ...groupArr.flatMap(
      (obj, i) => Object.entries(obj)
        .filter(([key]) => key !== 'group')
        .map(([key, val]) => [key + i, val])
      )
  ])]
);
console.log(output);