JSON data search

Ionic Framework ionic-v3
1

I am taking the data with JSON and I want to search. But no results are coming back. No error. Can you help me? Sample codes;

HTML Page;

<ion-searchbar (ionInput)=“getItems($event)” placeholder=“Müşteri arayın…”>

<ion-list *ngFor="let account of accountList">
  <ion-item>
    <h2>{{ account.name }}</h2>
    <p>{{ account.phoneNumber }} • {{ account.billingAddressCity }}</p>
    <button ion-button clear item-end>Görüntüle</button>
  </ion-item>
</ion-list>

TS Page functions;

auth.getAnyList(‘Account’).then((result) => {
if(result === true){
this.loading.dismiss();
this.accountTotal = auth.reply.total;
this.accountList = auth.reply.list;
}
}).catch(error => {
this.loading.dismiss();
console.log(“Error Message Meeting”);
});
}

initializeItems(){
this.searchItems = this.accountList;
}

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.searchItems = this.searchItems.filter((item) => {
    return (item.name.toLowerCase().indexOf(val.toLowerCase()) > -1);
  })
}

}

2

Hi, @gundogduyakici

You need to change “this.accountList” instead of “this.searchItems” this,

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

Thanks.

1 Like
3

Thanks, It’s work. But when the search section is erased, the old data does not arrive. How can I solve this.

4

getItems needs to be:

if (val && val.trim() != '') {
  this.searchItems = this.accountList.filter((item) => {
    return (item.name.toLowerCase().indexOf(val.toLowerCase()) > -1);
  })
}

And your template needs to be:

<ion-list *ngFor="let account of searchItems">
1 Like
5

I have this same problem…