Combining nested Observables within an outer array without using inner subscribe (RxJS)

Question

Combining nested Observables within an outer array without using inner subscribe (RxJS)

Looking at the TypeScript functions below, which are used for async HTTP-Calls:

public retrieveAllMembersIdsFromGroup(groupId: string): Observable<string[]>
public retrieveMember(memberId: string): Observable<Member>

How can these be combined into a single function to obtain all members (Observable)?

public combineAllMembersFromGroup(groupId: string): Observable<Member[]>

For instance, we aim to achieve something similar to this:

public combineAllMembersFromGroup(groupId: string): Observable<Member[]> {
return this.retrieveAllMembersIdsFromGroup(groupId).pipe(
      map((membersIds: string[]) => {
        //perform necessary actions here to call this.retrieveMember(memberId)
        return //Observable<Member[]>;
      })
    );
}

If possible, it is preferred not to subscribe to the retrieveAllMembersIdsFromGroup method in order to avoid manual processing of the ids. What would be the optimal solution?

angular typescript rxjs nested observable

Answer 1

Answer №1

It's unclear what kind of magic you're seeking, but perhaps this solution could meet your needs?

public getAllMembersFromGroup(groupId: string): Observable<Member[]> {
    return this.getAllMemberIdsFromGroup(groupId).pipe(
      concatMap((memberId: string) => {
        return this.getMember(memberId);
      })
    );
}

I also made some changes to names for better clarity and grammar.

Answer 2

It's unclear what kind of magic you're seeking, but perhaps this solution could meet your needs?

public getAllMembersFromGroup(groupId: string): Observable<Member[]> {
    return this.getAllMemberIdsFromGroup(groupId).pipe(
      concatMap((memberId: string) => {
        return this.getMember(memberId);
      })
    );
}

I also made some changes to names for better clarity and grammar.

Answer 3

Answer №2

Below is the solution that I found effective:

function getMembersOfGroup(groupID: string): Observable<Member[]> {
    return from(getAllMemberIDsOfGroup(groupID)).pipe(
      mergeMap((memberIds: string[]) => {
        const members$: Observable<Member>[] = [];
        memberIds.forEach((id: string) => {
          members$.push(retrieveMemberDetails(id));
        });
        return combineLatest(members$);
      })
    );
}

Answer 4

Below is the solution that I found effective:

function getMembersOfGroup(groupID: string): Observable<Member[]> {
    return from(getAllMemberIDsOfGroup(groupID)).pipe(
      mergeMap((memberIds: string[]) => {
        const members$: Observable<Member>[] = [];
        memberIds.forEach((id: string) => {
          members$.push(retrieveMemberDetails(id));
        });
        return combineLatest(members$);
      })
    );
}

Combining nested Observables within an outer array without using inner subscribe (RxJS)

Answer №1

Answer №2

Similar questions

Can a type alias be created for more than one parameter of a class or function with multiple type parameters?

Obtain the precise Discriminated conditional unions type in the iterator function with Typescript

React and TypeScript warns about possible undefined object

Angular 8 experiencing unexpected collision issues

When utilizing an object as state in React, the `setState` function will only set

Resolving Hot-Reload Problems in Angular Application Following Upgrade from Previous Version to 17

Interpolating strings in a graphQL query

Can a type name be converted into a string representation for use as a template literal type?

A guide on transforming a 1-dimensional array into a 2-dimensional matrix layout using Angular

Error encountered in Node.js OpenAI wrapper: BadRequestError (400) - The uploaded image must be in PNG format and cannot exceed 4 MB

Beautiful parentheses for Typescript constructors

Error message: "The property 'ɵunwrapWritableSignal' is not found on the type 'typeof import_modules/@angular/core/core'". Here is how you can troubleshoot this issue in HTML files

Building a forum using Angular 2+ with blank fields

What is the best way to retrieve data from within a for loop in javascript?

Setting up grunt-ts to function seamlessly with LiveReload

NextAuth credentials are undefined and authentication is malfunctioning in React

Using kotlinx.serialization to deserialize a JSON array into a sealed class

Creating a definition for the use of sweet alerts within a service and incorporating them through

Issue with ActivatedRoute being empty when called in a Service in Angular version 2.0.2

The Ionic search bar will only initiate a search once the keyboard is no longer in view