RxJS Filter / Search Subject, Observable, or BehaviorSubject

Question

I just started learning RxJS. One thing I have tried to do without much luck is, figuring out how to search/filter a Subject, or create an observed array that I can search on.

I've tried piping and filtering a Subject and BehaviorSubject, but the values in the predicate are RxJS specific. From what I've read on various posts, the way is to observe an array to use a Subject.

I can easily have two variables, one array and the Subject, and search the array. But I'd like to accomplish this one variable.

In Knockout its possible to search an observed array.

Is this possible in RxJS?

Thanks in advance.

Example:

layers: Rx.Subject<any> = new Rx.Subject<any>();

toggleLayer (layerId, visible) {

  //find layer we need to toggle

 // How do I search the subject to get the values added in next()?

   // tried from(this.layers), pipe does not fire
    const source = of(this.layers);

    const example = source.pipe(filter((val, index) => {
   //val is subject, and only iterates once, even if more than one value in subject
      // tslint:disable-next-line:no-debugger
      debugger;
      return false;
    }));

    const sub = example.subscribe((val) => {
      // tslint:disable-next-line:no-debugger
      debugger;
    });

}

private addLayer = (layerName, layerObj, layerType) => {

  // component class is subscribed to layers subject. Update UI when layer is added
  this.layers.next({
      layerId: this.layerId,
      name: `${layerName}_${this.layerId}`,
      layerObj: layerObj,
      visible: true,
      layerType: layerType
    });

}

It is not clear what do you mean, could you please provide some code example with input and output you would like to receive? — Oles Savluk
Yes but you have to search the array. e.g. subject$.map(data => data.filter(...)) — MotKohn
from RxJS function accepts an array as input and returns an Observable which emits once per each item contained in the array. So, if you really want to search/filter using an Observable starting from an array you can do from(myArray).pipe(filter(item => item.foo = 'bar')) — Picci
@OlesSavluk What I'm tying to do is search a Subject. We can pass in values using next(), so how do I find the values using filter inside the subject? And I want to do this using one variable. I dont want to keep a seperate array to search on. One subject variable. Just like knockout. — user714157
@Picci But the problem is, I need to 'watch' for changes because I have a component class that listens for changes to that array, aka subject. From what I've read, the only way to do that is to use a Subject, not an observable from(array) — user714157

Jeff Fairley Jeff Fairley · Accepted Answer · 2018-10-10T14:06:08

I'm not 100% clear on the specifics of your ask, but maybe this example will help you.

const filterSubject = new BehaviorSubject<string>('b');
const dataSubject = new BehaviorSubject<string[]>(['foo', 'bar', 'baz', 'bat']);
const dataObservable = combineLatest(filterSubject, dataSubject).pipe(
  // given an array of values in the order the observables were presented
  map(([filterVal, data]) => data.filter(d => d.indexOf(filterVal) >= 0))
);

dataObservable.subscribe(arr => console.log(arr.join(',')));
// bar, baz, bat

Using combineLatest, you can have the value in dataObservable updated whenever either your filter value or your data array changes.

RxJS Filter / Search Subject, Observable, or BehaviorSubject

1 Answers