如何解析json文件中的对象列表并显示它？

问题描述

我正在尝试使用import方法来解析json文件，这就是我的代码。

import { Component } from '@angular/core';
import * as data from './cities.json';


@Component({
selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})


export class AppComponent {
  title = 'weather-app';

  cities: any = (data as any).default;

constructor(){}
 ngOnInit(){
console.log(data);
 }
}

这就是我要显示的方式，

<ul *ngFor="let c of cities"> 
<li>{{c.CityName}}</li>    
</ul>

我的控制台日志显示所有内容，但未显示在有角度的应用程序列表中，这里我在做什么错？我将在下面发布要解析的json文件。在此先感谢：）

 {"List":
 [{"CityCode":"1248991","CityName":"Colombo","Temp":"33.0","Status":"Clouds"},{"CityCode":"1850147","CityName":"Tokyo","Temp":"8.6","Status":"Clear"},{"CityCode":"2644210","CityName":"Liverpool","Temp":"16.5","Status":"Rain"},{"CityCode":"2988507","CityName":"Paris","Temp":"22.4",{"CityCode":"2147714","CityName":"Sydney","Temp":"27.3",{"CityCode":"4930956","CityName":"Boston","Temp":"4.2","Status":"Mist"},{"CityCode":"1796236","CityName":"Shanghai","Temp":"10.1",{"CityCode":"3143244","CityName":"Oslo","Temp":"-3.9","Status":"Clear"}]}

解决方法

这是因为您的根对象不是数组类型，而您的对象是

{ 
  List: city[]
}

您可以访问属性List

<ul *ngFor="let c of cities.List"> 
<li>{{c.CityName}}</li>    
</ul>

注意：您的代码需要重构，因为它不会显示为干净的代码。我的答案只是向您显示错误在哪里