如何从Angular 5应用程序中来自json的数组中获取值？

Posted 2023-02-22

【中文标题】如何从Angular 5应用程序中来自json的数组中获取值？

【英文标题】：How to fetch value from array which came from json in Angular 5 app?

【发布时间】：2019-07-15 05:20:41

【问题描述】：

我有以下 JSON 定义：

 export class Company 
      name: string;
      trips : Trip[] = [];
    

export class Trip
    id: number;
    name: string;        

我可以使用以下命令在控制台中查看行程：

console.log(this.company);

在组件中我有以下方法：

if(this.company) 
     Object.keys(this.company.trips).forEach((data) =>      
            console.log(data);                        
        );

我在控制台中得到的是旅行的属性名称，即“id”和“number”。 我想知道如何访问该值。

【问题讨论】：

你为什么使用Object.keys？

this.company.trips.forEach(trip => console.log('trip.id', trip.id )

“我在控制台中得到的是旅行的属性名称，即“id”和“number”。”这很奇怪。你说过它是一个array。数组的键是数字字符串（"0"、"1" 等），而不是像 "id" 和 "number" 这样的东西。

附带说明：如果这些是来自 api 的数据表示，我强烈建议您改为创建这些接口，因为这些不会是类的实例。您可能会遇到测试构造函数 (instanceof) 的问题，但没有得到您期望的结果。

Object.keys 为您提供对象自己的、可枚举的、以字符串命名的属性的名称。如果需要这些值，可以使用 Object.values 返回这些属性值的数组。如果你想要两者，你可以使用Object.entries，它返回一个[key, value]数组。不过，通常情况下，您知道对象的形状并直接使用其属性。

【参考方案1】：

根据您的数据结构，您甚至不应该尝试做 Object.keys 应该做的事情，因为 Trip 是一个对象，就像下面一样，您将迭代对象视为真正的 Trip对象

if(this.company && this.company.trips)
this.company.trips.forEach((trip:Trip) =>      
            console.log(trip.id + '\n' + trip.name);                        
        );

如果您对这段 cod 有任何问题，请确保您正确地执行了反序列化过程并且对象被正确地转换。

【讨论】：

我收到 ERROR TypeError: this.company.trips.forEach is not a function

@user2304483 那么你正面临着我想的铸造问题。有一个用于铸造的图书馆，我想试一试可能是个好主意。 github.com/typestack/class-transformer

你也可以看看这个胎面***.com/questions/35969974/…

你的意思是trips不是来自api的数组？

不，我的意思是当您尝试将来自服务器的 JSON 反序列化为对象时，Angular 方面的反序列化问题