Я получаю JSON Response от OpenWeatherMap API.Я хочу отобразить CityName, CityCode, температуру и описание в таблице HTML.
Ответ JSON:
cnt : 1
list
0
coord
lon : 79.85
lat : 6.93
sys
type : 1
id : 9098
message : 0.0032
country : "LK"
sunrise : 1554597365
sunset : 1554641358
weather
0
main
temp : 30
pressure : 1010
humidity : 70
temp_min : 30
temp_max : 30
visibility : 10000
wind
speed : 2.6
deg : 200
clouds
all : 20
dt : 1554655382
id : 1248991
name : "Colombo"
Файл HTML:
<table class="table table-hover">
<thead>
<th>City</th>
<th>City Code</th>
<th>Temperature</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td>{{weather.list.name}}</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Weather.Service.ts:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class WeatherService {
apiKey = '9402da6bd74c395f71604c624cc2b231';
url;
constructor(private http:HttpClient) {
this.url='http://api.openweathermap.org/data/2.5/group?id='; //API GET URL
}
getWeather(cityCode){
return this.http.get(this.url+cityCode+'&units=metric&appid='+this.apiKey);
}
}
Home.component.ts:
import { Component, OnInit } from '@angular/core';
import { WeatherService } from "../shared/weather.service";
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
location={
code: '1248991'
};
public weather: any;
constructor(private weatherService:WeatherService) {
}
ngOnInit() {
this.weatherService.getWeather(this.location.code).subscribe((Response)=>{
console.log(Response);
this.weather = Response;
})
}
}
Это ошибка, которую я получаю в консоли
ОШИБКА TypeError: Cannotпрочитать свойство 'список' из неопределенного в Object.eval [как updateRenderer] (HomeComponent.html: 30)