Angular2获取嵌套的JSON数据

-1

我有一个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的totalCount &
"subjectName": "Chemistry"。
我的服务就是这样的 -

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里面我想呈现这样的价值。 {{data？.Semester.totalCount}}
我该怎么做？
在此先感谢

来源

2017-08-16 ADITYA SHUKLA

请发表您的JSON在你的问题，而不是作为一个外部链接。 –

我甚至在您的JSON中看不到任何东西，甚至远程匹配'assetClassQueueDetails？.Credit [0] .totalTradeCount'。请说明问题，您尝试了什么，以及您在哪里遇到问题。 – Alex

@AndreiMatracaru JSON在问题中已经存在。 –

您可以通过运行在它的循环，再添加全部totalCount或者如果你的数组长度总是固定为3得到总的Semester，你可以在里面插添加他们。

循环方法：

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>

Plunker demo

来源

2017-08-16 13:28:31 Nehal

谢谢@Nehal。这是工作。 –

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

在服务，提取数组：

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的，它首先迭代数组中的所有对象，然后迭代每个对象中的子阵列subjectDetails 。请注意下面的糟糕命名惯例。更改它适合您的需要：

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

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

来源

2017-08-17 09:08:00 Alex

非常感谢。有效 –

Angular2获取嵌套的JSON数据

回答

相关问题