2

I need to make two HTTP calls (first GET and second POST), the second based on result of the first.

Here's the response from the GET:

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

This response will then be manipulated and sent as a POST request with the following JSON:

{
    "weekNbr": 34, (as received above)
    "year": 2017 (as received above)
}

One Solution:

http.get(url1).pipe(
    map(do your maipulation)
).subscribe(
    (newlyCreatedObject) => {
        return http.post(url2,newlyCreatedObject);
    }
);

But I don't think it's the correct way.

NOTE: These calls are supposed to be made in a single service. If there are any rxjs operators to do the same, it'd be highly appreciated.

2 Answers 2

4

You can use the flatMap/mergeMap operator to make two HTTP requests, one depending on the other.

Like:

http.get(data).flatMap(res => {
    // res is response of Get
    // manipulate the data and passed in post call
    return http.post(data);
})
.map(res => {})
.catch(e => {});
2
  • Mergemap is used to make two simultaneous calls as far as I know. Not sure about flatMap/switchMap, though. Also, i need to manipulate my data from get and then feed it to the post call. So that requires some extra manipulation which I don’t think is recommended in operators like map(made for minor filtering/updation) of data! Sep 19, 2018 at 20:49
  • mergeMap is just the new name of flatMap. within mergeMap you can do the manipulations you want. Otherwise, if you prefer this style, use http.get(data).map(res => // do the manipulations).flatMap(res => { return http.post(data); })
    – Picci
    Sep 20, 2018 at 5:37
0

i have prepare this dummy service :

import {of, Observable} from 'rxjs';
import {flatMap} from 'rxjs/operators';
/**
 * Dummy get observable.
 */
export class MyService {

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

  postInformation$(params:{foo:string}): Observable<any> {
    return of({
      fooUpperCase: params.foo.toUpperCase() // Stupid transformation for demonstration only
    });
  }

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

new MyService().main();

For demonstration only, i have switch http observable to dummy of observable.

live sample

1
  • I think this would work. Thanks mate! Also, i want the POST data(which is returned) in a component. So i am thinking of using a resolver to fetch the data(the main() function would be in it)! But is it recommended to have that kind of data manipulation in a resolver? Or as you used in the post call( since its gonna be in service.ts file where data manipulation is not recommended )? Sep 19, 2018 at 21:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.