Skip to content Skip to sidebar Skip to footer

Searchbar With Filter From Json Data With Ionic 3

I would like to have a search bar that filters the results based on the name of the book, I tried to do it but it does not work. When I'm looking for something, nothing happens, no

Solution 1:

Change the search bar to the following

<ion-searchbarplaceholder="Filter Items" [(ngModel)]="searchTerm" (ionInput)="filterItems()"></ion-searchbar><ion-grid><ion-row><ion-col *ngFor="let item of filterItems"><ion-card-header><h1>{{item.title}}</h1></ion-card-header><ion-card-header><h3>Autore:{{item.author}}</h3></ion-card-header><divid="immagine"><imgsrc="../assets/{{item.imageLink}}"></div></ion-col></ion-row></ion-grid>

Then in your ts file add this:

    searchTerm: string ;
    filterItems:any;
 loadData(){
    let data:Observable<any>;
    data = this.http.get("assets/books.json");
    data.subscribe(result => {
      this.items = result;
      this.filterItems= this.items;
    })

    filterItems(){
    this.filterItems = this.items.filter(item =>  item.title.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1;
     )
    }

Post a Comment for "Searchbar With Filter From Json Data With Ionic 3"