Ionic 4, Firebase and Searchbar

#1

Hi, I need help with using the searchbar to find the names from Firebase. I have successfully been able to list all of the names from Firebase, but I am having trouble with searching Firebase for a certain name.

home.page.html

<ion-content>
    <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
  <ion-list>
    <ion-item-sliding *ngFor="let info of infos">
      <ion-item detail lines="full" routerLink="/detail/{{info.key}}">
        <ion-icon name="desktop" slot="start"></ion-icon>
        {{info.info_name}}
      </ion-item>
    </ion-item-sliding>
  </ion-list>
</ion-content>

home.page.ts- I am able to see the name that I am entering in the searchbar with the console.log.

 export class HomePage {

  infos = [];
  ref = firebase.database().ref('infos/');

  public infosList:Array<any>;
  public loadedInfoList:Array<any>;

  constructor(private route: ActivatedRoute, public router: Router, public alertController: AlertController) {
    this.ref.on('value', resp => {
      this.infos = [];
      this.infos = snapshotToArray(resp);

      this.infosList.forEach(info =>{
        this.infos.push(info.val());
        return false;

      });
    });
    this.infosList = this.infos;
    this.loadedInfoList = this.infos;
   
  }

  initializeItems(){
    this.infosList = this.loadedInfoList;
  }

   getItems(ev: any) {
    // Reset items back to all of the items
    this.initializeItems();
    
    // // set q to the value of the searchbar
    // var q = searchbar.srcElement.value;
    let q = ev.target.value;

    // if the value is an empty string don't filter the items
    if (!q) {
      return;
    }

    this.infosList = this.infosList.filter((info) => {
      if(info.info_name && q) {
        if (info.info_name.toLowerCase().indexOf(q.toLowerCase()) > -1) {
          return true;
        }
        return false;
      }
    });

    console.log(q, this.infosList.length);

  }
}

export const snapshotToArray = snapshot => {
  let returnArr = [];

  snapshot.forEach(childSnapshot => {
      let item = childSnapshot.val();
      item.key = childSnapshot.key;
      returnArr.push(item);
  });

  return returnArr;
}