rxjs nested subscription using properties from parent to form single observable

Question

I have a top level subscription that returns a single object. The object contains a property which is an array of ids. I need to be able to then fetch more information using these ids and return a complete object containing the parent information, along with the newly fetched child information.

I've racked my brains trying to figure this out with switchMaps, flatMaps, etc, but cannot seem to get the order correct. I can quite simply throw a forEach/for inside the subscription, but I'd like a more elegant solution.

lets say we have this initial call

this.reports.getSpace(spaceId)

this call returns an observable of type space, something like follows:

{
  id: "1",
  title: "my space"
  dashboards: [{
    id: "7"
  },
  {
    id: "8"
  }]
}

I need to call the following for each of the dashboards on a space

this.reports.getDashboard(dashboardId)

I'd like to be able to return a single observable result containing the space information and fully fleshed out dashboard information. It could be that the new object returns meta (space info), and dashboards. But for life of me, I can't figure out how to maintain the space info when working through a chain of subscriptions. I'm only ever left with the dashboard info.

This might help https://stackoverflow.com/questions/55516707/loop-array-and-return-data-for-each-id-in-observable — Dilani Alwis, May 14 '19 at 16:08
better solution would be making one call to the api with array of dashboard ids and get all the dashboards data at once rather than making separate calls for each probably. — fastAsTortoise, May 14 '19 at 16:27
@fastAsTortoise yeah, your probably right, especially once the dashboard count becomes larger. — Mark Seymour, May 15 '19 at 12:45

score 0 · Answer 1 · answered May 14 '19 at 16:01

I think that I create below is clean.

this.reports.getSpace(spaceId).then(obj => {
    obj.dashboards.forEach((child,i) => {
        this.reports.getDashboard((""+child.id).then(res => {
            objs.dashboards[i] = res;
        });
    });
    // not a copy - only pointer in memory
    this.data = obj;
})

rxjs nested subscription using properties from parent to form single observable

1 Answers1