In Typescript Angular, how can I invoke a function on each element of an array as part of a sequence of Observables, and then return the total number of successful operations?

Question

In Typescript Angular, how can I invoke a function on each element of an array as part of a sequence of Observables, and then return the total number of successful operations?

I am faced with the task of creating a parent record followed by multiple child records (order does not matter), and ending with a logging action.

I am knowledgeable on how to chain single actions on an observable by mapping them together. For example:

-- create one parent record and return its ID:

createParentRecord(parentInfo: parentType): Observable<number>

-- create one child record and return its ID

createChildRecord(childInfo: childType): Observable<number>

-- log the entry

logStuff(parentId: number, childId: number)

-- the composite function executes all the actions and returns the parent ID

doTheThing(): Observable<number> {
   /* ... */
   let parentId: number;
   let childId: number;

   return createParent(parentInfo).pipe(
     tap(id => (parentId = id)),
     mergeMap(id => { childInfo.parentId = parentId; return createChildRecord(childInfo);} ),
     mergeMap(childId => { childInfo.childId = childId; return logStuff(parentId, childId); ),
     map( () => parentId)
   ); 
}

Question

This method works perfectly.

However, if I have an array of childInfo[] instead of just childInfo, how do I approach this? How can I handle an array of childInfo[] to subscribe to and retrieve inner observable results? I simply want a count of successful results or any results returned by each observable. Should I use forkJoin()?

I am struggling to find a solution to this. Can someone offer some assistance?

angular typescript rxjs fork-join

Answer 1

Answer №1

If I have understood your query correctly, my approach would be as follows. I have provided comments inline for better understanding.

function doTheThing(): Observable<any> {
   /* ... */
   let parentId: number;
   // Assume there is an array containing information about children to be saved
   const childInfos = new Array(3).fill({})

   return createParent('Parent Info').pipe(
     tap(id => (parentId = id)),
     concatMap(id => { 
         // Each childInfo object is updated with the result of the createParent operation
         childInfos.forEach(c => c.parentId = parentId); 
         // An array of Observables is created - each representing a createChildRecord operation
         const childInfosObs = childInfos.map(ci => createChildRecord(ci))
         // All child record operations are executed concurrently using forkJoin
         return forkJoin(childInfosObs);
      }),
     concatMap(childIds => { 
       // forkJoin returns an array of results in the same order as the array of Observables passed to it
       // We loop through the array to link each childInfo with its corresponding result
       childInfos.forEach((ci, i) => ci.childId = childIds[i])
       // Finally, we log the results of forkJoin and return them
       return logStuff(parentId, childIds).pipe(
         map(() => childIds)
       );
     } )
   ); 
}

It is worth noting that I prefer using concatMap over mergeMap for database or REST operations to maintain the sequence of actions, unless a specific reason warrants otherwise.

If necessary, you can also add error handling logic to each observable within childInfosObs, as forkJoin will throw an error if any of the Observables it handles encounters an error.

For a demonstration of this approach, you can refer to this StackBlitz example.

Answer 2

If I have understood your query correctly, my approach would be as follows. I have provided comments inline for better understanding.

function doTheThing(): Observable<any> {
   /* ... */
   let parentId: number;
   // Assume there is an array containing information about children to be saved
   const childInfos = new Array(3).fill({})

   return createParent('Parent Info').pipe(
     tap(id => (parentId = id)),
     concatMap(id => { 
         // Each childInfo object is updated with the result of the createParent operation
         childInfos.forEach(c => c.parentId = parentId); 
         // An array of Observables is created - each representing a createChildRecord operation
         const childInfosObs = childInfos.map(ci => createChildRecord(ci))
         // All child record operations are executed concurrently using forkJoin
         return forkJoin(childInfosObs);
      }),
     concatMap(childIds => { 
       // forkJoin returns an array of results in the same order as the array of Observables passed to it
       // We loop through the array to link each childInfo with its corresponding result
       childInfos.forEach((ci, i) => ci.childId = childIds[i])
       // Finally, we log the results of forkJoin and return them
       return logStuff(parentId, childIds).pipe(
         map(() => childIds)
       );
     } )
   ); 
}

It is worth noting that I prefer using concatMap over mergeMap for database or REST operations to maintain the sequence of actions, unless a specific reason warrants otherwise.

If necessary, you can also add error handling logic to each observable within childInfosObs, as forkJoin will throw an error if any of the Observables it handles encounters an error.

For a demonstration of this approach, you can refer to this StackBlitz example.

Answer 3

Answer №2

Blockquote

To simplify the process, you can convert your ChildInfo[] to an observable array and then merge it using the following approach:

return createParent(parentInfo).pipe(
  tap(newParentId => parentId = newParentId),
  mergeMap(newParentId => forkJoin(
   childInfos.map(childInfo => { // utilizing an Array map.
     childInfo.parentId = parentId;
     return createChildRecord(childInfo); // this should return childInfo, as it resembles a CRUD operation.
   })
  )),

It's important to note that this method only functions if createChildRecord completes, as forkJoin will not emit otherwise. My solution assumes it's a single call. By having createChildRecord return the updated childInfo, your future operations will be much smoother.

createChildRecord(childInfo: ChildInfo): Observable<ChildInfo> {

  const childId = /** TBD **/
  return of({...childInfo, childId});
}

To enhance readability, consider enclosing the inner observable within a separate method.

Answer 4

Blockquote

To simplify the process, you can convert your ChildInfo[] to an observable array and then merge it using the following approach:

return createParent(parentInfo).pipe(
  tap(newParentId => parentId = newParentId),
  mergeMap(newParentId => forkJoin(
   childInfos.map(childInfo => { // utilizing an Array map.
     childInfo.parentId = parentId;
     return createChildRecord(childInfo); // this should return childInfo, as it resembles a CRUD operation.
   })
  )),

It's important to note that this method only functions if createChildRecord completes, as forkJoin will not emit otherwise. My solution assumes it's a single call. By having createChildRecord return the updated childInfo, your future operations will be much smoother.

createChildRecord(childInfo: ChildInfo): Observable<ChildInfo> {

  const childId = /** TBD **/
  return of({...childInfo, childId});
}

To enhance readability, consider enclosing the inner observable within a separate method.

In Typescript Angular, how can I invoke a function on each element of an array as part of a sequence of Observables, and then return the total number of successful operations?

Question

Answer №1

Answer №2

Similar questions

What are the best practices for integrating RxJS into Angular 2 projects?

Exploring Typescript's conditional types and narrowing branches

The Vue router fails to load when using create-vue@3

Animate specifically new items in a list rendered via ngFor in Angular animation

Using Rollup alongside @rollup/plugin-babel and Typescript: Anticipated a comma, received a colon instead

What is the best way to define a category in order to utilize a saved string as a variable for referencing it?

Encountering the error "TS(2604): JSX element type 'App' does not have any construct or call signatures" while trying to export an array of JSX Elements

How can nested json be sorted effectively based on two specific fields?

Creating a composite object in Angular 2 reactive forms: a step-by-step guide

What is the best way to increase the height of an image beyond the limits of its container, causing it to overlap with other elements

Dynamic getter/setter in Typescript allows for the creation of functions

How to dynamically add a component in Angular 7/8 when a button is clicked

I am looking for guidance on the proper way to import MatDrawer and MatDrawerContainer in the app.module.ts file for an Angular

What methods can be implemented to ensure ComponentOverride's universality?

Angular: Dynamically add or delete an interceptor based on conditions

Implement a class in Typescript that allows for the addition of properties at runtime

What methods can I use to create an RXJS stream that only updates the state once all sequential calls have been successful?

Incorrect tsx date interpretation when dealing with years such as 0022

Issue with custom Angular-Slickgrid formatter: Bootstrap NGbTooltip not functioning as expected

Steps to define a JavaScript mixin in VueJS