I have a detailed component that is designed to show the 5-day forecast for a specific city. I have successfully retrieved the data using the http.get(Url) method.
However, I am unsure of how to bind this JSON data to my view.
I am familiar with displaying data in a list view, but I am not sure how to display a single object.
Detailed Component:
@Component({
selector: 'app-weather-detail',
templateUrl: './weather-detail.component.html',
styleUrls: ['./weather-detail.component.css']
})
export class WeatherDetailComponent implements OnInit {
public weatherDetailItem: any;
private name: any;
constructor(
private weatherService: WeatherService,
private route: ActivatedRoute,
private location: Location
){}
//This method will retrieve the 5-day forecast for the city name in the route parameter
getWeatherItem(){
this.weatherService.fetchDetail(this.name)
.do(data => console.log(data))
.subscribe((data) => {
this.weatherDetailItem = data;
})
}
goBack(): void {
this.location.back();
}
ngOnInit() {
this.name = this.route.snapshot.params['name'];
this.getWeatherItem();
}
}
fetchDetail() makes the http.get call and fetches this data:
In my template, I have the following:
<div>
<h3>CITY:</h3>
<h3>{{weatherDetailItem}}</h3>
</div>
Upon loading the page, it displays City: [object Object]. I attempted to access the JSON data using {{weatherDetailItem.city.name}}, but encountered an error. Any suggestions?
Thank you