title: How to implement searching and filtering in Ionic
body: <p>I am fetching data from a JSON file that's stored locally within my project. The JSON string is an array of locations, whose structure is like so:</p>
  
  <p><strong>JSON file</strong> </p>
  
  <pre><code>{
      "locations": [
          {
              "title": "ABC",
              "latitude": -1.2596551,
              "longitude": 36.7066604,
              "routes":["22","23","105","115"],
              "fare":[],
              "matatu":[]
          },
          {
              "title": "Adams Arcade",
              "latitude": -1.3004204,
              "longitude": 36.7770793,
              "routes": ["2","4W","102","24","24C","111"],
              "fare":[],
              "matatu":[]
          },
          {
              "title":"Aga Khan Hospital",
              "latitude":-1.2620125,
              "longitude":36.8186399,
              "routes":["11A","11F","106","107","116"],
              "fare":[],
              "matatu":[]
          }
      ]
  }
  </code></pre>
  
  <p>Rather than filtering the data on the fly with a pipe, I have implemented a function in my <code>provider</code> to handle this. Here's the code:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http } from '@angular/http';
  import 'rxjs/add/operator/map';
  import { Geolocation } from '@ionic-native/geolocation';
  
  @Injectable()
  export class LocationProvider {
  
    data: any;
  
    constructor(public http: Http, public geolocation: Geolocation) {
  
    }
  
    load(){
  
      if(this.data){
        return Promise.resolve(this.data);
      }
  
      return new Promise(resolve =&gt; {
          this.http.get('assets/data/locations.json').map(res =&gt; res.json()).subscribe(data =&gt; {
            this.data = this.applyHarvesine(data.locations);
            this.data.sort((locationA, locationB) =&gt; {
              return locationA.distance - locationB.distance;
            });
            resolve(this.data);
          });
      });
  
    }
  
    filterLocations(searchTerm){
      return this.data.filter((location) =&gt; {
        return location.title.toLowerCase().indexOf(searchTerm.toLowerCase()) &gt; -1;
      });
    }
  
  }
  </code></pre>
  
  <p>The <code>filterLocations()</code> function is to take in <code>searchTerm</code> and returns an array containing only the elements that match the search criteria.</p>
  
  <p>Here's the <code>.ts</code> and <code>.html</code> code for the page where it is rendered.</p>
  
  <p><strong>.ts</strong> </p>
  
  <pre><code>import { Component } from '@angular/core';
  import { IonicPage, NavController } from 'ionic-angular';
  import { LocationProvider } from '../../providers/location/location';
  import { PlaceDetailsPage } from '../place-details/place-details';
  
  
  @IonicPage()
  @Component({
    selector: 'page-places',
    templateUrl: 'places.html',
  })
  export class PlacesPage {
  
    searchTerm: string = '';
  
  
  
    constructor(public navCtrl: NavController, public locations: LocationProvider) {
    }
  
    ionViewDidLoad() {
      this.setFilteredLocations();
    }
  
    setFilteredLocations(){
      return this.locations.filterLocations(this.searchTerm);
    }
  
  }
  </code></pre>
  
  <p><strong>.html</strong></p>
  
  <pre><code>&lt;ion-content&gt;
      &lt;ion-searchbar [(ngModel)]="searchTerm" (ionInput)="setFilteredLocations()"&gt;&lt;/ion-searchbar&gt;
      &lt;ion-list no-lines&gt;
          &lt;button ion-item *ngFor="let location of locations.data"&gt;
              &lt;ion-avatar item-left&gt;
                  &lt;ion-icon name="pin"&gt;&lt;/ion-icon&gt;
              &lt;/ion-avatar&gt;
              &lt;h2&gt;{{location.title}}&lt;/h2&gt;
              &lt;p&gt;{{location.distance}} km&lt;/p&gt;
          &lt;/button&gt;
      &lt;/ion-list&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>When the user types on the searchbar, <code>setFilteredLocation()</code> is called to trigger the filtering of data. The problem is, nothing happens.</p>
  
  <p>Where have I gone wrong? My hunch is that something is amiss in the <code>setFilteredLocation()</code> function, but I have no clue what it is.</p>
  
  <p>Is there an alternative approach to searching and filtering that doesn't involve pipes?</p>