Filtering from firebase list

Hi,

This topic may be more related to Firebase/Angular than Ionic but any experienced view shall be of great help to me. I am fetching data from firebase as a list of items but want to show only the items which are related to specific customer on selection. Following are the codes:

HTML for fetching customer:

<ion-list>
        <ion-item>
          <ion-label>Choose your Customer</ion-label>
          <ion-select [(ngModel)]="retailerCustomerModel" formControlName="retailerCustomer">
            <ion-option *ngFor="let customer of customerList" [value]="customer">
              {{ customer.fullName }}
            </ion-option>
          </ion-select>
        </ion-item> 
      </ion-list>    

TS for fetching customer:

ionViewDidEnter(){
    this.retailerProvider.getUserProfile().subscribe( userProfileObservable => {
    this.retailerProvider.getRetailerCustomerList(userProfileObservable.$key)
    .subscribe( retailerListObservable => {
      this.customerList = retailerListObservable;
    });
  }); 
}

Provider for Customer list:

getRetailerCustomerList(retailerId:string): FirebaseListObservable<any> {
    return this.afDb.list(`/retailerProfile/${retailerId}/retailerCustomers`);
  }

HTML for fetching itemList:

<ion-item *ngFor="let item of itemList; let i = index" (click)="showOptions(item.$key, item.name, item.quantity, item.units, item.price)">      
            <ion-col>{{i + 1}}</ion-col>
            <ion-col>{{item.itemName}}</ion-col>
            <ion-col>{{item.itemQuantity}} </ion-col>
            <ion-col>{{item.itemUnit}} </ion-col>
            <ion-col>Rs. {{item.itemPrice}}</ion-col>            
        </ion-item>

TS for fetching item list:

ionViewDidLoad(){
   this.retailerProvider.getCustomerProfile(this.customerId).subscribe(customerProfileObservable => {
      this.retailerProvider.getItemList(customerProfileObservable.$key)
      .subscribe( itemListObservable => {
       this.itemList = itemListObservable;
      })
    })
  }

Provider for creating and fetching items:

createItem(itemName: string, itemQuantity: string, itemUnit: string, itemPrice: string, customerId:string, customerName:string, 
    customerEmail:string): firebase.Promise<any> {
      return this.afDb.list(`/billListByRetailer/${this.retailerId}/${this.customerId}/bills/items`)
      .push({itemName, itemQuantity, itemUnit, itemPrice, customerId, customerName, customerEmail})
    }

and lastly

getItemList(customerId: string): FirebaseListObservable<any> {
    return this.afDb.list(`/billListByRetailer/${this.retailerId}/${this.customerId}/bills/items/`);
  }

I get the entire list but for all customers. Thus its independent of selection of customer. I want to relate the item list with customer choice. The user must select a customer and then related item list list should fetch. I am somehow not able to figure out how the database reference and codes should work out to fetch only the items listed under specific customer on selection. I also want to fix the choice of customer before going to item selections or list.

Shall be grateful to get any help

It was very difficult to understand all the code without almost any context. I have to admit that I did not read the entire post but, there are two ways of doing what you say in the first paragraph:

  • Firebase has a function equalTo (), implement it on your getItemList (). Learn more about the function in this link https://firebase.google.com/docs/database/web/lists-of-data This will download from your database only the items that are equal to the id of your customer.

  • If you have the list of items anyways, simply add this lines of code:

In your .ts get the customer id and initiate a variable, let’s call it customerId,

<ion-item *ngFor="let item of itemList; let i = index" (click)="showOptions(item.$key, item.name, item.quantity, item.units, item.price)">      
  <div *ngIf = "item.customerId == customerId"> <!-- customer id value from item must be equal to customer id from your ts -->
     <ion-col>{{i + 1}}</ion-col>
     <ion-col>{{item.itemName}}</ion-col>
     <ion-col>{{item.itemQuantity}} </ion-col>
     <ion-col>{{item.itemUnit}} </ion-col>
     <ion-col>Rs. {{item.itemPrice}}</ion-col>
  </div><!-- don't forget to close the div tag -->
</ion-item>

Hope it works.
Happy coding.

1 Like

Thanks @RaulGM … I think I am just not setting my mind correctly to configure this. I have been trying to understand how to place codes correctly but to no vail. I am quite sure that what you are suggesting is the right way but I can’t configure it correctly. :frowning:I will be back :wink: