CODEWITHSUNDEEP
angularangular-httpclient
Alex D
Alex D

Reputation: 828

Angular 6 return mapping missing

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 });

Upvotes: 0

Views: 468

Answers (3)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

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
     })
  );

Upvotes: 2

Sunil
Sunil

Reputation: 11243

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
 })

);

Upvotes: 2

Antoniossss
Antoniossss

Reputation: 32507

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.

Upvotes: -1

Related Questions