angular2 accessing and assigning object properties returned by service to component local variable

Question

My video service:

public getExercise(exerciseId): Observable<Exercise[]>{

        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers, withCredentials: true });

        return this.http.get(this.base_url + exerciseId + '/', options)
        .map(this.extractData)
        .catch(this.handleError);
}

In my template I have:

<!-- Show current level -->
<div align="center">
 <h6>Ihre aktuelle Intensitätsstufe ist {{intensity_level}}</h6>
</div>

<div *ngIf="showVideo" align="center" class="video-container">
        <iframe [src]="exercise_video_url | safe" frameborder="0" allowfullscreen></iframe>
</div>

And my component:

export class VideoPage implements OnInit {

    exercise: Exercise[];
    errorMessage: string;

    public exercise_id: number;
    public intensity_level: number;
    public rating: number;
    public exercise_video_url: string;
    public current_date: string;


    constructor(public navCtrl: NavController, public navParams: NavParams, public videoService: VideoService) {

        console.log(this.navParams.get('exerciseId'));
        this.exercise_video_url='';

        this.exercise_id=this.navParams.get('exerciseId');

    }

    ngOnInit(){

        this.getExercise()
    }

    getExercise(){

        this.videoService.getExercise(this.exercise_id)
        .subscribe(
            exercise => {
                this.exercise = exercise;
                console.log(this.exercise[0].video_url)

            },
            error => {
                this.errorMessage = <any>error;
            });

        this.exercise_video_url=this.exercise[0].video_url;

    }   
}

However, the object properties are not being assigned to my local variables so that I can bind them on template. My service simply returns one object that's why I used this.exercise[0] and if I try to write the same line outside get(), it gives compilation error (which seems obvious). What should be done here?

The console line prints the url.

Answer 1

The problem here is that you are assigning the video url outside of the subscribe function.

getExercise(){

    this.videoService.getExercise(this.exercise_id)
    .subscribe(
        exercise => {
            this.exercise = exercise;
            console.log(this.exercise[0].video_url)
            // NEW LINE
            this.exercise_video_url=this.exercise[0].video_url;
        },
        error => {
            this.errorMessage = <any>error;
        });

    // OLD LINE
    // this.exercise_video_url=this.exercise[0].video_url;

}   

Answer 2

You are not mapping your response content to your required Exercise model, Modify your service as below

public getExercise(exerciseId): Observable<Exercise[]>{

        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers, withCredentials: true });

        return this.http.get(this.base_url + exerciseId + '/', options)
        .map((response: Response) => <Exercise[]>response.json())
        .catch(this.handleError);
}