Ionic 2 searcher with json array

@Thomas2017 wrote:

I have taken the search bar demo docs and changed the code to use this.items as a json array and not strings. I keep getting an EXCEPTION: Error during evaluation of "input". yet if I go back to string there are no problems. i am just experimenting at this time to see what can be done with Ionic 2 search. Here is a sample of the code

html

<ion-navbar *navbar>
   <ion-title>Searchbar</ion-title>
</ion-navbar>

<ion-content padding class="status">

     <ion-searchbar [(ngModel)]="searchQuery" (input)="getItems($event)"></ion-searchbar>

  <ion-list>
      <ion-item *ngFor="#item of items">
           {{ item.name }}<br>{{ item.position}}
      </ion-item>
  </ion-list>
</ion-content>

js

import {Page} from 'ionic/ionic';

@Page({
templateUrl: 'build/pages/status/status.html',
})
export class Status {
   constructor() {
        this.searchQuery = '';
        this.initializeItems();
}

initializeItems() {
  this.items = [
      {"name":"Moby Dick","position":"Big ass whale"},
      {"name":"Jaws","position":"Fish with anger issues"}
  ];
}

getItems(searchbar) {
  // Reset items back to all of the items
  this.initializeItems();
  // set q to the value of the searchbar
  var q = searchbar.value;
  // if the value is an empty string don't filter the items
  if (q.trim() == '') {
    return;
  }

   this.items = this.items.filter((v) => {

    if (v.toLowerCase().indexOf(q.toLowerCase()) > -1) {
       return true;
      }

      return false;
    })

 }
}

Posts: 2

Participants: 2

Read full topic