在 Ionic 3 中访问复杂的 json 对象并绑定到视图答案

【问题标题】：Acces a complex json object in Ionic 3 and bind to view在 Ionic 3 中访问复杂的 json 对象并绑定到视图
【发布时间】：2019-02-04 06:13:30
【问题描述】：

我正在制作一个 Ionic 3 应用程序。我有以下 JSON 对象：

{
    "player": {
        "username": "thelegend",
        "platform": "xbox",     
       "stats": {
        "normal": {
            "shots": 5,
            "wins": 66             
        },
        "hard": {
            "shots": 5,
            "wins": 77               
        }           
    }
    }
}

我想从 JSON 对象中获取以下数据：

stats: {normal:{ shots: "58", wins: "54"}, hard: {shots "34", wins: "43"}

这是我在 Ionic 3 应用程序中的休息提供者方法：

 getStats(){ 
    return this.http.get(this.apiUrl).subscribe(data => {
      console.log(data);
    });
}

我在特定页面调用这个方法：

ionViewDidLoad() {
    this.getData();
}


  getData(){
   return this.results = this.rest.getStats();    
}

该 API 运行良好，我可以在我的 Chrome 开发人员工具中查看数据。现在我想像这样在视图上绑定这些数据：

<ion-card>

    <ion-card-header>
      Wins
    </ion-card-header>

    <ion-card-content>
      {{results}}
    </ion-card-content>

  </ion-card>

当我运行应用程序时，它会显示 [object object]。我试过 {{results.player.stats}} 但没用。

如何在我的视图上绑定统计值并访问它？

亲切的问候

【问题讨论】：

振作起来，愤怒的“没有像 JSON 对象这样的东西”cmets 传入
是的，只需使用 JSON 管道将其显示在视图中即可：{{results | json}}
嗨@jeremy，我对JSON 很陌生。我刚刚学习了 w3schools 课程，他们称之为 JSON 对象链接：w3schools.com/js/js_json_objects.asp
似乎有可用的统计数据 results.player.player.stats。首先你可以尝试alert这个元素，看看数据是否可用，然后去绑定。
...这不会阻止愤怒的人说 JSON 对象不存在 :)

标签： android html json typescript ionic-framework

【解决方案1】：

我使用的 api 无法正常工作我更改为另一个 api 并且一切正常。谢谢您的帮助！

【讨论】：

【解决方案2】：

您需要将http响应转换为json：

getStats(){ 
return this.http.get(this.apiUrl).map(res => res.json()).subscribe(data => {
  console.log(data);
});

}

【讨论】：

感谢您的宝贵时间！我在.map 上收到错误：Observable 类型上不存在地图
你需要先导入地图运算符...请参考这个link
我导入了运算符我现在遇到res.json()) 的问题我正在寻找谷歌来解决这个问题。错误是“对象”类型上不存在属性 json
你能把你从chrome看到的api结果贴出来吗？
我发布了我想要访问的结果："stats": { "normal": { "shots": 5, "wins": 66 }, "hard": { "shots": 5, "wins": 77 } } 并将其绑定到视图