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數據

回答

相關問題