I'm new to RxJs and I am struggling with a complex scenario for an Angular app where I have observables nested in other observables (simplified hereafter).
To be concise, I have:
- An Observable that returns a stream with a collection of objects SearchActivity =>
Observable<SearchActivity[]> - Each SearchActivity object have an Observable property 'results$' =>
BehaviorSubject<SearchActivityResult[]>
I try to extract all the results from inside all the activities to one single Observable. So, from the following example (this is not code, but an idea of the data structure):
Observable<SearchActivity[]> => [
{id: 1, results$: Observable<SearchActivityResult[]> => [1, 2]},
{id: 2, results$: Observable<SearchActivityResult[]> => [3, 4, 5]}
{id: 3, results$: Observable<SearchActivityResult[]> => [6]}
]
I would like to extract the result to obtain:
Observable<SearchActivityResult[]> => [1, 2, 3, 4, 5, 6] (Edit: the order is not important)
How can this could be achieved using RxJs?
So far I got something like:
// This is not working properly
this.allResults$ = this.displayedActivities$.pipe(
mergeMap(activities => {
return concat(...activities?.map(activity => activity.results$ || of([])));
})
);
But it doesn't seems to work as expected.
I have prepared a StackBiltz with a more complex scenario here
Update 2021-02-23
I created a new StackBlitz where you can interact with the results by clicking on it. The goal is to get a summary of all results for each database (the table at the bottom on the page) and display the amount of positive/negative results across all the search criterions.
TL;DR => Solution
I have just created a new StackBlitz with less complexity in order to isolate the problem. I have included the suggestions made by Mrk Sef and it's working.
I have some other errors with the flat operator and a weird circular reference to json but it is more likely cause by the StackBlitz simulator.