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"