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

Answer 1

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

);