What is the best way to merge Observable type arrays into one Observable<T[]>?

Question

What is the best way to merge Observable type arrays into one Observable<T[]>?

I am currently running multiple queries on Firebase Firestore, each of which has the potential to return an Observable. My goal is to combine all these Observables into a single one.

Despite experimenting with various RxJS operators such as combineLatest, forkJoin, concat, zip, merge, and mergeMap, I have not yet been successful in achieving the desired outcome.

getPrivateBooksFromAuthors(authors): Observable<Book[]> {
    let bookRefs: Observable<Book[]>[] = [];
    authors.map(key => {
      bookRefs.push(this.afs.collection<Book>('books', ref => 
        ref.where('public', '==', false)
           .where('authors', 'array-contains', key)
        ).valueChanges())
    });
    return bookRefs[0]
}

In the provided code snippet, I am retrieving private books from authors[0]. Despite attempting to use concat(...bookRefs) or concat(bookRefs[0], bookRefs[1]), I continue to only receive books from authors[0]. My expectation is to obtain all the books from all the provided authors.

angular typescript rxjs google-cloud-firestore

Answer 1

Answer №1

In agreement with @Doflamingo's suggestion, you can utilize forkJoin to simultaneously call multiple functions and receive a consolidated response as an array. The issue arises when each response is in the form of a Book[], resulting in forkJoin returning an array of Book[] (Book[][]). To resolve this, you must flatten the Book[][] into a single Book[]. This can be achieved by using a combination of mapping and a reduce function.

I have provided a straightforward code snippet below that showcases the console logging of the forkJoin response and the outcome after applying the reduce function.

function mockBooks$(key): Observable<Book[]> {
  return rxjs.of([key + '-book1', key + '-book2', key + '-book3']);
}

function getPrivateBooksFromAuthors(authors): Observable<Book[]> {
    let bookRefs: Observable<Book[]>[] = authors.map(key => mockBooks$(key));

    return rxjs.forkJoin(bookRefs).pipe(
        rxjs.operators.tap((books) => console.log('After forkJoin', books)),
        // Flattening operation required here!
        rxjs.operators.map(books => books.reduce((acc, cur) => [...acc, ...cur], []) ));
}


const authors = ['a1', 'a2', 'a3', 'a4', 'a5'];
getPrivateBooksFromAuthors(authors).subscribe((data) => console.log('Final result', data));

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.2/rxjs.umd.js"></script>

Hoping this explanation proves beneficial!

Answer 2

In agreement with @Doflamingo's suggestion, you can utilize forkJoin to simultaneously call multiple functions and receive a consolidated response as an array. The issue arises when each response is in the form of a Book[], resulting in forkJoin returning an array of Book[] (Book[][]). To resolve this, you must flatten the Book[][] into a single Book[]. This can be achieved by using a combination of mapping and a reduce function.

I have provided a straightforward code snippet below that showcases the console logging of the forkJoin response and the outcome after applying the reduce function.

function mockBooks$(key): Observable<Book[]> {
  return rxjs.of([key + '-book1', key + '-book2', key + '-book3']);
}

function getPrivateBooksFromAuthors(authors): Observable<Book[]> {
    let bookRefs: Observable<Book[]>[] = authors.map(key => mockBooks$(key));

    return rxjs.forkJoin(bookRefs).pipe(
        rxjs.operators.tap((books) => console.log('After forkJoin', books)),
        // Flattening operation required here!
        rxjs.operators.map(books => books.reduce((acc, cur) => [...acc, ...cur], []) ));
}


const authors = ['a1', 'a2', 'a3', 'a4', 'a5'];
getPrivateBooksFromAuthors(authors).subscribe((data) => console.log('Final result', data));

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.2/rxjs.umd.js"></script>

Hoping this explanation proves beneficial!

Answer 3

Answer №2

In my opinion, the most effective solution is to utilize fork join.

Using Fork allows you to make the calls in parallel. The outcome of each call is stored in one object (join) from which you can retrieve all the results.

Answer 4

In my opinion, the most effective solution is to utilize fork join.

Using Fork allows you to make the calls in parallel. The outcome of each call is stored in one object (join) from which you can retrieve all the results.

Answer 5

Answer №3

After receiving a helpful suggestion from @Doflamingo regarding using forkJoin, I was inspired by @Llorenç's code example showcasing the map and reduce pipes to merge Observables into one. However, I encountered issues with forkJoin if certain authors did not have any associated books. In the end, I opted for combineLatest as it does not require all Observables to be completed before emitting values. Here is my modified code snippet (all credit goes to @Llorenç):

  mockBooks$(key): Observable<Book[]> {
    return this.afs.collection<Book>('books', ref => 
      ref.where('private', '==', true)
         .where('authors', 'array-contains', key)
      ).valueChanges()
    // return of([key + '-book1', key + '-book2', key + '-book3']);
  }

  getPrivateBooksFromAuthors(authors): Observable<Book[]> {
    let bookRefs: Observable<Book[]>[] = authors.map(key => this.mockBooks$(key));

     // return combineLatest(bookRefs).pipe(
     //     tap((books) => console.log('After forkJoin', books)),
     //     // You need this flattening operation!!
     //     map(books => books.reduce((acc, cur) => [...acc, ...cur], []) ));

     return combineLatest<Book[]>(bookRefs).pipe(
        map(arr => arr.reduce((acc, cur) => acc.concat(cur) ) ),
     )
  }

I've left out Llorenç's original code for comparison purposes. Many thanks to both @Doflamingo and @Llorenç for their invaluable contributions!

Answer 6

After receiving a helpful suggestion from @Doflamingo regarding using forkJoin, I was inspired by @Llorenç's code example showcasing the map and reduce pipes to merge Observables into one. However, I encountered issues with forkJoin if certain authors did not have any associated books. In the end, I opted for combineLatest as it does not require all Observables to be completed before emitting values. Here is my modified code snippet (all credit goes to @Llorenç):

  mockBooks$(key): Observable<Book[]> {
    return this.afs.collection<Book>('books', ref => 
      ref.where('private', '==', true)
         .where('authors', 'array-contains', key)
      ).valueChanges()
    // return of([key + '-book1', key + '-book2', key + '-book3']);
  }

  getPrivateBooksFromAuthors(authors): Observable<Book[]> {
    let bookRefs: Observable<Book[]>[] = authors.map(key => this.mockBooks$(key));

     // return combineLatest(bookRefs).pipe(
     //     tap((books) => console.log('After forkJoin', books)),
     //     // You need this flattening operation!!
     //     map(books => books.reduce((acc, cur) => [...acc, ...cur], []) ));

     return combineLatest<Book[]>(bookRefs).pipe(
        map(arr => arr.reduce((acc, cur) => acc.concat(cur) ) ),
     )
  }

I've left out Llorenç's original code for comparison purposes. Many thanks to both @Doflamingo and @Llorenç for their invaluable contributions!

What is the best way to merge Observable type arrays into one Observable<T[]>?

Answer №1

Answer №2

Answer №3

Similar questions

Enhance Firebase Security Measures: Introduce personalized User Identification in request.auth without relying on Firebase Authentication

Using Regular Expressions: Ensuring that a specific character is immediately followed by one or multiple digits

Angular 5 allows users to easily add products to their cart by specifying the quantity, while also displaying the total

Retrieve the JSON information specifically for the selected ID

The setupFile defined in Jest's setupFilesAfterEnv configuration is not recognized by the VSCode IDE unless the editor is actively open

Utilizing Print Styles in an Angular 7 Application: A Step-by-Step Guide

Executing a series of asynchronous HTTP calls in Angular until a specific condition is satisfied

Maximizing the efficiency of enums in a React TypeScript application

Achieve a sticky y-axis while scrolling horizontally with chartJS and Angular

firebase-functions: Error status not recognized: TypeError: db.collectionGroup does not exist as a function

Use the loopback repository from one controller in a different controller

Unable to iterate over property in Angular 6 after receiving response

Subscribe is triggering even when the data in the store remains unchanged

Can anyone assist me with creating a reusable component for `next-intl` that can be

The ReplaySubject is receiving an updated response, however, the View is displaying the same information

Anticipating a service that is dependent on multiple layers of promises and observables

Loading an external javascript file dynamically within an Angular component

Bootstrap causing issues with correct display of div element

A special function designed to accept and return a specific type as its parameter and return value

Struggling to increment the badge counter in a React Typescript project