Angular2 http get json issue

Question

Trying to display http json response in angular2 view. To get me started I have completed a specific tutorial for .NET core and Angular2 with Typescript. Everything worked fine, so I tried to modify it a bit but it looks I got stuck and can not find the answer. This is what I have so far.

wall.main.component.ts

import {Component, OnInit} from "angular2/core";
import {CORE_DIRECTIVES} from "angular2/src/common/directives/core_directives";
import {WallService} from "./wall.service";

@Component({
    selector: "wall",
    templateUrl: "app/components/wall/wall.main.html",
    providers: [WallService],
    directives: CORE_DIRECTIVES
})
export class WallComponent implements OnInit {
    data: any;

    constructor(private service: WallService) { }

    ngOnInit() {
        this.get();
        console.log(this.data);
    }

    get() {
        this.service.get().subscribe((json: any) => {
            console.log(json);
            this.data = json;
        });
    }
}

wall.service.ts

import "rxjs/Rx"
import {Http} from "angular2/http";
import {Injectable} from "angular2/core";

@Injectable()
export class WallService {
    constructor(private http: Http) { }

    get() {
        return this.http.get("wall/getwallposts").map(response => response.json());
    }
}

wall.main.html

<wall>
    <p>{{data.Id}}</p>
    <p>{{data.Body}}</p>
</wall>

Html does not display data. The error:

TypeError: Cannot read property 'Id' of undefined in [{{data.Id}} in WallComponent@3:7]

Tried a lot of ways. Accessing as an array with the index data[0].Id, changing variable types, nothing. Also this console.log(json) works fine. I can see and read the object in the console, but the other one console.log(this.data) shows undefined, which I would expect to be the same. What am I missing?

Pankaj Parkar · Accepted Answer · 2016-04-07 19:24:36Z

4

On view when CD started, data.Id interpolation tries to evaluate, but data object isn't defined yet. So when it tried to access Id property from it, it throw an error.

<wall>
    <p>{{data?.Id}}</p>
    <p>{{data?.Body}}</p>
</wall>

Other thing I wanted to point out is, there is no meaning to have wall element again, as you are already rendering a wall component.(I know it is not gonna work, because we haven't provided it inside directives option of Component)

edited Apr 7, 2016 at 19:24

answered Apr 7, 2016 at 19:12

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

6 Comments

DasBoot Over a year ago

It seems that errors are gone but no data displayed

Pankaj Parkar Over a year ago

@DasBoot are you getting correct data printed in console?

DasBoot Over a year ago

Yes, but as I mentioned console.log(this.data); returns undefined while console.log(json); works fine and returns data correctly.

Pankaj Parkar Over a year ago

@DasBoot That is correct thing.. async call will return a data once that completed.. here subscribe is acting as a callback function which is calling after ajax gets completed.. could you paste a data here, I think you are getting data in array format.. or its an object?

DasBoot Over a year ago

looks like it is working. Seems that the ? sign fixed it already. Thank you

|

Collectives™ on Stack Overflow

Angular2 http get json issue

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related