Angular没有将JSON解析为对象答案

【问题标题】：Angular not parsing JSON into objectAngular没有将JSON解析为对象
【发布时间】：2018-07-30 16:07:59
【问题描述】：

有人可以解释为什么我的 JSON 对象没有被正确解析为 Angular 对象吗？（当我显示 HTML 时，Angular 对象的值为空）

对 JSON 的 Angular 代码生成请求

GetMessageSub(): void {
  this.http.get('http://localhost:61460/api/values')
    .pipe(map(res => JSON.parse(res.toString())),
        catchError(this.handleError('getMessageSub()', [])))
    .subscribe(people => this.people = people);
}

使用 JSON 回复的 C# 代码

public JsonResult Get()
{
    return Json("[{ id:1, name:\"value2\" }]");
}

声明 People 对象的 Angular 代码

export class People {
    id: number;
    name: string;
  }

调用 people 对象的 HTML（由 GetMessageSub() 填充

people found:  {{people.id}} -- {{people.name}}

【问题讨论】：

JSON 代表 JavaScript Object Notation，所以它已经是一个对象。不需要转换它
@SandipNirmal 不完全是。 JSON 是字符串的一种格式。某些东西必须对其进行解析才能将其放入对象中。在大多数情况下，Angular 会自动执行此操作，但这并不是因为 JSON 是一个对象。

标签： c# json angular

【解决方案1】：

您的 C# 代码：

return Json("[{ id:1, name:\"value2\" }]");

返回一个字符串，"[{ id:1, name:\"value2\" }]"，编码为 JSON，所以"\"[{ id:1, name:\\\"value2\\\" }]\""，而不是具有单个对象的数组。如果你想这样做，要么：

在 C# 中构建一个对象数组并通过 JSON 发送：

return Json(new object[] { new { id = 1, name = "value2" } });

或者使用ContentResult将其作为字符串发送：

return Content("[{ id:1, name:\"value2\" }]", "application/json");

对于后一种选项，您还需要更改方法的签名。

【讨论】：

我尝试让 c# 像你建议的那样返回一个对象数组，但我的 HTML 输出很奇怪：people found: function People() { }:: -- People。我在我的帖子中包含了上面生成输出的 HTML 调用
请注意几件事：Angular 允许您使用 res.json() 来获取从 JSON 解析的对象（因此，map(res => res.json())）。此外，people 将是一个数组。数组通常没有id 或name 属性。您可能需要 *ngFor 来遍历数组中的项目。

【解决方案2】：

您已经返回了一个有效的 JSON，无需解析，只需分配

this.http.get('http://localhost:61460/api/values')
    .pipe(map(res =>res)),
        catchError(this.handleError('getMessageSub()', [])))
    .subscribe(people => this.people = people);

【讨论】：