Remove duplicates from an array of objects but concatenate duplicate key-CodePudding

I've an array of objects that looks like this (a sample) -

let arrTable = [
{ tableName: "name 1", tableDesc:"desc 1", tableFooter:"footer 1"},
{ tableName: "name 2", tableDesc:"desc 2", tableFooter:"footer 2"},
{ tableName: "name 1", tableDesc:"desc 1", tableFooter:"footer 3"},
{ tableName: "name 3", tableDesc:"desc 3", tableFooter:"footer 4"},
{ tableName: "name 4", tableDesc:"desc 4", tableFooter:"footer 5"},
{ tableName: "name 5", tableDesc:"desc 5", tableFooter:"footer 6"},
{ tableName: "name 6", tableDesc:"desc 6", tableFooter:"footer 7"},
];

I want to remove duplicates with the same tableName but concatenate the tableFooter for those duplicates in the one that won't be removed.

For example, the expected array of objects should be -

    let newTable = [
    { tableName: "name 1", tableDesc:"desc 1", tableFooter:"footer 1 footer 3"},
    { tableName: "name 2", tableDesc:"desc 2", tableFooter:"footer 2"},
    { tableName: "name 3", tableDesc:"desc 3", tableFooter:"footer 4"},
    { tableName: "name 4", tableDesc:"desc 4", tableFooter:"footer 5"},
    { tableName: "name 5", tableDesc:"desc 5", tableFooter:"footer 6"},
    { tableName: "name 6", tableDesc:"desc 6", tableFooter:"footer 7"},
    ];

I've checked other questions on how to remove duplicates but is there an easier way to concatenate a key without having to run a for loop and check for same tableName and create a new key that saves the tableFooter in one?

CodePudding user response：

I'd suggest using Array.reduce() to get the desired output.

We create an object with a property for each tableName, and if it already exists we append the tableFooter value.

let arrTable = [
{ tableName: "name 1", tableDesc:"desc 1", tableFooter:"footer 1"},
{ tableName: "name 2", tableDesc:"desc 2", tableFooter:"footer 2"},
{ tableName: "name 1", tableDesc:"desc 1", tableFooter:"footer 3"},
{ tableName: "name 3", tableDesc:"desc 3", tableFooter:"footer 4"},
{ tableName: "name 4", tableDesc:"desc 4", tableFooter:"footer 5"},
{ tableName: "name 5", tableDesc:"desc 5", tableFooter:"footer 6"},
{ tableName: "name 6", tableDesc:"desc 6", tableFooter:"footer 7"},
];

let newTable = Object.values(arrTable.reduce((acc, { tableName, tableFooter, ...rest}) => { 
    if (!acc[tableName]) {
        acc[tableName] = { tableName, ...rest, tableFooter};
    } else {
        acc[tableName].tableFooter  = ` ${tableFooter}`;
    }
    return acc;
}, {}))

console.log(newTable)

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

CodePudding user response：

You need another array where you can push the non-duplicate items while modifying the duplicates.

This seems to work:

let arrTable = [
  { tableName: "name 1", tableDesc:"desc 1", tableFooter:"footer 1"},
  { tableName: "name 2", tableDesc:"desc 2", tableFooter:"footer 2"},
  { tableName: "name 1", tableDesc:"desc 1", tableFooter:"footer 3"},
  { tableName: "name 3", tableDesc:"desc 3", tableFooter:"footer 4"},
  { tableName: "name 4", tableDesc:"desc 4", tableFooter:"footer 5"},
  { tableName: "name 5", tableDesc:"desc 5", tableFooter:"footer 6"},
  { tableName: "name 6", tableDesc:"desc 6", tableFooter:"footer 7"},
];


let result = [];

arrTable.forEach((entry) => {
  // if the entry already exists, we just update its footer...
  // if you still need the original, make sure to make a copy of the entry here
  let existingEntry = result.find((e) => entry.tableName === e.tableName);
  if (existingEntry) {
    existingEntry.tableFooter  = entry.tableFooter;
  } else {
    // new entries are added as they are
    result.push(entry);
  }
});

console.log('RESULT', result);