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

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

CodePudding user response：

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