SearchBox work with filtering data but not display filtered data

Hello…

Here, i am trying to filtering a data with service_title with search Box in ionic-2. It’s working fine and filter the data and give me a result when i do console.log();

The problem is that, when i type some text and press enter it’s not displaying a filtered data after all it display when i use console.log(); I have to display it in .html file.

I have to filter data with array, name of filtering data is service_title.

Please help me…

.html file

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

<ion-item *ngFor="let service of services"> <ion-label> <div class="animate-in-secondary"> <h2 class="overflow-text-wrap">{{service.service_title}}</h2> <p text-wrap>{{service.service_type}}</p> </div> </ion-label> <ion-radio [value]="service" class="animate-in-secondary"></ion-radio> </ion-item>

.ts file

getService(ev) { this.loadServices(); var q = ev.target.value; if (q.trim() == '') { return; } this.services = this.services.filter((v) => { if (v.service_title.toLowerCase().indexOf(q.toLowerCase()) > -1) { console.log(JSON.stringify(v)); return true; } return false; }) }

loadServices(): void { // console.log('bimal.....'); this.dataService.getSqlData('services').then((res) => { if (!res) { this.loadLatestServices(); } else { this.services = JSON.parse(res); } }); }

loadLatestServices(): void { this.loading = true; this.dataService.getData('api/service/v1/bookappointment/services').then(res => { this.loading = false; if (!res['error']) { let srs = res['input_data']; if(srs && srs.length){ this.dataService.setSqlData('services', srs); this.services = srs; } } }); }