How can use searchbar with json data


#1
<ion-header>
  <ion-navbar color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      Control de ganado
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
    <ion-searchbar
  [showCancelButton]="shouldShowCancel"
  (ionInput)="getItems($event)"
  (ionCancel)="onCancel($event)">
</ion-searchbar>

  <ion-list background="white">
      <button ion-item *ngFor="let usuario of usuarios" (click)="pushPage(usuario.rfid)">
      {{usuario.rfid}} - {{usuario.raza}} - {{usuario.sexo}} 
          <div float-right>
      <ion-icon ios="ios-arrow-dropright" md="md-arrow-dropright"></ion-icon>
  </div>
  </button>


  </ion-list>

</ion-content>

ts
import { Component } from ‘@angular/core’;
import { IonicPage, NavController, NavParams } from ‘ionic-angular’;
import { HomePage } from ‘…/home/home’;
import { HttpClientModule, HttpClient } from ‘@angular/common/http’;
import { Provedor1Provider } from ‘…/…/providers/provedor1/provedor1’;
import { DispositivosPage } from ‘…/dispositivos/dispositivos’;
import { DispositivosPageModule } from ‘…/dispositivos/dispositivos.module’;

/**

@IonicPage({
name: ‘dispositivos’,
segment: ‘dispositivos/:rfid’
})
@Component({
selector: ‘page-search’,
templateUrl: ‘search.html’,
})
export class SearchPage {
usuarios:any;
items:any;

constructor(public navCtrl: NavController, public navParams: NavParams, public http: HttpClient, public proveedor: Provedor1Provider) {
}

ionViewDidLoad() {
this.proveedor.obtenerDatos()
.subscribe((data)=>{this.usuarios = data;},
(error)=>{console.log(error);}
)

}
navegar(){
//this.navCtrl.setRoot(HomePage);
}
pushPage(usuarioRFID: number){
this.navCtrl.push(‘DispositivosPage’, { usuarioRFID });

}
initializeItems() {
this.items=this.proveedor//obetnerdatos//

}

getItems(ev: any) {
// Reset items back to all of the items
this.initializeItems();

// set val to the value of the searchbar
let val = ev.target.value;

// if the value is an empty string don’t filter the items
if (val && val.trim() != ‘’) {
this.items = this.items.filter((item) => {
return (items.rfid.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
}
}
}