My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

Complex filtering on nested Objects. Angular 6

EMMANUEL OKELLO's photo
EMMANUEL OKELLO
·Nov 7, 2018

I am using Angular 6 following the official documentation. The default filtering doesn't seem to work on the nested objects like category and location. I have heard about overriding filterPredicate by doing something like this this.MyDataSource.filterPredicate after instantiation of the data source but I don't get it. Any help on how to be able to search for anything will be appreciated. below is my code snippet for the interface, filter method and the method used to render the data on the table

export interface FacilityDetails {
    status: true;
    message: [
        {
            facilityName: string;
            tillNo: string;
            category: {
                catType: string;
                catName: string;
            };
            location: {
                region: string;
                road: string;
                country: string;
                city: string;
                geoSet: false;
                'geo': {
                    latitude: number;
                    longitude: number;
                }
            }
        }
    ]
}

RenderFacilityTable() {
    this.webService.getFacilityDetails()
    .pipe(
      debounceTime(1000),
      distinctUntilChanged()
    )
    .subscribe((result: any) => {
      result.map((data) => {
        if (data.status) {
          this.MyDataSource = new MatTableDataSource();
          this.MyDataSource.data = data.message;
          this.MyDataSource.paginator = this.paginator;
          console.log('faclitiy detail', this.MyDataSource.data);
          console.log('my data', data.status);
        }
      })
    },
    error => {
      console.log('Error retrieving facilitiy details: ' + error)
    }
    )
  }

filterFacilityDetails(searchString: string) {
    searchString = searchString.trim();
    searchString = searchString.toLowerCase();
    this.MyDataSource.filter = searchString;
  }