Angular2 获取嵌套的 JSON 数据

Question

我是Angular2的新手，需要帮助。

我有一个 JSON 文件 - https://api.myjson.com/bins/ctyoh

{
"Semester": [
{
"queueName": "Science",
"totalCount": 300,
"unassignedCount": 10,
"subjectDetails": [
{
"subjectName": "Chemistry",
"sectionOne": 100,
"sectionTwo": 50,
"onTrackTradeCount": 150
},
{
"subjectName": "Biology",
"sectionOne": 100,
"sectionTwo": 50,
"sectionThree": 150
}
]
},
{
"queueName": "Arts",
"totalCount": 300,
"unassignedCount": 10,
"subjectDetails": [
{
"subjectName": "Indexing",
"sectionOne": 100,
"sectionTwo": 50,
"sectionThree": 150
}
]
},
{
"queueName": "Humanity",
"totalCount": 300,
"unassignedCount": 10,
"subjectDetails": [
{
"subjectName": "Indexing",
"sectionOne": 100,
"sectionTwo": 50,
"sectionThree": 150
}
]
}
]
}

如何从
变量访问Semester和"subjectName": "Chemistry"totalCount。
我的服务是这样的——

private url = 'https://api.myjson.com/bins/ctyoh'  
constructor(private http: Http) { }  
getData(): Observable<any> {  
return this.http.get(this.url)  
.map((res: Response) => res.json(),

我订阅了组件构造函数中的可观察量，例如

constructor(private _chartData: ChartData) {}  
ngOnInit() {  
.subscribe(data => {  
this.data = data;  
console.log(data.Semester);  
});

在 HTML 中，我想像这样呈现值。 {{数据？.学期总计数}}我
该怎么做？
提前致谢

Answer 1

您需要一个用于显示totalCount的ngFor和一个用于显示subjectName的嵌套ngFor：

在服务中，提取数组：

getData(): Observable<any> {  
return this.http.get(this.url)  
.map((res: Response) => res.json().Semester) // extract the array
}

在组件订阅中：

ngOnInit() {
this.myService.getData()
.subscribe(data => {
this.data = data;
})
}

然后你有ngFor's，它首先迭代数组中的所有对象，然后迭代每个对象中的子数组subjectDetails。请注意下面的命名约定不佳。根据您的需求进行更改：

<div *ngFor="let x of data">
Total: {{x.totalCount}}
<div *ngFor="let y of x.subjectDetails">
Subject: {{y.subjectName}}
</div>
</div>

演示：http://plnkr.co/edit/By1e12dOrat6D1myaP2E?p=preview

Answer 2

您可以通过在其上运行循环并添加所有totalCount来获得Semester的总数，或者如果您的数组长度始终固定为 3，您也可以将它们添加到插值中。

循环方法：

for(let i=0; i< data.Semester.length; i++){
this.grandTotal +=  data.Semester[i].totalCount;
} 
<p>Total: {{ grandTotal }}</p>

插值：

<p>Total: {{ data?.Semester[0]?.totalCount + data?.Semester[1]?.totalCount + data?.Semester[2]?.totalCount }}</p>

访问Chemistry：

<p>{{ data?.Semester[0]?.subjectDetails[0]?.subjectName }}</p>

普伦克演示