Searchbar with filter from JSON data with Ionic 3

Question

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 mistake, so I'm wrong, but I do not know what, I'm new to typescript and I ask for help. Thanks in advance

this is my page.html:

<ion-content padding>
    <ion-searchbar placeholder="Filter Items" (ionInput)="getItems($event)"></ion-searchbar>
    <ion-grid>
        <ion-row>
            <ion-col *ngFor="let item of items">
                <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>   
</ion-content>

and this is my page.ts file:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable'
import 'rxjs/add/operator/map';

@IonicPage()
@Component({
  selector: 'page-tab2',
  templateUrl: 'tab2.html',
})
export class Tab2Page {
 items:any;


  constructor(public navCtrl: NavController, public navParams: NavParams, public http: HttpClient) {
this.loadData();

  }

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

   }

 initiazileItems(){
   this.items= this.items;
 }

 getItems(ev:any){
   this.initiazileItems();
   let val = ev.target.value;
 }

 filterItems(ev: any) {
    this.loadData();
    let val = ev.target.value;
    if (val && val.trim() != '') {
      this.items = this.items.filter((item) => {
        return (item.title.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }
}

example of my json:

{
    "author": "Hans Christian Andersen",
    "country": "Denmark",
    "imageLink": "images/fairy-tales.jpg",
    "language": "Danish",
    "link": "https://en.wikipedia.org/wiki/Fairy_Tales_Told_for_Children._First_Collection.\n",
    "pages": 784,
    "title": "Fairy tales",
    "year": 1836
},

Melchia · Accepted Answer · 2018-06-10 14:55:18Z

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;
     )
    }

Collectives™ on Stack Overflow

Searchbar with filter from JSON data with Ionic 3

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related