Is there a way to merge two observables into one observable when returning them?

Question

Is there a way to merge two observables into one observable when returning them?

I'm struggling with getting a function to properly return. There's a condition where I want it to return an Observable, and another condition where I'd like it to return the combined results of two observables.

Here is an example.

getSearchFeed(): Observable<items[]> {
   if (this.condition) {
     return this.populateItemsArray();            //function Returns Items Array Observable
   } 

   //second condition
   const someItems = this.populateSearch();       //function Returns Items Array Observable
   const otherItems = this.populateOtherSearch(); //function Returns Items Array Observable

   return forkJoin(someItems,otherItems)
    .pipe((res:Array) => {
      return [...res[0],...res[1]];
   });
}

I've seen discussions about merging results from different observables, which I understand how to do by subscribing and joining. My question is more focused on how to return an Observable for the second condition.

Here are some things I've tried,

return forkJoin(someItems,otherItems)
 .pipe(map((res:Array<Observerable<Items[]>>) => {
    return [...res[0],res[1]];
});

and

const source = of([someItems,otherItems]);
const merged = source.pipe(mergeMap( q => forkJoin(...q)));
return merged;

typescript rxjs

Answer 1

Answer №1

When faced with this scenario, the solution lies in utilizing the RxJS operator called toArray(). As outlined in the official documentation, the purpose of the toArray() operator is to

Collect all emitted values from the source and then emit them as a single array once the source completes.

To implement this approach, your code should follow this structure. By doing so, you will effectively merge the returned observables into a unified array.

import { forkJoin } from 'rxjs';
import { toArray } from 'rxjs/operators';

getSearchFeed(): Observable<items[]> {
   if (this.condition) {
     return this.populateItemsArray();            //function Returns Items Array Observable
   } 

   //additional condition
   const someItems = this.populateSearch();       //function Returns Items Array Observable
   const otherItems = this.populateOtherSearch(); //function Returns Items Array Observable

   return forkJoin(someItems, otherItems)
     .pipe(
       toArray(),
     );
}

Update: Upon realizing the necessity to flatten the returned observables into a singular array, a simpler solution involves using the Array.flat() method within the map operator. This action will effectively flatten the results into one cohesive array.

import { forkJoin } from 'rxjs';
import { map } from 'rxjs/operators';

getSearchFeed(): Observable<items[]> {
   if (this.condition) {
     return this.populateItemsArray();            //function Returns Items Array Observable
   } 

   //additional condition
   const someItems = this.populateSearch();       //function Returns Items Array Observable
   const otherItems = this.populateOtherSearch(); //function Returns Items Array Observable

   return forkJoin(someItems, otherItems)
     .pipe(
       map(res => res.flat(2))
     );
}

Answer 2

When faced with this scenario, the solution lies in utilizing the RxJS operator called toArray(). As outlined in the official documentation, the purpose of the toArray() operator is to

Collect all emitted values from the source and then emit them as a single array once the source completes.

To implement this approach, your code should follow this structure. By doing so, you will effectively merge the returned observables into a unified array.

import { forkJoin } from 'rxjs';
import { toArray } from 'rxjs/operators';

getSearchFeed(): Observable<items[]> {
   if (this.condition) {
     return this.populateItemsArray();            //function Returns Items Array Observable
   } 

   //additional condition
   const someItems = this.populateSearch();       //function Returns Items Array Observable
   const otherItems = this.populateOtherSearch(); //function Returns Items Array Observable

   return forkJoin(someItems, otherItems)
     .pipe(
       toArray(),
     );
}

Update: Upon realizing the necessity to flatten the returned observables into a singular array, a simpler solution involves using the Array.flat() method within the map operator. This action will effectively flatten the results into one cohesive array.

import { forkJoin } from 'rxjs';
import { map } from 'rxjs/operators';

getSearchFeed(): Observable<items[]> {
   if (this.condition) {
     return this.populateItemsArray();            //function Returns Items Array Observable
   } 

   //additional condition
   const someItems = this.populateSearch();       //function Returns Items Array Observable
   const otherItems = this.populateOtherSearch(); //function Returns Items Array Observable

   return forkJoin(someItems, otherItems)
     .pipe(
       map(res => res.flat(2))
     );
}

Is there a way to merge two observables into one observable when returning them?

Answer №1

Similar questions

Show just a single error message if there are two validation errors present

Creating interfaces within props is essential for defining the structure of components

The idiom 'listen' is not recognized within the context of type 'Express'. Try using a different property or method to achieve the desired functionality

Encounter an error message "Expected 0 type arguments, but received 1.ts(2558)" while utilizing useContext within a TypeScript setting

Error: TypeScript cannot locate the specified <element> in the VSCode template

`"Type is invalid" error occurring with component after importing it into a different project``

Using TypeScript for Immutable.js Record.set Type Validation

Is it possible to toggle between namespace and class using parentheses?

Evaluate the Worth of a Property Established in a Subscription

How can I uniquely combine a code with an existing CSS class and make modifications to it?

A TypeScript function that converts a value into an array if it is not already an array, ensuring the correct type is output

Unable to prolong TypeScript document

Coloring intersected meshes in three.js will recolor every mesh in the scene

Steps for executing a single test across multiple URLs using Playwright

Issue: An error occurred while trying to parse JSON data in TypeScript due to an undefined 'description' property

Troubleshooting Angular 14 Custom Form Control Display Issue

Troubleshooting problem with TypeScript observables in Angular 5

Sharing a FormGroup between different components

Transitioning from ng-repeat filter to Typescript

Struggle with typescript integration with emotion and styled components