Filtering from firebase list


#1

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


#2

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.


#3

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: