Perform an HTTP request using the data obtained from the previous request

Question

Perform an HTTP request using the data obtained from the previous request

I am looking to execute two HTTP requests, one GET and one POST, where the second request is based on the response from the first.

Here is the output from the initial GET call:


{
    "weekNbr": "34-2017",
    "startDate": "2017-09-16",
    "endDate": "2017-09-22"
}

The response will be modified and used as the body for the subsequent POST request in this format:


{
    "weekNbr": 34, (from initial response)
    "year": 2017 (from initial response)
}

A possible solution involves utilizing RxJS operators to handle both requests within a single service:

http.get(url1).pipe(
    map(perform manipulation)
).subscribe(
    (newObject) => {
        return http.post(url2, newObject);
    }
);

It's worth noting that these calls need to be completed within a unified service. Any recommendations on specific rxjs operators for this task would be greatly appreciated.

angular typescript rxjs observable

Answer 1

Answer №1

To efficiently handle two HTTP requests, one dependent on the other, you can utilize the flatMap/mergeMap operator.

For instance, consider the following implementation:

http.get(data).flatMap(res => {
    // res represents the response from the first GET request
    // manipulate the data and pass it to a POST call
    return http.post(data);
})
.map(res => {})
.catch(e => {});

Answer 2

To efficiently handle two HTTP requests, one dependent on the other, you can utilize the flatMap/mergeMap operator.

For instance, consider the following implementation:

http.get(data).flatMap(res => {
    // res represents the response from the first GET request
    // manipulate the data and pass it to a POST call
    return http.post(data);
})
.map(res => {})
.catch(e => {});

Answer 3

Answer №2

Below is a sample of a dummy service that I have prepared:

import {of, Observable} from 'rxjs';
import {flatMap} from 'rxjs/operators';

/**
 * Example of a Dummy Service with Observables.
 */
export class MyService {

  getInformation$(): Observable<{foo:string}> {
    return of({foo:'bar'});
  }

  postInformation$(params:{foo:string}): Observable<any> {
    return of({
      fooUpperCase: params.foo.toUpperCase() // Just a demo transformation
    });
  }

  main() {
    this.getInformation$().pipe(
      flatMap(data => this.postInformation$(data)) // Process each data and return a new observable 
    ).subscribe(console.log);
  }
}

new MyService().main();

This code snippet replaces the standard HTTP observables with dummy of observables for demonstration purposes.

See live example here

Answer 4

Below is a sample of a dummy service that I have prepared:

import {of, Observable} from 'rxjs';
import {flatMap} from 'rxjs/operators';

/**
 * Example of a Dummy Service with Observables.
 */
export class MyService {

  getInformation$(): Observable<{foo:string}> {
    return of({foo:'bar'});
  }

  postInformation$(params:{foo:string}): Observable<any> {
    return of({
      fooUpperCase: params.foo.toUpperCase() // Just a demo transformation
    });
  }

  main() {
    this.getInformation$().pipe(
      flatMap(data => this.postInformation$(data)) // Process each data and return a new observable 
    ).subscribe(console.log);
  }
}

new MyService().main();

This code snippet replaces the standard HTTP observables with dummy of observables for demonstration purposes.

See live example here

Perform an HTTP request using the data obtained from the previous request

Answer №1

Answer №2

Similar questions

Tips for incorporating a captcha image into your angular 8 application

Combine TypeScript files in a specific sequence following compilation

Guide on initializing a Redux toolkit state with an array of objects or local storage using TypeScript

Exploring Angular Performance: Template Functions vs. Properties. Which Method Reigns Supreme in Speed?

Avoiding redundancy when importing identical CSS file in multiple documents

Rendering Backend Data in Angular Application on Page Refresh with Apache Server Integration

Determining the data type of a generic variable within an Angular component

Render JSON value as an input in an Angular component using @Input()

Instance of exported class declared in Typescript

Utilizing Sharepoint Online SPFX Web parts with React: A guide to selecting scripts dynamically based on environment requirements

A guide on including all Angular Material modules in Angular 9

Overriding Bootstrap Modals with PhaserJS Canvas

I am currently working on implementing data filtering in my project. The data is being passed from a child component to a parent component as checkboxes. Can anyone guide me on how to achieve this filtering process

Show pictures in Angular 10 after uploading them via Multer on the Node.js server

The function Interceptor.intercept is not defined

Encountered an issue when trying to update information in mongodb

The ngtools/webpack error is indicating that the app.module.ngfactory is missing

The reason behind the clickable issue with my duplicate <ion-select>

The issue of Angular, ng-ckeditor, and the problematic editor-destroy-iframe bug

Stop the direct importing of modules in Angular applications