I've been working on a weather application that showcases the current weather of 5 different cities. By clicking on each city, users can access a detailed view displaying the 5-day forecast for that particular location.
Currently, I have defined a weatherItem class as follows:
export class WeatherItem {
city: string;
description: string;
temperature: number;
}
*I have implemented this method in my weatherService to retrieve the current weather information for the 5 cities:
fetchCurrent(){
return Observable.forkJoin(
this.http.get('http://api.openweathermap.org/data/2.5/weather?q=Chicago&units=imperial&appid=f630449a4407b742703bf37d8e8c9057').map(
(response) => response.json()),
this.http.get('http://api.openweathermap.org/data/2.5/weather?q=Dallas&units=imperial&appid=f630449a4407b742703bf37d8e8c9057').map(
(response) => response.json()),
this.http.get('http://api.openweathermap.org/data/2.5/weather?q=Milwaukee&units=imperial&appid=f630449a4407b742703bf37d8e8c9057').map(
(response) => response.json()),
this.http.get('http://api.openweathermap.org/data/2.5/weather?q=Seattle&units=imperial&appid=f630449a4407b742703bf37d8e8c9057').map(
(response) => response.json()),
this.http.get('http://api.openweathermap.org/data/2.5/weather?q=Washington&units=imperial&appid=f630449a4407b742703bf37d8e8c9057').map(
(response) => response.json())
);
}
This is the function I call in my WeatherComponent which utilizes the fetchCurrent() method from the weatherService:
getWeather(): void {
this.weatherService.fetchCurrent()
.subscribe(data => this.weatherItems = data);
}
The current weather data from openweathermap.org is successfully fetched, but the way it's displayed in my WeatherComponent is like this:
<ul class="weatherItems">
<li *ngFor="let weatherItem of weatherItems" class="box" (click)="gotoDetail(weatherItem)">
<div class="col-1">
<h3>{{weatherItem.name}}</h3>
<p class="info">{{weatherItem.weather[0].description}}</p>
</div>
<div class="col-2">
<span class="temperature">{{weatherItem.main.temp}}° F</span>
</div>
</li>
</ul>
I'm struggling with mapping the JSON data to my view correctly. For instance, I initially referred to the city using {{weatherItem.city}} when using mock data. However, now with the JSON data, I can only display it correctly by using {{weatherItem.name}} instead. Is there any way in Angular 2 to bind the "name" data from JSON to the weatherItem.city property?