make http post synch using Observable in Angular

Question

I'm trying to implement this but need some help (I'm new to this).

I currently have,

constructor(http: HttpClient, private cvservice: CvService) {
const req = http.post<any>('url', [{
            "name": "ids",
            "license": "GPL version 2"
}])
  .subscribe(
    res => {
    console.log(res);
    var resp = res.Results[0].results.map(x => {
            return {cvid: x.ID, severity: x.CVSS };
    } );
   this.data = [...resp];
    },
    err => {
      console.log("Error occured");
    }
  );
}

This works fine except I need to make the http.post synch (need Results[0] before continuing) and I'm using the suggestion from, How to synchronise Angular2 http get?.

I've modified the service as,

export class CvService {
constructor(private http: HttpClient) {
}
url = 'foo';
getIds():Observable<any[]> {
const url='xxx';
return this.http.post(url, [{
            "name": "ids",
            "license": "GNU General Public License GPL version 2"
        }])
        .map(
            res =>  {
                res.Results[0].results.map( x => {
                   return {cvd: x.ID, severity: x.CVSS };
}));
}
}
}

But I think this syntax is wrong. This gives compile error. Can someone please clarify the correct way to use the map function here?

What version of rxjs are you using? (Bear in mind, as the post you linked to points out, this does not make it sync, **but you shouldn't want it to be sync**. You can work with the async nature of the HTTP calls) — user184994, Nov 06 '18 at 02:10
I think you are using rxjs 6+ and for that you need to use pipe operator `.pipe(map(....))` and if want to chain operators use `,` i.e. `.pipe(map(...), tap(...), ...)` — Suryan, Nov 06 '18 at 02:14
Yes; I'm using rxjs 6+. I've implemented this using .pipe(map(..)) but now I need to chain multiple http requests in a specific order. I have to parse the output of one to pass as input data to the next. Is there an example for this? — anglee, Nov 06 '18 at 22:36

score 0 · Answer 1 · answered Nov 06 '18 at 02:42

import map from rxjs and use it inside the pipe like this

return this.http.post(URL, Object)
 .pipe(map(data) => {
    return data['result'].map(res => {
   // Here You can return the entire res, or just the properties you want
   // EX: --> return res OR --> return res.cvd
   });
});

also, make the object outside

let cv = [{
  name: "ids",
  license: "GNU General Public License GPL version 2"
}];

You can use it then like this

return this.http.post(URL, cv);

KShewengger · Answer 2 · 2018-11-06T03:19:28.057

0

You can implement this way:

Service

saveUser(): Observable<any> {
    const data = [{"name": "ids", "license": "GNU General Public License GPL version 2"}];

    // For Angular v5 below
    this.http
      .post(url, data)
      .map(res => res.json());       // or .map(res => res), depends what your fetching with

    OR you can pipe it out (Angular 6+)

    this.http
      .post(url, data)
      .pipe(map(({ Results }: any) => Results[0].results.map(item => ({cvid: item.ID, severity: item.CVSS }))));

    // Based from you code when you accessed it this way: res.Results[0].results.map( x => {return {cvd: x.ID, severity: x.CVSS };
}

Component

this.userService
   .saveUser()
   .subscribe(data => console.log(data));

Had created a Stackblitz demo for your reference - This uses different data and mocked POST API for demo purposes only.

edited Nov 06 '18 at 03:19

answered Nov 06 '18 at 02:44

KShewengger

7,853
3
24
36

This worked great. A quick follow up. I need to chain a few such requests in a specific order. Should I call these functions in the order in which I want them executed? (saveUser1(), parse output1, saveUser2(), parse output2, ...). – anglee Nov 06 '18 at 20:34
Yes, when you want to implement it in an orderly manner - you should specify it with the order you wanted your pipe function to execute. Would it be great if it could be (saveUser1(() => parseOutput1), saveUser2(() => parseOutput2)) to have 2 methods only in a pipe instead of 4. – KShewengger Nov 07 '18 at 01:01
mind if you'll upvote it ? If every my answer helps you with the original problem you had posted? That would be a great help, thanks :) – KShewengger Nov 07 '18 at 03:32
I've tried tp upvote; it doesnt seem count since I dont have enough rep. :( – anglee Nov 07 '18 at 03:48

make http post synch using Observable in Angular

2 Answers2