Make nested Http calls inside switchMap

Question

if (this.role === 'admin' || this.role === 'superadmin') {
  this.organizationService.getDropdownOrganizations().pipe(
    tap(availableOrganizations => {
      this.availableOrganizations = availableOrganizations;
    }),
    switchMap(availableOrganizations => {
      return this.projectService.getProjects(availableOrganizations[0]?.id);
    }),
  ).subscribe(availableProjects => {
    this.availableProjects = availableProjects;
    this.getNotifications();
  });
} else {
  this.getNotifications();
}

Hello Everyone,

In the code above i pass orgId to project service and subscribe to availableProjects

My question is I want to make another request same as getProjects() to getUsers() and pass orgId and get both projects and users with this.

How can it be done?

Mrk Sef · Accepted Answer · 2020-10-27T14:46:26.400

There's a lot we don't know. I'm assuming getProjects and getUsers both emit once and then complete. If that's the case, you can use forkJoin to process both at once and return the results for both once they're complete.

That could look something like:

if (this.role === 'admin' || this.role === 'superadmin') {
  this.organizationService.getDropdownOrganizations().pipe(
    tap(availableOrganizations => 
      this.availableOrganizations = availableOrganizations
    ),
    switchMap(availableOrganizations => forkJoin({
      projects: this.projectService.getProjects(availableOrganizations[0]?.id),
      users: this.projectService.getUsers(availableOrganizations[0]?.id)
    })),
  ).subscribe(({projects, users}) => {
    this.availableProjects = projects;
    this.availableUsers = users;
    this.getNotifications();
  });
} else {
  this.getNotifications();
}

score 0 · Answer 2 · answered Oct 27 '20 at 13:41

I'd use forkJoin to do that if you want them to be executed in the same time.

switchMap(availableOrganizations => {
  return forkJoin([
      this.projectService.getProjects(availableOrganizations[0]?.id),
      this.projectService.getUsers(availableOrganizations[0]?.id);
  ]);
}),

Then you can access both values as properties of array passed to next stream operator. I'd advise to use array destructuring there:

).subscribe(([availableProjects, users ]) => {

score 0 · Answer 3 · answered Oct 27 '20 at 13:44

You can subscribe to the same cold observable and share the result with shareReplay

if (this.role === 'admin' || this.role === 'superadmin') {
  const availableOrganizations$ = this.organizationService.getDropdownOrganizations().pipe(
    shareReplay(1),
  );

  availableOrganizations$.subscribe(availableOrganizations => this.availableOrganizations = availableOrganizations);

  availableOrganizations$.pipe(
    switchMap(availableOrganizations => this.projectService.getProjects(availableOrganizations[0]?.id)),
  ).subscribe(availableProjects => {
    this.availableProjects = availableProjects;
    this.getNotifications();
  });

  // TODO: same for user as the previous block
} else {
  this.getNotifications();
}

Make nested Http calls inside switchMap

3 Answers3