Despite all the research I've done on observables, I still struggle to grasp how they function.
The HTTP request code snippet is as follows:
import { Component, OnInit, Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { NavController } from 'ionic-angular';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
@Injectable()
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
webs: any;
getWebs(): any{
return this.http.get( 'here the url' )
.map((res: Response) => res.json());
}
constructor(public navCtrl: NavController, private http: Http) {}
ngOnInit(){
this.getWebs().subscribe(response => {
this.webs = response;
console.log(this.webs);
});
}
}
While the console displays "this.webs" correctly, indicating that the GET request is successful and the desired object is retrieved (a typical JSON object), an issue arises when trying to display a specific property of the object in the view. For example:
{{ webs.name }}
This consistently results in the following error being thrown:
Error in ./HomePage class HomePage - caused by: Cannot read property 'name' of undefined
In Angular 1, this task was much simpler. Despite consulting various tutorials, I haven't found a solution to this problem yet. Your assistance would be greatly appreciated.