angular - Làm thế nào để lọc dữ liệu trùng lặp từ phản hồi HTTP khi hiển thị ở phía client?

Làm thế nào chúng ta lọc dữ liệu trùng lặp? Tôi đang nhận được phản hồi như sau:

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

Tôi đang cố gắng chỉ hiển thị

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

thành phần của tôi:

    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>

Tôi đã thử sử dụng this.result=Array.from(new Set(res.map(value => value.userid))); nhưng nó ném lỗi property 'map' does not exist on type 'Object' Tôi cũng đã thử tạo 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);
    }
}

Khi sử dụng pipe, tôi nhận được Lỗi ReferenceError: _ chưa được định nghĩa Mọi sự giúp đỡ sẽ được hoan nghênh để liệt kê các giá trị riêng biệt.
kết quả res:

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

Câu trả lời #1

Chỉnh sửa: Nếu res của bạn là một đối tượng, bạn có thể muốn chuyển nó thành một mảng trước

const users = Object.values(res);

Nếu bạn có một mảng các đối tượng người dùng như thế này:

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

Bạn có thể lọc mảng để chỉ chứa các người dùng duy nhất bằng cách sử dụng hàm này (giả sử rằng mỗi người dùng được xác định bằng một tên người dùng duy nhất)

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

Một câu hỏi tương tự đã được đăng ở đây.

Tôi sẽ mong rằng một thứ gì đó như thế này sẽ hoạt động:

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

Câu trả lời #2

Độ dễ đọc trong luồng logic/phương thức chính của bạn, khi gọi độ phức tạp mã tách rời trong các phương thức trừu tượng, giúp việc khắc phục sự cố, chỉnh sửa và làm việc với người khác trở nên dễ dàng hơn.

Câu trả lời này chỉ hơi khác so với của nah0131. Sự ưu tiên của tôi là sử dụng một pipe và trách nhiệm của subscription chỉ là gán các giá trị. Ngoài ra chắc chắn nên sử dụng giao diện User được đề xuất trong câu trả lời khác - tôi chỉ giữ nó đơn giản theo câu hỏi gốc.

Tôi không hoàn toàn chắc phương thức filterDuplicateUsers nào hiệu năng hơn, vì vậy bạn có thể thay thế bất kỳ phương thức nào bằng giải pháp này. Cả hai phương thức trừu tượng đều bất biến, vì vậy chúng có thể được sử dụng với một số ngữ cảnh khác trong cùng một thành phần sau này.

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