creating a ionic search bar to collect data from firestore cloud database

Question

I am doing an ionic project where I am trying to create a search bar that filters data from a collection in firestore cloud database. The collection is called competitions

I have created a connection with firebase and ionic by adding my credentials to environment.ts and module.app.ts retrospectively.

When I go to code the search bar, I cannot seem to retrieve the data from the firestore database. I cant tell if its down to a coding error in the ts file or if the connection is not being established correctly

I will leave the code for the homepage.html and homepage.ts code below

if anyone has any ideas why this isn't working I would appreciate any help.

I am using ionic 5 and angular 9

HOMEPAGE.HTML

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-searchbar showCancelButton (ionInput)="filterList($event)"> </ion-searchbar>
  <ion-list>
  <ion-item *ngFor="let item of goalList">
    <ion-label>{{item.collection}} </ion-label>
  </ion-item>

  </ion-list>

  </ion-content>

HOME.PAGE.TS

import { Component,OnInit } from '@angular/core';
import {AngularFirestore} from '@angular/fire/firestore';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit{
  public searchList: any[];
  public loadedsearchList: any[];


  constructor(private firestore:AngularFirestore) {}

  ngOnInit(){
    this.firestore.collection(`competition`).valueChanges().subscribe(searchList => {
      this.searchList = searchList;
      this.loadedsearchList = searchList;
    });
  }
   initializeItems():void {
     this.searchList= this.loadedsearchList;
   }

   filterList(evt){
     this.initializeItems();
     const searchTerm = evt.srcElement.value; 
     if(!searchTerm){
       return; 
     }


   this.searchList= this.searchList.filter(currentGoal =>{
  if(currentGoal.location && searchTerm){
    if(currentGoal.location.toLowerCase().indexOf(searchTerm.toLowerCase())>-1){
      return true; 
    }
    return false; 
  }

   });
  }
}

Jorge Rangel Jorge Rangel · Accepted Answer · 2021-03-28T18:35:29

In your HTML you have goalList for your ionItem, but you didn't declare goalList in your .ts file, change the variable in your HTML.

<ion-item *ngFor="let item of searchList">
    <ion-label>{{item.collection}} </ion-label>
</ion-item>

creating a ionic search bar to collect data from firestore cloud database

1 Answers