What is the best way to combine two responses and call them in a specific order, where the second http request is dependent on the response from the

Question

What is the best way to combine two responses and call them in a specific order, where the second http request is dependent on the response from the

After receiving the code, I am attempting to extract a combined value from two HTTP calls

defer(() => {
                return this.service.save1(data)
                    .pipe(
                        concatMap((result) => {
                            if (result) {
                                return of({
                                    ...result,
                                    c: this.service.save2(result.id , this.obj).subscribe()    
                                })
                            }
                            return of({});
                        }),
                        catchError(err => throwError(err)),
            }).subscribe((result) => {
                if (result) {
                    console.log(result);
                }
            },

In the console.log(result), we now have the complete object result with additional data under c: My goal is to include all fields returned by the initial call along with c: as an array of objects

angular typescript rxjs

Answer 1

Answer №1

There is no need to subscribe within the operators. Simply return the observable directly and subscribe where necessary.

Utilize the filter pipe to disregard undefined responses from the initial request. This eliminates the need for if conditions inside the concatMap and subscription.
Add a map pipe to the second observable in order to merge both results.

Give this approach a try:

return this.service.save1(data).pipe(
  filter((result) => (!!result))   // Only proceed if `result` is defined
  concatMap((result) =>
    this.service.save2(result.id, this.obj).pipe(
      map((c) => ({
        ...result,
        c: c
      }))
    )
  ),
  catchError(err => throwError(err))   // The use of `catchError` is currently redundant
);

Answer 2

There is no need to subscribe within the operators. Simply return the observable directly and subscribe where necessary.

Utilize the filter pipe to disregard undefined responses from the initial request. This eliminates the need for if conditions inside the concatMap and subscription.
Add a map pipe to the second observable in order to merge both results.

Give this approach a try:

return this.service.save1(data).pipe(
  filter((result) => (!!result))   // Only proceed if `result` is defined
  concatMap((result) =>
    this.service.save2(result.id, this.obj).pipe(
      map((c) => ({
        ...result,
        c: c
      }))
    )
  ),
  catchError(err => throwError(err))   // The use of `catchError` is currently redundant
);

Answer 3

Answer №2

Enhance the response by utilizing the output of the observable c. No subscription is necessary as it will automatically subscribe to the value using concatMap.

 defer(() => {
    return this.service.save1(data)
        .pipe(
            concatMap((result) => {
                if (result) {
                    return this.service.save2(result.id , this.obj).pipe(
                            map((data) => [...data, result]) // Utilize all available data 
                                                             // for custom formatting
                }
                return of({});
            }),
            catchError(err => throwError(err)),
}).subscribe((result) => {
    if (result) {
        console.log(result);
    }
},

Answer 4

Enhance the response by utilizing the output of the observable c. No subscription is necessary as it will automatically subscribe to the value using concatMap.

 defer(() => {
    return this.service.save1(data)
        .pipe(
            concatMap((result) => {
                if (result) {
                    return this.service.save2(result.id , this.obj).pipe(
                            map((data) => [...data, result]) // Utilize all available data 
                                                             // for custom formatting
                }
                return of({});
            }),
            catchError(err => throwError(err)),
}).subscribe((result) => {
    if (result) {
        console.log(result);
    }
},

What is the best way to combine two responses and call them in a specific order, where the second http request is dependent on the response from the

Answer №1

Answer №2

Similar questions

Learn how to securely download files from an Azure Storage Container using Reactjs

Angular allows users to click on elements that have been dynamically added to the Document Object Model (DOM), such

Angular components are persisting instead of being destroyed

Learn how to configure an Angular2 Template Driven form element by implementing two-way binding and integrating template driven form validation techniques

Firebase and Nx: Encountering issues with running emulators

What causes the appearance of the "?" symbol at the beginning of the URL and triggers a reboot of the app when moving through the absolute path?

"Bootstrap's modal-backdrop element presents a striking fade effect as it

Mapping intricate entities to intricate DTOs using NestJS and TypeORM

What is the best way to group an array based on a dynamic key?

Angular: StaticInjectorError(ExplorationEditorPageModule)[Number]

Determine the return type of a function based on a key parameter in an interface

"I am facing issues with Nodejs $lookup as it is not producing the

Angular2: Filtering an array based on the presence of items in another array

Connect a pre-existing role to AWS Lambda using the AWS Cloud Development Kit (CDK)

Incorporate Third-Party Plugins with Angular

The issue with Ionic 2 and Angular 2 is that the http Headers are not getting included in the request

Using Laravel's CSRF tokens in an Angular form

Creating a custom type in Typescript using a function for testing purposes

Display a JSON file within an Angular application using HTML

When attempting to add custom webpack configuration, you may encounter an issue where the function get