Filter duplicate names in angular

Question

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.

See: https://stackoverflow.com/questions/2218999/how-to-remove-all-duplicates-from-an-array-of-objects — Tamil Selvan C, Sep 01 '22 at 09:49

Terry Lennox · Accepted Answer · 2022-09-01T09:59:14.747

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; }

JanP · Answer 2 · 2022-09-01T11:23:20.363

2

You can filter the existing array like this:

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

edited Sep 01 '22 at 11:23

answered Sep 01 '22 at 09:58

JanP

1,579
2
16
27

Thanks will it throw error if result is blank or null? – user3653474 Sep 01 '22 at 10:28
I edited my answer with a solution for that. Now it gives an empty array if result is blank or null. – JanP Sep 01 '22 at 11:24

score 1 · Answer 3 · answered Sep 01 '22 at 10:07

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

Filter duplicate names in angular

3 Answers3