Filtering from an observable based on another

Question

I'm trying to map observables by filtering them based on events emitted from other observables. So here's my challenge:

How do I feed a property of an event to a filter?

Here's an example with which entities I want to get. Currently it's working because I have hardcoded the relational IDs. I would like to read those IDs from observables mentioned in the comments.

export class AppComponent implements OnInit {
  currentInspection$;
  currentAircraft$;
  currentConfiguration$;

  ngOnInit() {
    const aircraft$ = Observable.of([
      { id: 1, callsign: 'D-AISY', configurationId: 100 },
      { id: 2, callsign: 'D-OOBE', configurationId: 200 },
      { id: 3, callsign: 'D-OOOO', configurationId: 100 }
    ]);
    const inspections$ = Observable.of([
      { id: 10, aircraftId: 3 },
      { id: 20, aircraftId: 2 }
    ]);
    const configurations$ = Observable.of([
      { id: 100, name: 'Default CRJ900 configuration' },
      { id: 200, name: 'Default B737 configuration' }
    ]);

    this.currentInspection$ = inspections$.pipe(
      map(inspections => inspections.find(inspection => inspection.id === 20))
    );

    // How do I get id property of this.currentInspection$ instead of 1 here?
    this.currentAircraft$ = aircraft$.pipe(
      map(aircraft => aircraft.filter(a => a.id === 1)) // I want the "1" to not be hardcoded
    );

    // How do I get configurationId property of this.currentAircraft$ instead of 100 here?
    this.currentConfiguration$ = configurations$.pipe(
      map(configurations => configurations.filter(c => c.id === 100)) // I want the 100 to not be hardcoded
    );
  }
}

And here is a live example: https://stackblitz.com/edit/angular-streamception?file=src%2Fapp%2Fapp.component.ts

I have tried using mergeMap to merge the first observable with the latter and filter from within, but it feels like working against the reactive way.

If I'm approaching the problem from a wrong angle, please do point me in the right direction.

Could you provide more details as to what behavior are you wanting to produce? Should items be filtered following the streams of values? — Joshua Chan
I would like to filter aircraft$ to get currentAircraft$ depdending on the ID of currentInspection$'s configurationId property. And also filter out a currentConfiguration$ from $configurations based on the id of the currentAircraft$'s configurationId property. Currently 1 and 100 there are hardcoded. — Lightheaded
I know, but how different is it from just pure arrays? How are you going to determine which inspectionId to use. And when you have the id, you filter it against the emitted values in the other observables at that moment or? — Joshua Chan
It is entirely possible that I'm trying to force the usage of observables where it isn't necessary. Do you propose just subscribing to the streams and setting an instance variable to the value of the event? — Lightheaded
It depends on what you want to achieve. If you want the filter to be dynamic and trigger through the observable stream then it is a possible use case. Else just aggregate the data with subscribe and filter? — Joshua Chan

Joshua Chan Joshua Chan · Accepted Answer · 2018-05-28T15:02:03

I'm not sure what's the supposed behavior that you want, but I hacked up something from my understanding of your problem, hopefully it helps you to know what direction you need to go.

Check out the stackblitz.

Filtering from an observable based on another

1 Answers