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-searchbar placeholder="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>
<div id="immagine">
<img src="../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"