RxJs 唯一地合并两个可观察对象

Question

I am using rxjs to build a searching and filtering system in an angular App.

I have the following:

interface User{ //exmaple model
 _id: string;
 name: string;
}

filters$ = new BehaviorSubject<Array<User>>([]);
search$ = new BehaviorSubject<Array<User>>([]);

// I use these two and merge them in another function as following

const myData$ = merge(this.search$.asObservable(), this.filters$.asObservable())
.pipe(distinctUntilChanged(distinctCheck))

With the utility function distinctCheck being something like:

const distinctKey = (elem) => {
    if(elem === null){
      return elem
    }
    if(this.hasId(elem)){
      return elem["_id"];
    }
    if(this.hasName(elem)){
      return elem["name"]
    }
    return this.createComparisonString(elem)
  }

But this biges me either one or the other observable. So my question is:

How can I merge the two observables and emit only the values that are common to both arrays? Where sometimes filters$ might emit an array of 30 elements. And sometimes search$ might emit an array of only 2 elements?

IE:

if filter$ contains:

[{_id:'1', name:'jhon'},{_id:'2', name:'doe'},{_id:'3', name:'jolly'},{_id:'4', name:'some random dude'},{_id:'5', name:'some random other dude'},{_id:'6', name:'johny'},{_id:'7', name:'bravo'}]

and search$ contains:

[{_id:'1', name:'jhon'},{_id:'101', name:'myDoe'},{_id:'301', name:'some-jolly'},{_id:'4', name:'some random dude'}, {_id:'7', name:'bravo'}]

I would like myData$ to emit something like:

[{_id:'1', name:'jhon'},{_id:'4', name:'some random dude'}, {_id:'7', name:'bravo'}]

Thank you all: :)

Answer 1

The compare function of distinctUntilChanged operator is used to tell if the previous emission is different than the current emission.

As I understood your question, you are looking for intersection between the search and filter arrays.

First, use combineLatest operator to get notified whenever search$ of filter$ emits.
Then, you can use something like lodash's intersectionWith to get the arrays intersection.

Your code should look something like this:

const comperator = (search, filter) => filter._id === search._id && filter.name === search.name; 

const myData$ = combineLatest(search$, filter$).pipe(
  map(([search, filter]) => intersectionWith(search, filter, comperator))
);

You can check the full running code in this stackblitz

Answer 2

Something like this should work:

const filters$ = new BehaviorSubject<Array<{ id: string }>>([]);
const search$ = new BehaviorSubject<Array<{ id: string }>>([]);

const combinedAndFiltered$ = combineLatest(filters$, search$)
    .pipe(map(([filters, searches]) => {
        return filters.filter(filter => !!searches.find(search => search.id === filter.id));
    }));

combinedAndFiltered$.subscribe(console.log)

Answer 3

You could actually achieve it with plain Javascript.

 var filterArr = [{_id:'1', name:'jhon'},{_id:'2', name:'doe'},{_id:'3', name:'jolly'},{_id:'4', name:'some random dude'},{_id:'5', name:'some random other dude'},{_id:'6', name:'johny'},{_id:'7', name:'bravo'}] var searchArr = [{_id:'1', name:'jhon'},{_id:'101', name:'myDoe'},{_id:'301', name:'some-jolly'},{_id:'4', name:'some random dude'}, {_id:'7', name:'bravo'}] var data = filterArr.filter(userFilter => searchArr.some(userSearch => userFilter._id == userSearch._id)) console.log(data);

As for the observables, you could try to combine them using combineLatest method.

const myData$ = combineLatest(this.search$.asObservable(), this.filters$.asObservable()).pipe(
  map(([filterArr, searcheArr]) => filterArr.filter(userFilter => searchArr.some(userSearch => userFilter._id == userSearch._id)))
)