Acces a complex json object in Ionic 3 and bind to view

Question

I making an Ionic 3 app. I have the following JSON object:

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

I want to acces the following data from the JSON object:

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

This is my rest provider method in my Ionic 3 app:

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

I call this method at a specific page:

ionViewDidLoad() {
    this.getData();
}


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

The api is working great and I can see the data in my Chrome developer tools. Now I want to bind this data on the view like this:

<ion-card>

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

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

  </ion-card>

When I run the app it shows [object object]. I tried {{results.player.stats}} but it didn't work.

How can I bind the stats values on my view and access this?

Kind regards

Brace yourselves, angry "There is no such thing as a JSON object" comments incoming — Jeremy Thille, Aug 29 '18 at 12:43
Yeah, just display it in the view with the JSON pipe : `{{results | json}}` — Jeremy Thille, Aug 29 '18 at 12:45
Hi @jeremy, I am very new with JSON. I just followed the w3schools course and they called it JSON objects link: https://www.w3schools.com/js/js_json_objects.asp — Fearcoder, Aug 29 '18 at 12:45
Seems stats is available results.player.player.stats. First you can try alert this element and see if data is available then go for binding. — Parwej, Aug 29 '18 at 12:46
...which won't prevent angry people from saying that JSON objects don't exist :) — Jeremy Thille, Aug 29 '18 at 12:46
I get an error when I use your solution @parwej it said cannot read property 'player' and your solution gives me a error: converting circular structure to JSON jeremy — Fearcoder, Aug 29 '18 at 12:50
@Fearcoder are you able to alert the data results.player.stats ? — Parwej, Aug 29 '18 at 12:51
getStats(){ return this.results = this.rest.getStats(); alert(this.results.player.player.stats); } you mean like this? — Fearcoder, Aug 29 '18 at 12:54
@Fearcoder first of all in getData method no need to return. When setting the data in this.result try after the that statement like alert(JSON.stringify(this.result.player.stats)) — Parwej, Aug 29 '18 at 12:55
Cannot read property player and no alert. When I change it to alert(JSON.stringify(this.results) I see [object object] — Fearcoder, Aug 29 '18 at 13:03
if you are using stringify then you should see the actual json data instead object object — Parwej, Aug 29 '18 at 13:10

score 0 · Answer 1 · answered Aug 29 '18 at 13:12

0

you need to convert http response to json:

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

}

answered Aug 29 '18 at 13:12

maziyank

581
2
10

Thanks for your time! I get an error on `.map` : map does not exist on type Observable – Fearcoder Aug 29 '18 at 13:15
you need import map operator first... please refer to this [link](https://stackoverflow.com/questions/37208801/property-map-does-not-exist-on-type-observableresponse) – maziyank Aug 29 '18 at 13:17
I imported the operator I have problems now with `res.json())` I am looking on google to fix this. The error is Property json does not exist on type 'Object' – Fearcoder Aug 29 '18 at 13:29
can you post the api result you see from chrome? – maziyank Aug 29 '18 at 13:33
I posted the results I want to acces this: `"stats": { "normal": { "shots": 5, "wins": 66 }, "hard": { "shots": 5, "wins": 77 } }` and bind it to the view – Fearcoder Aug 29 '18 at 13:38
what http class you use? old Http or HttpClient? this case look similiar to this [case](https://stackoverflow.com/questions/50204981/angular2-json-does-not-exist-on-type-object) – maziyank Aug 29 '18 at 13:45
I am using this one `import { HttpClient} from '@angular/common/http';` – Fearcoder Aug 29 '18 at 13:51

score 0 · Accepted Answer · answered Sep 02 '18 at 12:21

0

The api that I used is not working properly I changed to another api and everything was working fine. Thanks for the help!

answered Sep 02 '18 at 12:21

Fearcoder

753
3
15
47

Acces a complex json object in Ionic 3 and bind to view

2 Answers2