Angular 6 return mapping missing

Question

Upgrading a project from Angular 4 to 6 and having some trouble getting my return to work. My json comes in like

{
    "incomingViolationList":[{"productName": "Mirror",…],
    "incomingViolationListCount": 67
}

My service call use to look like this but in A6 .map no longer works.

return this.http.get('MappViolations/MappViolations?', options)
      .map(response => <GridDataResult>{
        data: response.json().incomingViolationList,
        total: response.json().incomingViolationListCount
      });

I have starting my new service call but am at a loss how to seperate into "data" and "total"

return this.http.get<IncommingViolations[]>
      (AppSettings.API_ENDPOINT + 'MappViolations/MappViolations?', { params });

Perhaps helpfully, read https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md It comes with a change in rxjs, where chained dot-operators were replaced with pipe/taps. — msanford, Nov 07 '18 at 18:38

Pankaj Parkar · Answer 1 · 2018-11-07T18:58:54.680

2

In Angular 6 there is HttpClient used instead of Http service

Using HttpClient the response object is a JSON by default, so there's no need to parse it anymore (response.json() is not needed)

Also if you update RxJS 6 with Angular 6 update it will look something like below pipeable operators.

return this.http.get('MappViolations/MappViolations?', options)
  .pipe( 
     map((response: any) => ({
      data: response.incomingViolationList,
      total: response..incomingViolationListCount
     })
  );

edited Nov 07 '18 at 18:58

answered Nov 07 '18 at 18:32

Pankaj Parkar

134,766
23
234
299

ok, I think this is almost there. I am getting the following error. [ts] Property 'incomingViolationList' does not exist on type 'Object'. – Alex D Nov 07 '18 at 18:56
or use `map((response: {incomingViolationList: any, incomingViolationListCount: any}) => ({` – Pankaj Parkar Nov 07 '18 at 18:59

Sunil Singh · Accepted Answer · 2018-11-07T18:36:15.057

2

In Angular 6, you will be using HttpClient which returns the json response by default. So you can remove json from the response.

return this.http.get('MappViolations/MappViolations?', options)
     .pipe( 
 map(response => ({
  data: response.incomingViolationList, //<-- remove json
  total: response..incomingViolationListCount //<-- remove json
 })

);

edited Nov 07 '18 at 18:36

answered Nov 07 '18 at 18:34

Sunil Singh

11,001
2
27
48

I am using httpclient. But this is the A4 code. How do I translate from .map down into A6? – Alex D Nov 07 '18 at 18:35

score -1 · Answer 3 · answered Nov 07 '18 at 18:35

So you have stated in the comment that your case is that map is not an option. Well actually it still is, but it is used slightly different way

return this.http.get('MappViolations/MappViolations?', options)
      .pipe(
        map(response => <GridDataResult>{
          data: response.json().incomingViolationList,
          total: response.json().incomingViolationListCount
      }));

Notice usage of pipe directly on observable insteed of map.

Angular 6 return mapping missing

3 Answers3