RxJS higher order map – how to make it work?

Issue

const observable$ = combineLatest([searchAPI$, searchByID$]) // Line 1
        .pipe(
            map(data => {
                let APISearchResult = data[0]; // This is an array of SearchResult type
                const searchByIDRawData = data[1]; // This is an array of Opportunity type

            // Create an array of Observable of Search Result for each of the Opportunity type
            const searchByIDSearchResults$ = searchByIDRawData.map(s => this.CreateSearchResultItemFromOpportunity(s, keywordSearch)); // Line 7
            
            return combineLatest(searchByIDSearchResults$)
            .pipe(
                map(searchResults => {
                    return APISearchResult.concat(searchResults); // Combine the output from APISearchResult with searchByIDSearchResults$
                })
            )
        }))
    
    return observable$;

I have two Observables (as shown in Line 1) that I want to combine the output.

In Line 7, it is an array of Observables to be emitted to convert the output from Opportunity type into SearchResult type.

At the end, the final output should be SearchResult[] when subscribed.

Unfortunately observable$ is of type Observable<Observable<SearchResult[]>> instead of Observable<SearchResult[]>.

Where have I gone wrong with my mapping?

Thanks.

Solution

Use a SwitchMap instead of a Map on line 3. You shouldn’t return an Observable in a Map because it directly passes it further in the chain without handling it like an Observable. Maps are used to chain an transform Non-Observable values while SwitchMap (and other maps) are used to chain Observables.

Answered By – Tobias S.

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0