Problem displaying data in an observable


#1

Hello, I can not display my data in the view.

I have an http call that returns an object.

I try to print "console.log(“getProfile: " + JSON.stringify(body))” of the object and it tells me that it is undefined but if after loading the page I put a button (console.log("getProfile: " + JSON.stringify(body)) and it prints the object well.

provider - profile.ts

 getProfile(): Observable<UserClass>{
   return this.http.get(this.path).map(
     (res) =>{
       let body = res.json();
       console.log("getProfile: " + JSON.stringify(body))
       return body;  
       //return this.data = res.json();  
        }, error => {
            console.log(JSON.stringify(error.json()));
        });
  }

component - profile.ts

LoadProfile():void {
/let obj = new UserClass(this.email, this.displayName, this.animalName, this. description,this. location );
this.profile.push(obj);
/
this.ProfileService.getProfile().subscribe(
(userClass) => this.profile = userClass
)
}

Model - UserClass

export class UserClass {
    email: string;
    displayName: string;
    animalName: string;
    description: string;
    location: string;
    constructor(email: string , displayName: string, animalName: string, description: string,  location: string){
        this.email = email
        this.displayName = displayName
        this.animalName = animalName
        this.description = description
        this.location = location
    }
    getEmail(): string {
        return this.email;
    }
    setEmail(email: string){
            this.email = email;
    }
    getDisplayName(): string {
        return this.displayName;
    }
    setDisplayName(displayName: string){
            this.displayName = displayName;
    }
    getAnimalName(): string {
        return this.animalName;
    }
    setAnimalName(animalName: string){
            this.animalName = animalName;
    }
    getDescription(): string {
        return this.description;
    }
    setDescription(description: string){
            this.description = description;
    }
     getLocation(): string {
        return this.location;
    }
    setLocation(location: string){
            this.location = location;
    }
}

view

{{displayName}}

...

#2

does it work if you place the console.log inside of the subscribe method in profile.ts?