Sign in
Log inSign up

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;
  }
Hassle-free blogging platform that developers and teams love.
  • Docs by Hashnode
    New
  • Blogs
  • AI Markdown Editor
  • GraphQL APIs
  • Open source Starter-kit

© Hashnode 2024 — LinearBytes Inc.

Privacy PolicyTermsCode of Conduct