如何在 Angular 中返回 JSON 响应的单个属性？答案

【问题标题】：How do I return a single attribute of a JSON response in Angular?如何在 Angular 中返回 JSON 响应的单个属性？
【发布时间】：2019-06-26 12:23:25
【问题描述】：

我有多个 HTTP 请求来获取数据。以前我收到的 JSON 响应看起来像这样：

[{"date":"25-04-2019 11:11:23","action":"Created Request","userName":"chaitanya"},{"date":"25-04-2019 11:13:18","action":"Edited Request","userName":"chaitanya"}]

现在 JSON 响应看起来像这样：

{
    "status": "SUCCESS",
    "data": "[{\"date\":\"04-06-2019 05:51:33\",\"action\":\"Created Request\",\"userName\":\"David Katz\"},{\"date\":\"04-06-2019 05:53:43\",\"action\":\"Edited Request\",]",
    "errorMsg": null
}

基本上，较早的响应现在是新 JSON 中“数据”的一部分。

我之前的 return 语句看起来像这样：

return this.http.post('https://abc.xzu/fetchData', details)

如何在新的 JSON 中返回“数据”的值？如何访问它？

另外，我还有其他一些使用 subscribe 或 toPromise 的服务。对他们来说会有什么改变？基本上，我不知道如何访问新 JSON 中“数据”的值。

【问题讨论】：

标签： angular

【解决方案1】：

您可以使用以下方式访问数据：

 .subscribe( (result: any) => {
        this.data = result.data
    });

【讨论】：

或return this.http.post('https://abc.xzu/fetchData', details).pipe(mergeMap(res => res.data));然后照常订阅。
也是一种选择，但如果你想的话，你将无法获得status或errorMsg。
我试过了，但它不起作用。我试图记录 result.data ，但我没有定义。我将其更改为 result.json().data 并且当我记录它时能够看到它，但是当我尝试在我的 HTML 代码中访问它时，我收到一个错误，说只允许数组和可迭代对象
我的错。我在那个“数据”属性中得到了一个字符串，而不是一个 JSON。谢谢罗纳德。这对我有用！

【解决方案2】：

您可以按照Ronald Haan 所述（这意味着修改您的订阅）或类似的方式进行操作

yourMethod() {
  return this.http.post('https://abc.xzu/fetchData', details)
    .pipe(
      tap(res => handleStatus(res)), // Handle errors without modifying the data
      mergeMap(res => res.data),
      mergeMap(data => JSON.parse(data)) // If you need to parse the JSON string
  );
}

handleStatus(res: {status: string, data: string, errorMsg: string | null}) {
  // Do something with 'status' and 'errorMsg'
}

这样您就可以处理新字段，而无需更改您的订阅。

【讨论】：

【解决方案3】：

您的 API 是否有回复？就像是：响应.状态.....

这可能是问题所在。

或尝试添加详细信息.toString 或.Stringefy

【讨论】：

【解决方案4】：

url = "api/uddl/zxcc";

    getDataWithObservable(): Observable<CLASS[]> {
        return this.http.get(this.url)
           .map(this.extractData)
           .catch(this.handleErrorObservable);
    }

【讨论】：