Filter duplicate names in angular-CodePudding

I'm getting this response

[
    {
        "Id": 51,
        "RandomId": "4545443434-aa",
        "Name": "James Smith",
    },
    {
        "Id": 21,
        "RandomId": "4545456666-aa",
        "Name": "James Smith",
    },
    {
        "Id": 31,
        "RandomId": "4543443434-aa",
        "Name": "Robert",
    },
    {
        "Id": 41,
        "RandomId": "2535443434-aa",
        "Name": "Lawrence",
    },
    {
        "Id": 71,
        "RandomId": "4534443434-aa",
        "Name": "Mathew",
    },
    {
         "Id": 21,
        "RandomId": "4543453434-aa",
        "Name": "Robert,Lawrence,Mathew",
    },
    {
        "Id": 78,
        "RandomId": "4545343434-aa",
        "Name": "Robert,Lawrence,Mathew",
    },
    {
        "Id": 34,
        "RandomId": "1545443434-aa",
        "Name": "Mathew",
    },
    {
        "Id": 12,
        "RandomId": "4545443437-aa",
        "Name": "Lawrence",
    },
    {
        "Id": 11,
        "RandomId": "4535443434-aa",
        "Name": "Robert",
    }
]

I want to filter this response so that there are no repeated names, eg. It should pick first James Smith and don't include other with the same name, Same with Robert,Lawrence,Mathew it should include first record and other records with the same name should not be included.

CodePudding user response：

You can use Array.reduce() to only include unique names from your dataset.

For each iteration we add a value to a map object using the Name as the key.

Once we've created this map object we use Object.values() to return an array.

const data = [ { "Id": 51, "RandomId": "4545443434-aa", "Name": "James Smith", }, { "Id": 21, "RandomId": "4545456666-aa", "Name": "James Smith", }, { "Id": 31, "RandomId": "4543443434-aa", "Name": "Robert", }, { "Id": 41, "RandomId": "2535443434-aa", "Name": "Lawrence", }, { "Id": 71, "RandomId": "4534443434-aa", "Name": "Mathew", }, { "Id": 21, "RandomId": "4543453434-aa", "Name": "Robert,Lawrence,Mathew", }, { "Id": 78, "RandomId": "4545343434-aa", "Name": "Robert,Lawrence,Mathew", }, { "Id": 34, "RandomId": "1545443434-aa", "Name": "Mathew", }, { "Id": 12, "RandomId": "4545443437-aa", "Name": "Lawrence", }, { "Id": 11, "RandomId": "4535443434-aa", "Name": "Robert", } ] 
 
const result = Object.values(data.reduce((acc, { Id, RandomId, Name }) => { 
    acc[Name] = acc[Name] || { Id, RandomId, Name };
    return acc;
}, {}));

console.log('Result:', result)

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

You could also use a Map to do the same thing:

const data = [ { "Id": 51, "RandomId": "4545443434-aa", "Name": "James Smith", }, { "Id": 21, "RandomId": "4545456666-aa", "Name": "James Smith", }, { "Id": 31, "RandomId": "4543443434-aa", "Name": "Robert", }, { "Id": 41, "RandomId": "2535443434-aa", "Name": "Lawrence", }, { "Id": 71, "RandomId": "4534443434-aa", "Name": "Mathew", }, { "Id": 21, "RandomId": "4543453434-aa", "Name": "Robert,Lawrence,Mathew", }, { "Id": 78, "RandomId": "4545343434-aa", "Name": "Robert,Lawrence,Mathew", }, { "Id": 34, "RandomId": "1545443434-aa", "Name": "Mathew", }, { "Id": 12, "RandomId": "4545443437-aa", "Name": "Lawrence", }, { "Id": 11, "RandomId": "4535443434-aa", "Name": "Robert", } ] 
 
const result = [...data.reduce((map, { Id, RandomId, Name }) => {
    return map.has(Name) ? map: map.set(Name, { Id, RandomId, Name });
}, new Map()).values()];

console.log('Result:', result)

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

CodePudding user response：

You can filter the existing array like this:

result = (result || []).filter((value, index, self) =>
    index === self.findIndex(item => item.Name === value.Name)
);

CodePudding user response：

If you want a slim solution, use lodash's uniqBy method.

uniqBy(myArray, 'Name`);
// or
uniqBy(myArray, element => element.Name);

Exmaple:

import { uniqBy } from 'lodash';

const myArray = [
  {
      "Id": 51,
      "RandomId": "4545443434-aa",
      "Name": "James Smith",
  },
  {
      "Id": 21,
      "RandomId": "4545456666-aa",
      "Name": "James Smith",
  },
  {
      "Id": 31,
      "RandomId": "4543443434-aa",
      "Name": "Robert",
  },
  {
      "Id": 41,
      "RandomId": "2535443434-aa",
      "Name": "Lawrence",
  },
  {
      "Id": 71,
      "RandomId": "4534443434-aa",
      "Name": "Mathew",
  },
  {
       "Id": 21,
      "RandomId": "4543453434-aa",
      "Name": "Robert,Lawrence,Mathew",
  },
  {
      "Id": 78,
      "RandomId": "4545343434-aa",
      "Name": "Robert,Lawrence,Mathew",
  },
  {
      "Id": 34,
      "RandomId": "1545443434-aa",
      "Name": "Mathew",
  },
  {
      "Id": 12,
      "RandomId": "4545443437-aa",
      "Name": "Lawrence",
  },
  {
      "Id": 11,
      "RandomId": "4535443434-aa",
      "Name": "Robert",
  }
];

console.log('before', myArray);
console.log('after', uniqBy(myArray, 'Name'));

Stackblitz: https://stackblitz.com/edit/typescript-cpdqfk?file=index.ts