如何使用 Angular 7 在 html 中显示 JSON 数据？答案

【问题标题】：How to Display JSON Data in html using Angular 7?如何使用 Angular 7 在 html 中显示 JSON 数据？
【发布时间】：2019-08-28 22:16:12
【问题描述】：

我得到低于来自 OpenWeatherMap API 的 JSON 响应。我想在 HTML 表格中显示 CityName、CityCode、Temperature 和 Description。

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>

天气.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;
    })
  }

}

这是我在控制台中遇到的错误

错误类型错误：无法读取未定义的属性“列表” 在 Object.eval [as updateRenderer] (HomeComponent.html:30)

【问题讨论】：

使用 elvis 运算符尝试天气？.list.name
获取数据需要时间，所以有一段时间天气未定义，underined.list 会抛出错误
都试过了还是没有输出
你能粘贴json响应吗？
不像在 chrome 中打开开发者工具然后选择网络选项卡然后刷新你的页面。单击网络选项卡中的天气请求，然后单击“响应”选项卡并在此处粘贴响应

标签： json angular typescript api angular7

【解决方案1】：

从服务器加载数据需要时间，所以有一会儿，你的天气是未定义的，undefined.list 会抛出一个错误。所以你有两个选择：在你的 html 中使用 elvis 运算符weather?.list.name 它可以让你安全地访问天气或使用<table *ngIf="weather" class="table table-hover"> 检查您是否获取了天气信息。另外，请确保有 .name 属性，并且您不必使用 *ngFor 进行迭代

【讨论】：

【解决方案2】：

我记得，openweathermap api 将列表和结果作为数组返回，而不是对象。您需要从响应中访问列表属性。

这是一个示例响应，

{"coord":{"lon":-0.13,"lat":51.51},"weather":[{"id":300,"main":"毛毛雨","description":"light 强度毛毛雨","icon":"09d"}],"base":"stations","main":{"temp":280.32,"pressure":1012,"湿度":81,"temp_min":279.15, "temp_max":281.15},"visibility":10000,"wind":{"speed":4.1,"deg":80},"clouds":{"all":90},"dt":1485789600," sys":{"type":1,"id":5091,"message":0.0103,"country":"GB","sunrise":1485762037,"sunset":1485794875},"id":2643743,"名称":"伦敦","鳕鱼":200}

如果列表中有空结果，也可以使用安全导航运算符?来处理。

STACKBLITZ DEMO

【讨论】：

演示作品..！谢谢

【解决方案3】：

当我遇到这个问题时，我会： {{ 天气 | json }} 在 html 中查看树。

【讨论】：