Hello all,
This may be a rather simple fix, but I’m having an issue with my search bar functionality. I’ve converted a JSON array and allowed it to populate on html, but search bar is not filtering the data.
Data
[
0: {
Icon : "workorders.png",
Company: "Test Company",
Lease: "Test Lease",
Due_Date: "05/31/2018",
Invoice: "New Invoice"
}
1: {
Icon : "workorders.png",
Company: "Test Company",
Lease: "Test Lease",
Due_Date: "05/31/2018",
Invoice: "New Invoice"
}
]
queue.ts
ionViewDidLoad() {
//grabs JSON array, formats array
this.stemAPI.getData(this.token).then((result) =>{
this.queueData = result.toString().replace(/\s/g,'');
this.finalData = JSON.parse(this.queueData);
//Pipe
for(var i =0;i<this.finalData.length-1;i++){
this.safePipe.transform(this.finalData[i]['Color']);
}
this.initializeItems();
}, (err) => {
console.log(err);
});
}
initializeItems(){
this.searchData = this.finalData;
}
getItems(ev: any) {
//reloads view
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.searchData.filter((data)=>{
if(!data.Company){console.log('here1'); return false;}else{console.log('here2');
return (data.Company.toLowerCase().indexOf(val.toLowerCase()) > -1);
}
});
}
}
queue.html
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-list no-lines>
<button ion-item (click)="itemSelected(item)" *ngFor="let data of finalData | search : terms
[style.background-color]="data.Color | safe: 'style'" >
<ion-avatar item-start>
<img src="{{data.Icon}}" alt="" >
</ion-avatar>
<h2>{{data.Company}}</h2>
<h3>Lease: {{data.Lease}}</h3>
<p>Due: {{data.Due_Date}}</p><p item-right>Invoice: {{data.Invoice}}</p>
</button>
I am wanting to search by the Company name and when I console log the return data in the getItems() method the values are accurate as I’m typing, but nothing is populating.
Thanks!