Html 从非迭代JSON对象获取值
我有一个天气预报JSON对象无法从中获取特定值。我正在尝试从下面的JSON获取天气描述 JSONHtml 从非迭代JSON对象获取值,html,json,angular,typescript,output,Html,Json,Angular,Typescript,Output,我有一个天气预报JSON对象无法从中获取特定值。我正在尝试从下面的JSON获取天气描述 JSON { "request": { "type": "City", "query": "New York", "language": "en", "unit": "m
{
"request": {
"type": "City",
"query": "New York",
"language": "en",
"unit": "m"
},
"location": {
"name": "New York",
"country": "United States of America",
"region": "New York",
"lat": "40.714",
"lon": "-74.006",
"timezone_id": "America/New_York",
"localtime": "2020-11-23 10:30",
"localtime_epoch": 1606127400,
"utc_offset": "-5.0"
},
"current": {
"observation_time": "03:30 PM",
"temperature": 11,
"weather_code": 122,
"weather_icons": [
"https://assets.weatherstack.com/images/wsymbols01_png_64/wsymbol_0004_black_low_cloud.png"
],
"weather_descriptions": [
"Overcast"
],
"wind_speed": 19,
"wind_degree": 340,
"wind_dir": "NNW",
"pressure": 1014,
"precip": 12,
"humidity": 77,
"cloudcover": 100,
"feelslike": 8,
"uv_index": 3,
"visibility": 16,
"is_day": "yes"
}
}
HTML
<div>{{this.weatherData | keyvalue }}</div>
预期输出:
阴沉的
实际输出:
[对象对象],[对象对象],[对象对象]KeyValue管道标志在您的情况下不起作用。因此,我们必须找到所需的密钥。因为天气描述是一个数组,所以如果有多个元素,就使用循环。下面是您所需值的Html代码
<div *ngIf="this.weatherData && this.weatherData.current && this.weatherData.current.weather_descriptions">
<span *ngFor= "let desc of this.weatherData.current.weather_descriptions">{{desc}}</span>
</div>
{{desc}}
现在获得了预期的输出。但是仍然在控制台窗口中获取以下错误core.js:4442错误类型错误:无法读取DashboardComponent_模板(dashboard.component.html:9)上未定义的属性“current”。您可以在div上添加一些空检查验证。编辑了我的答案。
<div *ngIf="this.weatherData && this.weatherData.current && this.weatherData.current.weather_descriptions">
<span *ngFor= "let desc of this.weatherData.current.weather_descriptions">{{desc}}</span>
</div>