Avoid nested observables

Question

I need to fill in three controls with hierarchic structure: companies, branches, employees. Out of user service I get currently logged in user, then via user's domain name I receive his full data as Employee, then per employee's branchId I obtain branch object, then I request all companies and set control values as currrent employee, current branch, and current branch's company.

I end up with nested tree of subscribers. How can I avoid this and refactor it to be more straightforward?

this.userService.getCurrentlyLoggedInUser().subscribe(
    user => {
        this.user = user;
        this.getEmployee(this.user.domainName).subscribe(
            employees => {
                if (employees.length === 0) {
                    this.isLoading = false;
                    return;
                }
                this.getBranch(employees[0].branchId).subscribe(
                    branches => {
                        if (branches.length === 0) {
                            this.isLoading = false;
                            return;
                        }
                        this.odata.companies().subscribe(
                            companies => {
                                this.setDefaultValues(companies, branches[0], employees[0]);
                                this.isLoading = false;
                            },
                            error => this.isLoading = false
                        );
                    },
                    error => this.isLoading = false
                );
            },
            error => this.isLoading = false
        );
    },
    error => this.isLoading = false
);

score 2 · Accepted Answer · answered Oct 06 '16 at 21:26

To avoid nested subscribe calls you can always map back from a meta branch, such as a stream that has been forked from the main branch through some AJAX call or some other async operation, to a trunk branch by using mergeMap.

See the following code for details. Notice, that there is only one subscribe call to the trunk stream. All other streams are mergeMap'd back into the trunk stream such that no additional subscriptions are required. Consider subscribing to a stream as breaking out of the RxJS context and get back to normal JS. This should only be required for side effects, such as the console.log command.

const initialUserObj = { userId: 0, username: 'admin' };

const getUserGroup = function(id) {
  console.log(`Requesting user group for user with id ${id}`); // debug only

  const typeAdmin = { group: 'Administrator', rights: 'all' };
  const typeUser = { group: 'User', rights: 'restricted' };
  const timeout = Math.floor(Math.random() * 5000);

  return new Promise((resolve, reject) => {
    // Simulated API call with timeout
    setTimeout(() => {
      resolve(id === 0 ? typeAdmin : typeUser);
    }, timeout);
  });
}

const getUserDetails = function(id) {
  console.log(`Requesting user details for user with id ${id}`); // debug only

  const timeout = Math.floor(Math.random() * 5000);

  return new Promise((resolve, reject) => {
    // Simulated API call with timeout
    setTimeout(() => {
      resolve({ fullName: id === 0 ? 'Administator himself' : 'Some User' });
    }, timeout);
  });
}

Rx.Observable.of(initialUserObj)
  .flatMap(user => {
    return Rx.Observable.fromPromise(getUserGroup(user.userId))
      .map(group => Object.assign({}, user, group));
  })
  .flatMap(user => {
    return Rx.Observable.fromPromise(getUserDetails(user.userId))
      .map(details => Object.assign({}, user, details));
  })
  .subscribe(x => console.log(x));

Working sample on jsbin

The difference is that for each subsequent call I need to use info from previous one. Namely, first I get user, then I request organization by user.organizationId. In your example you always you the same userId. — avj, Oct 08 '16 at 02:33
@avj You're right, I use `user.userId` in both cases, but you can use also all the other values in all subsequent calls. See https://jsbin.com/bakajuh/edit?js,console for an extended example. — dotcs, Oct 09 '16 at 14:31
Yes, flatMap worked in the end. http://stackoverflow.com/questions/34104638/how-to-chain-http-calls-in-angular2 has simplier example, I used that. — avj, Oct 12 '16 at 14:14

Avoid nested observables

1 Answers1