Object showing as undefined in html even though it has data in the service

Question

I am pretty new to Angular, I managed to follow the Tour of Heroes tutorial pretty easily and got the entire application working. I have now started a new project, which is just getting data from the Strava API to display it.

So far I have managed to get a list of activities and display them, they come in as an array of Objects, and I just do the same thing as the first image below, only with a different URL.

When I try to get an athlete, the API is responding with a JSON object, which I can see with by outputting response.json() inside the getDataFromURL function.

When I attempt to output onto the page using {{athlete.id}} I just get a Cannot read property 'id' of undefined error. I have tried to change a bunch of things to get to this stage but just can't get it to work. Any help would be appreciated.

//getAthlete and getDataFrom URL from the service
/* Recieve data from a given URL over jsonp */
private getDataFromURL(url: string): Promise<any> {
    return this.jsonp.get(url)
        .toPromise()
        .then(response => response.json())
        .catch(this.handleError)
}

/* Get details of a single athelete */
getAthlete(): Promise<any> {
    let url = 'https://www.strava.com/api/v3/athlete?per_page=1&access_token=' + this.accessToken + '&callback=JSONP_CALLBACK';
    return this.getDataFromURL(url)

}

//getAthlete from the component

athlete: Object

getAthlete(): void {
    this.stravaService.getAthlete().then(athlete => this.athlete = athlete)
}

ngOnInit(): void {
    this.getAthlete()
}

//Here is the html code to try and put athelete.id on the page

<span class="id">{{athlete.firstname}}</span>

Please add code as text instead of screenshots. Screenshots are not searchable. — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 18, 2016 at 18:18

Günter Zöchbauer · Accepted Answer · 2016-09-18 18:20:05Z

2

Use

{{athlete?.id}}

to make the code null-safe for async loaded data.

answered Sep 18, 2016 at 18:20

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Object showing as undefined in html even though it has data in the service

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related