Leverage the power of forkJoin in JavaScript by utilizing objects or sourcesObject

Question

Leverage the power of forkJoin in JavaScript by utilizing objects or sourcesObject

I'm currently facing an issue with my code snippet below:

getInformations().subscribe(
    informations => {
        let subs = [];
        for (const information of informations) {
            subs.push(getOtherDetails(information.id));
        }
        forkJoin(subs).subscribe(response => {
           //How can I Associate Information Id With The Response
            howToAssociateIdWithResponse();
     }}
);

Situation - My goal is to link the responses from the second call with the ids from the first call, but I'm encountering difficulties.

Attempted - I attempted the following approach which resulted in an error being thrown:

let subs: {[x:number]: Observable<any>}[] = [];
subs.push({information.id: getOtherDetails(info.id)})

However, upon subscription, I received an error message stating

You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

Update - 1 Following @BizzyBob's suggestion, I made adjustments to the code as shown below. However, I am finding that my other logic executes before the subscription completes its task. Here's what I mean:

async ngOnChanges(){
    await getData(); //How to make sure below method only executes when this is really done.
    await useInformationReceivedFromgetData(); 
}
async getData(){
  getInformations().subscribe(
    informations => {
      let subs = [];
      for (const information of informations) {
         subs.push(getOtherDetails(information.id).pipe(
            map(data => ({ id: information.id, data })) // <---
         ));
      }
      forkJoin(subs).subscribe(objects => {           
         objects.forEach(({id, data}) => { /* saved to an arrray */ });
      });
   }

);
}

javascript angular typescript rxjs fork-join

Answer 1

Answer №1

You have the option to make each instance of "getOtherDetails observable" produce an object containing the id and response data:

getInformations().subscribe(
   informations => {
      let subs = [];
      for (const information of informations) {
         subs.push(getOtherDetails(information.id).pipe(
            map(data => ({ id: information.id, data })) // <---
         ));
      }
      forkJoin(subs).subscribe(objects => {           
         objects.forEach(({id, data}) => { /* utilize id and data here */ });
      });
   }
);

To simplify your code, you can use .map() instead of creating a subs array and adding elements to it:

getInformations().subscribe(
   informations => {
      const subs = informations.map(
         ({id}) => getOtherDetails(id).pipe(map(data => ({ id, data })))
      );
      forkJoin(subs).subscribe(responses => {           
         responses.forEach(({id, data}) => { /* utilize id and data here */ });
      });
   }
);

Furthermore, nesting subscribes inside of subscribes is not recommended. It would be more advantageous to employ a Higher Order Mapping Operator that deals with an "inner subscription" on your behalf. In this scenario, we can utilize switchMap to manage subscribing / unsubscribing from your forkJoin observable:

getInformations().pipe(
   map(informations => informations.map(
      ({id}) => getOtherDetails(id).pipe(map(response => ({ id, data })))
   ),
   switchMap(requests => forkJoin(requests))
).subscribe(
   responses => responses.forEach(({id, data}) => { ... })
);

Answer 2

You have the option to make each instance of "getOtherDetails observable" produce an object containing the id and response data:

getInformations().subscribe(
   informations => {
      let subs = [];
      for (const information of informations) {
         subs.push(getOtherDetails(information.id).pipe(
            map(data => ({ id: information.id, data })) // <---
         ));
      }
      forkJoin(subs).subscribe(objects => {           
         objects.forEach(({id, data}) => { /* utilize id and data here */ });
      });
   }
);

To simplify your code, you can use .map() instead of creating a subs array and adding elements to it:

getInformations().subscribe(
   informations => {
      const subs = informations.map(
         ({id}) => getOtherDetails(id).pipe(map(data => ({ id, data })))
      );
      forkJoin(subs).subscribe(responses => {           
         responses.forEach(({id, data}) => { /* utilize id and data here */ });
      });
   }
);

Furthermore, nesting subscribes inside of subscribes is not recommended. It would be more advantageous to employ a Higher Order Mapping Operator that deals with an "inner subscription" on your behalf. In this scenario, we can utilize switchMap to manage subscribing / unsubscribing from your forkJoin observable:

getInformations().pipe(
   map(informations => informations.map(
      ({id}) => getOtherDetails(id).pipe(map(response => ({ id, data })))
   ),
   switchMap(requests => forkJoin(requests))
).subscribe(
   responses => responses.forEach(({id, data}) => { ... })
);

Answer 3

Answer №2

If you really want to take full advantage of rxjs and its pipe operators, you can go even harder. Here's a sample code snippet:

const combinedResults = getInformations().pipe(
  mergeMap((informations) => {
    return forkJoin(
      informations.map((information) =>
        getOtherDetails(information.id).pipe(
          map((detail) => ({ detail, id: information.id })),
        ),
      ),
    )
  }),
)

combinedResults.subscribe((combinedDetails) => {
  for (const information of combinedDetails) {
    const { detail, id } = information

    console.log('Now you have access to the detail and the id')
  }
})

At first glance, it may seem a bit overwhelming, but this is the "rxjs way" of achieving what you need.

Retrieve the general "informations"
Utilize mergeMap to manipulate the result and create a new observable
Use Forkjoin to merge the array of detail observables
Associate each detail response with the original response using the map pipe
Subscribe only once to access the combined values

This approach makes it easy to showcase the results in an angular template using the async pipe. If your aim is to display the merged values, you won't need to subscribe in your component logic at all, eliminating concerns about performance or memory leaks. Check out this link for more details

<div *ngFor="let item of (combinedResults | async)">{{item | json}}</div>

Answer 4

If you really want to take full advantage of rxjs and its pipe operators, you can go even harder. Here's a sample code snippet:

const combinedResults = getInformations().pipe(
  mergeMap((informations) => {
    return forkJoin(
      informations.map((information) =>
        getOtherDetails(information.id).pipe(
          map((detail) => ({ detail, id: information.id })),
        ),
      ),
    )
  }),
)

combinedResults.subscribe((combinedDetails) => {
  for (const information of combinedDetails) {
    const { detail, id } = information

    console.log('Now you have access to the detail and the id')
  }
})

At first glance, it may seem a bit overwhelming, but this is the "rxjs way" of achieving what you need.

Retrieve the general "informations"
Utilize mergeMap to manipulate the result and create a new observable
Use Forkjoin to merge the array of detail observables
Associate each detail response with the original response using the map pipe
Subscribe only once to access the combined values

This approach makes it easy to showcase the results in an angular template using the async pipe. If your aim is to display the merged values, you won't need to subscribe in your component logic at all, eliminating concerns about performance or memory leaks. Check out this link for more details

<div *ngFor="let item of (combinedResults | async)">{{item | json}}</div>

Leverage the power of forkJoin in JavaScript by utilizing objects or sourcesObject

Answer №1

Answer №2

Similar questions

Retrieve JSON data from Form Submission

The SonarTsPlugin report is coming back clean with no issues found in the Typescript files

Use .empty() method to remove all contents from the tbody element after creating a table

Passing parameters from a div to a single page component in Vue.js: A complete guide

I'm looking to leverage axios and useState-useEffect to collect data from numerous web pages. Any suggestions on how to do this efficiently

Having difficulty utilizing the $.each() function to assign properties to an object

executing a series of jQuery ajax calls iteratively

Unable to expand Bootstrap navbar due to collapsing issue

What is the best way to eliminate additional values depending on the one I have chosen?

After upgrading, my npm is completely dysfunctional – it keeps showing the error "Cannot read property 'get' of undefined."

Leveraging Java and TypeScript code for specific functionalities within an Ionic 2 Android application

Achieving vertical center alignment in React Native: Tips and techniques

"A collection of elements in Typescript that is uniform in type, denoted by

What is the procedure for obtaining the corner coordinates of a boundary box in Cesium, expressed in CRS

Understanding the Event Context of Elements using Browser Development Tools

Utilizing external JSON data in JavaScript for retrieval

What is the best way to correlate two arrays of strings with one another?

Issue with resolving symbol JSON in Angular 7 when using JSON.stringify

Converting an array of objects to an array based on an interface

Executing functions in a pre-defined order with AngularJS: A step-by-step guide