How to filter duplicate data from http response while displaying in client side?

Question

How do we filter the dublicate data? I am getting response as follows:

{username:'patrick',userid:'3636363',position:'employee'}
{username:'patrick',userid:'3636363',position:'employee'}
{username:'patrick2',userid:'3636365',position:'manager'}

I am trying to display only

{username:'patrick',userid:'3636363',position:'employee'}
{username:'patrick2',userid:'3636365',position:'manager'}

my component:

    onSubmit(data:string){
    this.http.post(this.Url+'Employee?name='data.name,data).subscribe(res=>{
       this.result=filterDuplicate(Object.values(res));
      });
    function filterDuplicate(users:any):any{
     return users.filter(user,index)=>findIndex((u)=>user.username===u.username)===index);
 }
}

html

<div *ngFor="let item of result |employee:'userId'">
{{item.userid}} {{item.username}}{{item.position}}
</div>

I tried using this.result=Array.from(new Set(res.map(value => value.userid))); but it throw error property 'map' doesnot exist on type 'Object' I have also tried creating pipe

declare var _: any; 

@Pipe({
    name: 'employee',
    pure: false
})
@Injectable()
    export class EmployeePipe implements PipeTransform {
        transform(value: any, args: any): any {

         return _.uniqBy(value, args);
    }
}

While using pipe I am getting Error ReferenceError: _ is not defined Any help will be really appreciated to list the distinct value.
res result:

>0:{username:'patrick',userid:'3636363',position:'employee'}
>1:{username:'patrick',userid:'3636363',position:'employee'}
>2:{username:'patrick2',userid:'3636365',position:'manager'}

Can you please provide information on how `res` or `this.result` looks like? Is it an array or something else? — nah0131, Feb 23 '22 at 21:03

nah0131 · Accepted Answer · 2022-02-23T22:21:34.960

Edit: If your res is an object, you might want to convert it to an array first

const users = Object.values(res);

If you have an array of user-objects like this:

const users: User[] = [
    { username: 'patrick', userid: '3636363', position: 'employee' },
    { username: 'patrick', userid: '3636363', position: 'employee' },
    { username: 'patrick2', userid: '3636365', position: 'manager' }
];

You can filter the array to contain only unique users using this function (assuming that each user is identified by a unique username)

function filterDuplicateUsers(users: User[]): User[] {
    return users.filter((user, index) => users.findIndex(
        u => user.username === u.username 
    ) === index);
}

A similar question has been posted here.

I would expect that something like this would work:

this.http.post(`${this.Url}Employee?name=${data.name}`, data).subscribe(res => {
   this.result = filterDuplicateUser(Object.values(res));
});

Since I am trying to filter out the post request response. How do I implement that function to filter ? — Notation, Feb 23 '22 at 22:15
The implementation of the `filterDuplicateUsers` function should be as illustrated in the code block. If you did not specify a `User` interface, replace it with `any` (bad practice, but works). — nah0131, Feb 23 '22 at 22:23

Theunis · Answer 2 · 2022-02-24T20:10:13.213

Readability in your primary logic flow/methods, invoking isolated code complexity in abstracted methods, helps with troubleshooting, modification and working with others.

This answer is only slightly different to nah0131's. Preference for me would be to use a pipe and that responsibility of the subscription is just to assign the values. Also definitely use the User interface suggested in the other answer - I just kept it simple as per the original question.

I'm not entirely sure which filterDuplicateUsers method is more performant, so you can swop either out with this solution. Both the abstracted methods are immutable, so it could be used with some other context within the same component later.

onSubmit(data:string) {
  this.http.post(this.Url+'Employee?name='data.name,data)
    .pipe(map(this.filterDuplicateUsers))
    .subscribe(res => {
      this.result = res;
  });
}

private filterDuplicateUsers(users: any[]) {
  return users.filter(({ userid: oId }, oIndex) =>
    !users.some(({userid: iId}, iIndex) => oIndex > iIndex && oId === iId)
  );
}

How to filter duplicate data from http response while displaying in client side?

2 Answers2