Searchbar Not Updating, But Data prints correctly


#1

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:&nbsp;{{data.Lease}}</h3>
    <p>Due:&nbsp;{{data.Due_Date}}</p><p item-right>Invoice:&nbsp;{{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!