How to filter FirebaseListObservable on client side?

Question

I am using AngularFire2 within an Angular web app. Due to the query limitations of Firebase, I can't form a query that delivers exactly the data I need (At least not without making major changes to my schema).

So I want to apply an additional client-side filter criteria within javascript (typescript). How do I do this? Can I somehow add a filter function to the observable? Below is a fragment that illustrates what I'm doing.

In the HTML Template for the component, I have something like this below. The "jobs" variable in the html fragment is a FirebaseListObservable.

<tr *ngFor="let job of jobs | async"> 
  .. fill in the table rows

The component code looks like this:

   // in the member declaration of the class
   jobs : FirebaseListObservable<Job[]>;

   ...
   // Notice in ngOnInit(), I'm filtering the jobs list using the the
   // Firebase criteria. But I want to filter on an additional field. 
   // Firebase allows only single field criteria, so I'm looking for 
   // a way to apply an additional client-side filter to jobs to eliminate
   // some additional records. 

   ngOnInit(){
      this.jobs = this.af.database.list("/jobs/", {query: {orderByChild : "companyKey", equalTo:someKey}})
   }

Is there a way to apply a filter component on "this.jobs" so that I can apply a local (client-side) filter?

Answer 1

I ran into the same issue. The missing piece was to filter the array itself (Job[]), and not the Observable wrapper around it (FirebaseListObservable<Job[]>).

Was able to do this using the RxJS operator map.

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map'

...

@Component({
  ...
})
export class JobComponent {

  ...

  getJobsLessThanPrice(price: number): Observable<Job[]> {
    return this.af.database.list('jobs', {query: {...}})
      .map(_jobs => _jobs.filter(job => job.price > price));

  }
}

If job.price > price returns true, then it's included.

Also noticed your jobs property was of type FirebaseListObservable<Job>, I would have thought the observable type should be Job[] vs Job.