Reduce Array by combining objects with Matching Key

Question

I have an array of contact cards that hold names & addresses etc for users. What I want to do is create another array that removes any duplicate addresses (ie people in the same household) and creates a name that is a combination of the two. For example:

{flatNum: 1, Name: "ken"},{flatNum: 1, Name: "bob"}, {flatNum: 2, Name: "emma"}

would become:

{flatNum: 1, Name: "ken & bob"}, {flatNum: 2, Name: "emma"}

I know how I can achieve this with a long for loop type thing but was hoping to find a more concise method. I am assuming that reduce would be the key and have been playing around. Currently got this:

let contactCardsComb = contactCards.reduce(function(a,b){
  if (a.flatNum == b.flatNum){
    return a.Name = a.Name+b.Name;
  }
});

Which is obviously horribly wrong but any pointers would be great

Answer 1

You could group by flatNum and get the values from the object.

const
    data = [{ flatNum: 1, Name: "ken" }, { flatNum: 1, Name: "bob" }, { flatNum: 2, Name: "emma" }],
    result = Object.values(data.reduce((r, { flatNum, Name }) => {
        if (r[flatNum]) r[flatNum].Name += ' & ' + Name;
        else r[flatNum] = { flatNum, Name };
        return r;
    }, {}));

console.log(result);

Answer 2

this can be easily accomplished by using lodash library,

let contactCards = [
  {flatNum: 1, Name: "ken"},
  {flatNum: 1, Name: "bob"},
  {flatNum: 2, Name: "emma"},
  {flatNum: 2, Name: "april"},
  {flatNum: 2, Name: "june"}
];

let tempGroup = _.groupBy(contactCards, contact => {
  return contact.flatNum;
});

console.log('tempGroup :', tempGroup);


let contactCardsComb  = Object
  .values(tempGroup)
  .map( e => e.reduce( (a,b) =>
    ({...a, Name: `${ a.Name } & ${ b.Name }` })
  ));

console.log('result : ', contactCardsComb);

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash-compat/3.10.2/lodash.min.js"></script>

// a vanilla approach would be as follows

let flatNums = Array.from(new Set(contactCards.map( e => e.flatNum)))


let groupedContactCards = flatNums
                      .map( e => contactCards
                                  .filter(contact => contact.flatNum === e))

let reducedContactCards = groupedContactCards
                      .map( e => e
                                  .reduce((a,b) => ({...a,Name:`${a.Name} & ${b.Name}`})))
console.log(reducedContactCards)

or we can wrap this as below

let reducedContactCards = Array.from(new Set(contactCards.map( e => e.flatNum)))
                .map( e => contactCards   
                .filter(contact => contact.flatNum === e))
                .map( e => e.reduce((a,b) => ({...a,Name:`${a.Name} & ${b.Name}`})))
console.log(reducedContactCards)

Answer 3

I take the OP's Q. as a chance for proofing that an abstract but (highly) configurable reduce task is in no time (less than a minute, here for the OP's problem) suitable for a variety of problems that at first sight do have nothing in common, due to the different environments and the naming of variables etc.

If one takes e.g. the following approach of this answer to another Q. ... "Segregate an array based on same name") ... some days ago, one ...

1. just needs to change the implementation (line 24) of how to merge the properties of two to be grouped items, and
2. just has to provide the correct key name (line 42) of the target value one wants to group around all the other list items.

... code ...

//  reduce function that groups
//  any data item generically by key.
function groupByKeyAndMergeProperties(collector, item) {
  const { merge, key, index, list } = collector;
  const groupKey = item[key];

  let groupItem = index[groupKey];
  if (!groupItem) {

    //  use `Object.assign` initially in order
    //  to not mutate the original (list's) reference.
    groupItem = index[groupKey] = Object.assign({}, item);
    list.push(groupItem);

    merge(groupItem, null);
  } else {
    merge(groupItem, item);
  }
  return collector;
}

//  task specific merge function,
//  here, according to the OP's goal.
function mergeItemNames(targetItem, sourceItem) {
  if (sourceItem !== null) {
    targetItem.Name = `${ targetItem.Name } & ${ sourceItem.Name }`;
  }
}


const sampleList = [
  { flatNum: 1, Name: "ken" },
  { flatNum: 1, Name: "bob" },
  
  { flatNum: 2, Name: "emma" },
  { flatNum: 2, Name: "april" },
  { flatNum: 2, Name: "june" },

  { flatNum: 3, Name: "john" }
];

console.log(
  sampleList.reduce(groupByKeyAndMergeProperties, {

    // task specific reduce configuration.
    merge: mergeItemNames,
    key: 'flatNum',
    index: {},
    list: []

  }).list
);

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