参照对象的可观察链

Question

I am new to the Observables I am not sure if I am doing this right.

Here is the scenario.

a) Subscribe to route params

b) When the params change do a service request to fetch the data observable

c) Process the data

d) Then do more requests for their dependencies and fetch their dependency observables.

My problem is that after d) I can well fetch their dependency observables but I don't have a mapping to the processed data to attach the responses as needed.

Example:

this.route.queryParams.pipe(map((params) => {
  this.selectedTabIndex = +params['tabIndex'];
  return params
})).pipe(switchMap((params) => {
  return this.eventService.getEvent(params['eventID']);
})).pipe(map((event) => {
  this.event = event;
  this.selectedActivities = event.getActivities();
  return this.selectedActivities;
})).pipe(mergeMap((activities) => {
  return combineLatest(activities.map((activity) => {
    return this.eventService.getStreams(this.event.getID(), activity.getID(), ['Latitude', 'Longitude'])
  }))
})).pipe(map((activityStreams) => {
  // Here is my problem 
  // As you can see I can get well the streams for the above activities
  // But I don't have the activity that the streams belong to to attach them to
  debugger
})).subscribe()

So at the last pipe the result looks like:

But as you can see I don't have the reference to the activity that those stream array should be attached to in the end. And that is what I want todo.

Perhaps I am doing things completely wrong so I am open to discussion.

Answer 1

With a little help from Sheshaj Awasthi

I did the following:

this.route.queryParams.pipe(map((params) => {
  this.selectedTabIndex = +params['tabIndex'];
  return params
})).pipe(switchMap((params) => {
  return this.eventService.getEvent(params['eventID']);
})).pipe(map((event) => {
  this.event = event;
  this.selectedActivities = event.getActivities();
  return this.selectedActivities;
})).pipe(map((activities) => {
  return activities.reduce((activityStreamPairArray, activity) => {
    activityStreamPairArray.push({
        activity: activity,
        activityStreams: this.eventService.getStreams(this.event.getID(), activity.getID(), ['Latitude', 'Longitude']),
      });
    return activityStreamPairArray
  }, [])
})).pipe(mergeMap((activityStreamPairArray) => {
  return combineLatest(activityStreamPairArray.reduce((flattenedArray, activityStreamPair) => {
    flattenedArray.push(of(activityStreamPair.activity), activityStreamPair.activityStreams);
    return flattenedArray
  }, []))
})).pipe(map((test) => {
  debugger

}))

Now I have

Which consists of an array where every 2 elements can be combined.