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

The subscription function in observables may result in values that are undefined

Utilize Knex to retrieve data from the req.query

Attempting to invoke a TypeScript firebase function

Tips for testing nested subscribe methods in Angular unit testing

Utilizing the power of Typescript in Express 4.x

A property in TypeScript with a type that depends on the value of an object

"Implementing a date picker in your Ionic 5 app: A step-by-step

Unable to retrieve the updated value from the service variable

Can someone please explain how to prevent Prettier from automatically inserting a new line at the end of my JavaScript file in VS Code?

Simple method for wrestling with objects in TypeScript HTTP POST responses

Ways to imitate an export default function

The RouteParams encounter a problem because it is unable to resolve all parameters

What is the best way to implement a dynamic back button in Next.js?

Connecting HTML to an AngularFirestore collection using snapshotChanges

Using Bazel, Angular, and SocketIO Version 3 seems to be triggering an error: Uncaught TypeError - XMLHttpRequest is not recognized

Leverage the power of ssh2-promise in NodeJS to run Linux commands on a remote server

In search of assistance with resolving a React Typescript coding issue

React Router malfunctioning on production environment when integrated with an Express backend

The function cannot be called on a type that does not have a callable signature. The specified type, 'number | Dispatch<SetStateAction<number>>', does not have any compatible call signatures

Issues with executing code within the react package for Yahoo Finance 2