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

Posted 2023-03-13

【中文标题】无法从 JSON 获取某些数据，返回未定义的 Angular 6

【英文标题】：Can't get certain data from JSON, returns undefined Angular 6

【发布时间】：2018-12-15 04:59:44

【问题描述】：

我正在尝试从这个 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
        ]
    
]

【参考方案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>

【讨论】：

如何存储来自用户 1 和 2 的“数据”以便稍后在 ngFor 中使用？还是应该直接遍历结果？

结果是数组，所以你可以将它与 ngFor 一起使用

如果你愿意，我可以写一个例子？？

那太好了，我还不确定如何使用 ngFor 遍历数组

@prevox 我首先更新了答案我仅将数据映射到用户数据，因此结果是最后的数据数组数组我将所有数据合并为单个项目数组

【参考方案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 数组中

【讨论】：

你好，我得到这个：错误类型错误：无法读取未定义的属性'concat'

非常有趣的解决方案。还有一个问题，如果你不介意的话。在 ngOnInit 之后，我得到了一个包含数据的数组来填充我的用户表。我不明白如何用 observable 的映射结果填充这个数组，因为我不能在函数之外应用任何逻辑，如果我写一个函数然后在同一个 TS 文件上调用它，我得到“缺少函数实现或不立即在声明之后”。你知道我为什么会得到这个吗？

@prevox > 你能针对你的问题提出一个新问题吗？谢谢