无法从 JSON 获取某些数据，返回未定义的 Angular 6

Question

我正在尝试从这个 JSON 中提取“数据”，但它一直抛出未定义的结果。

出现此错误的代码摘录：

ngOnInit(): void {
    this.testService.getTestWithObservable().subscribe(
        res => {
            let user = res["users"];
            let user_data = user["data"];

            this.user_data = user_data;

            console.log(user_data);
            console.log(res);
        }
    );
}

res 输出整个 JSON 但 user_data 抛出：

错误类型错误：无法读取未定义的属性“数据” 在 SafeSubscriber._next

JSON

[{
    "id": 1,
    "users": {
        "user_id": 14,
        "data": [{
            "name": "James",
            "age": 20
        },
        {
            "name": "Damien",
            "age": 25
        }]
    }
}
{
    "id": 2,
    "users": {
        "user_id": 11,
        "data": [{
            "name": "James",
            "age": 20
        },
        {
            "name": "Damien",
            "age": 25
        }]
    }
}]

Answer 1

结果是数组，所以你必须使用索引来访问数组数据，

    this.testService.getTestWithObservable()
     .map( result => result.map( i => i.users.data) )  // array of data array
     .subscribe(
        res => {

            this.user_data = [];
            res.forEach(i => this.user_data(...i));
            console.log(this.user_data); // all users data as array 
        }
    );
}

通过ngFor循环抛出数据

<div *ngFor="let user of user_data">
  {{user.name}} , age : {{user.age}}
</div>

Answer 2

您的 JSON 是一个数组，因此您需要使用索引或循环来访问您的项目之一，如下所示：

ngOnInit(): void {
    this.testService.getTestWithObservable()
        .subscribe(
            res => res.forEach(user => this.user_data = [...(this.user_data || []), user['users']['data']]);
        );
}

或者：

ngOnInit(): void {
    this.testService.getTestWithObservable()
        .subscribe(
            res => this.user_data = res[0]['users']['data']);
        );
}

第一个代码会将每个用户的所有data prop 存储在user_data 数组中