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 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
– msanford, Commented Nov 7, 2018 at 18:38

Sunil · Accepted Answer · 2018-11-07 18:36:15Z

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 7, 2018 at 18:36

answered Nov 7, 2018 at 18:34

Sunil

11.3k2 gold badges29 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex D Over a year ago

I am using httpclient. But this is the A4 code. How do I translate from .map down into A6?

Pankaj Parkar · Accepted Answer · 2018-11-07 18:58:54Z

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 7, 2018 at 18:58

answered Nov 7, 2018 at 18:32

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

2 Comments

Alex D Over a year ago

ok, I think this is almost there. I am getting the following error. [ts] Property 'incomingViolationList' does not exist on type 'Object'.

Pankaj Parkar Over a year ago

or use map((response: {incomingViolationList: any, incomingViolationListCount: any}) => ({

Antoniossss · Accepted Answer · 2018-11-07 18:35:24Z

-1

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.

answered Nov 7, 2018 at 18:35

Antoniossss

32.7k7 gold badges67 silver badges119 bronze badges

Collectives™ on Stack Overflow

Angular 6 return mapping missing

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related