如何从Angular中的HTTP请求返回JSON响应的特定属性？

Question

I have a HTTP request to fetch details for a table. Earlier, the response was a JSON which looked like this :

{"TotalRejectedRequests":0,"TotalDrafts":41,"RequestsPendingApproval":6,"TotalApprovedRequests":13}

For this type of response, I was returning the data like this :

return this.http.post<Snapshot>('https://xyz.abc/fetchData', details);

where Snapshot was the name of the interface to which the response was mapped.

Now the response that I get from the HTTP request has changed to this :

{
    "status": "SUCCESS",
    "data": {
        "TotalRejectedRequests": 0,
        "TotalDrafts": 2,
        "RequestsPendingApproval": 0,
        "TotalApprovedRequests": 1
    },
    "errorMsg": null
}

How do I now return only the value of "data" in this response JSON mapped to the Snapshot interface I already have?

EDIT : Igor's answer solved the previous issue but I have 2 different issues now. 1. What do I do if I don't have any interface to map my response to? I have another service where I was just returning the entire JSON without mapping it to an interface? Now I just want to return the data value of that JSON like shown above? How do I do that?

2. If I'm using subscribe or toPromise, will that cause any issue or will there be any other way to do it?

Answer 1

Use map to map your data to the expected response.

return this.http.post<{data: Snapshot}>('https://xyz.abc/fetchData', details)
   .pipe(map(_ => _.data));

Do not forget to import map

import {map} from 'rxjs/operators';

Answer 2

Unwrap your data with rxjs mapping operator

import { map } from 'rxjs/operators';
...
return this.http.post<Snapshot>('https://xyz.abc/fetchData', details).pipe(
  map(({ data }) => data)
);

Also you can do a lot more with rxjs operators take look at their documentation