如何以角度访问嵌套的 JSON 对象？答案

【问题标题】：How to access nested JSON objects in angular?如何以角度访问嵌套的 JSON 对象？
【发布时间】：2022-09-22 23:14:26
【问题描述】：

我的 API 返回一个 JSON 响应，我的 Angular 应用程序使用接口获取。返回的 JSON 如下所示：

    {
       \"release_date\":\"2012-03-14\",
       \"genre_relation\":[
          {
             \"id\":\"2604ebbf-4eb5-46e3-89d8-ab4e8ecc8275\",
             \"name\":\"ABC\"
          },
          {
             \"id\":\"5267a0c6-9423-4e28-a413-133cc3435612\",
             \"name\":\"DEF\"
          },
          {
             \"id\":\"13d1454a-fc0e-457c-9f8e-9a9952984d8c\",
             \"name\":\"GHI\"
          }
       ]
    }

现在我的问题是，如何访问嵌套的响应的名称字段？例如，如果我在我的模板中执行以下操作：

    <p>{{ api_response.genre_relation.name }}</p>

.name 没有解析。我必须在接口级别执行此操作吗？目前，我的界面看起来很平：

    export interface SomeResponse {
      release_date: string;
      genre_relation: string;
    }

提前致以诚挚的问候和感谢。

你能举个例子吗？
设置另一个接口export interface GenreRelation { id: string, name: string }。然后将genre_relation: string 替换为genre_relation: Array<GenreRelation>。

标签： javascript angular typescript

【解决方案1】：

genre_relation 是一个对象数组。因此，您必须遍历该数组并分别访问数组中的每个对象。您可以使用ngFor 做到这一点：

<p *ngFor="let item of api_response.genre_relation">
  {{ item.name }}
</p>

【讨论】：

我仍然没有得到名称字段来解决:(
您可以在问题中添加您的组件.ts 文件吗？您设置api_response 属性的部分。

【解决方案2】：

名称字段位于数组genre_relation 中的对象上。

因此，您可以通过遍历数组然后显示或通过索引来访问它，例如

api_response.genre_relation[0].name

【讨论】：

【解决方案3】：

Genre_relation 是一个数组，所以它是 api_response.genre_relation[i].name 其中 i 是你的对象的索引

【讨论】：

好的，如果我只是想要一个逗号分隔的数组中所有对象的所有名称的列表怎么办？

【解决方案4】：

您应该拥有 json 中的对象的接口。如果你这样做了，那么它也会帮助你进行智能感知。您可以添加如下内容：

export interface SomeResponse {
  release_date: string;
  genre_relation: genre[]; // <----add it here
}

export interface genre {
  id: string;
  name: string;
}

现在在您的模板中，您可以使用*ngFor 迭代来迭代流派列表：

<div *ngFor="let genre of api_response.genre_relation">
   <p>{{ genre.name }}</p>
</div>

【讨论】：

【解决方案5】：

与其他解决方案一样，您可以使用索引访问名称。

<p *ngFor="let relation of api_response.genre_relation">
  {{ relation.name }}
</p>

你也应该改变你的界面，比如，

    export interface SomeResponse {
      release_date: string;
      genre_relation: { id: string, name: string }[];
    }

【讨论】：