Angular http return Mat Table filter data to specific columns-CodePudding

I want to filter the api return based specific column in mat-table. In my case , I want the the table only show finished status only. right now I manage to display the data on the mat table

here is my component.ts

export class EarningComponent implements OnInit {
  bookings: any = [];
  jobs:any = [];
  product:any =[];
  filterbooking:any =[];

  displayedColumns: string[] = ['id','title','status','painter_name','earning'];
  dataSource = new MatTableDataSource();

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.getlist()
  }

  getlist() {
    const body = {
      opcode: 'order_list',
      size: 20,
      page: 1,
      sign: 'e5111c807c49a330399b4ca36a27162',
    };
    this.http
      .post<any>('http://api.1shikj.com/cgi-bin/operate', body)
      .subscribe((data) => {
        this.bookings = data.data.data;
      });
  }
}

here is my output

CodePudding user response：

If you want to filter the array being returned from you http request, then you can apply the .filter() method to that array.

this.bookings = data.data.data.filter(booking=>booking.status==='finished');