json 중첩 된 객체의 데이터를 가져 오는 방법은 무엇입니까?

Question

나는 angularjs를 배우는 초보자입니다. 외부 API에 액세스하여 데이터를 가져 오려고합니다. 내가 테이블을 만들 $scope.jsondata = data;

으로 내가 데이터를 저장 한 JS 파일에서

:

아래 이미지 링크는 내가 그 API의 HTTP 요청 후 얻을 JSON 데이터입니다 다음과 같이 표시됩니다.

<div class="container" ng-controller="controller"> 
<table ng-repeat="data in jsondata"> 
<tr> 
    <th>Date</th> 
    <th>age</th> 
    <th>avg<th> 
    <th>num_payments</th> 
</tr> 
<tr> 
    <td> ?</td> 
    <td> ?</td> 
    <td> ?</td> // dont know what to give 
</tr> 
<table> 

과 같은 변수에 액세스하려고했기 때문에 0 아무것도 나오지 않습니다. 내가 jsondata.stats를주고 내가 출력

한 다음 얻을를 인쇄 할 경우 [{ "날짜". "201311", "히스토그램": [{ "나이": "< = 18", "num_payments을" 825, "평균": 525.24}, { "연령대 :"19-25 ","num_payments ": 49628,"평균 ": 243.86}, {"연령대 : "26-35", "num_payments": 181206, "평균": 335.73}, { "연령대 :"36-45 ","num_payments ": 208087,"평균 ": 409.1}, {"연령대 : "46-55", "num_payments": 209074, "평균 ": 387.01}, {"연령대 : "56-65", "num_payments": 156109, "avg": 347.39}, { "연령대 :"> = 66 ","num_payments ": 70881,"avg " 40020}, { "연령대 :"알 수 없음 ","num_payments ": 4133,"평균 ": 658.82}}, {"날짜 ":"201312 ","히스토그램 ": [{"연령 ":"< = 18 ","num_payments ": 875,"평균 ": 678.74}, {"연령대 : "19-25", "num_payments": 56716, "평균": 243.19}, "연령대": "26-35" "num_payments": 200432, "avg": 330.1}, { "연령": "36-45", "num_payments": 227268 , "평균": 399.74}, { "연령대 :"46-55 ","num_payments ": 227818,"평균 ": 385.11}, {"연령대 : "56-65", "num_payments": 166577, 평균 : 337.03}, { "연령대 :"> = 66 ","num_payments ": 75534,"평균 ": 373.36}, {"연령대 : "알 수 없음", "num_payments": 4075, "평균": 609.47 {{연령} : {}}}, {날짜} : "201401", "히스토그램": {{연령} : "< = 18", "num_payments": 863, "평균": 829.89} 259 ","num_payments ": 64139,"평균 ": 215.28}, {"연령 ":"26-35 ","num_payments ": 211934,"평균 ": 309.96} , "num_payments": 236751, "평균": 377.17}, { "연령대 :"46-55 ","num_payments ": 232784,"평균 ": 409.92}, {"연령대 : "56-65" {num_payments ": 170349,"avg ": 331.59}, {"연령대 : "> = 66", "num_payments": 77767, "avg": 386.73}, { "연령": "알 수 없음", "num_payments": 4084 , "avg": 674.42}]}, { "날짜": "201402", "히스토그램": [{ "연령": "< = 18", "num_payments": 947, "평균": 929.1} 연령대 : "19-25", "num_payments": 50168, "평균": 227.48}, { "연령대 :"26-35 ","num_payments ": 170661,"평균 ": 326.44} : "36-45", "num_payments": 192451, "평균": 387.63}, { "연령": "46-55", "num_payments": 190980, "평균": 396.35} { "연령대 :"66 ","num_payments ": 65938,"평균 ": 397.11}, {"연령대 ":"56-65 ","num_payments ": 142261,"평균 ": 337.21} 36585, "평균 : 629.59}]}, {"날짜 ":"201403 ","히스토그램 ": [{연령": "< = 18", "num_payments" : 921, "평균": 736.56}, { "연령대 :"19-25 ","num_payments ": 56525,"평균 ": 216.75}, {"연령대 : "26-35", "num_payments": 186010 , "평균": 311.57}, { "연령대 :"36-45 ","num_payments ": 204997,"평균 ": 406.57}, {"연령대 : "46-55", "num_payments": 200943, {num_payments} : 149269, "평균": 332.54}, { "연령대 :"> = 66 ","num_payments ": 67746,"avg ": 404.77} : "날짜": "201404", "히스토그램": [{ "연령": "< = 403.84}, {"연령대 : "알 수 없음", "num_payments": 3786, "avg": 644.84} 18 ","num_payments ": 942,"평균 ": 979.4}, {"연령대 : "19-25", "num_payments": 58174, "평균": 230.42}, "연령대": "26-35" , "num_payments": 194149, "avg": 306.66}, { "연령대 :"36-45 ","num_payments ": 223234,"avg ": 381.75}, {"연령대 : "46-55" {num_payments} : 221479, "평균": 389.42}, { "연령대 :"56-65 ","num_payments ": 165403,"평균 ": 337.9}, {"연령대 : "> = 66" num_payments "74967,"평균 ": 392.94}, {"나이 ":"알 수 없음 ","num_payments "3848,"평균 ": 548.89}]}] 2.

Answer 1

먼저 당신이 당신을 이해해야 데이터 구조. date 속성을 가진 객체의 배열입니다. 그 날짜마다 히스토그램 배열이 있습니다. 따라서 배열을 반복해야합니다.

통계 데이터마다 하나씩 테이블을 만들고 그 테이블의 모든 행에 히스토그램 데이터를 나열한다고 가정합니다. 따라서 테이블 수준에서 날짜를 반복해야합니다.나중에 행 레벨에서 히스토그램 배열을 반복 할 것입니다. html의 구조는 아래와 같습니다. 당신은 this link에 살고있는 것을 볼 수 있습니다. 이 예는 로컬에서 시작된 데이터를 보여줍니다. 그러나 서버에서 가져온 데이터와 동일하게 작동합니다. 또한 각도 데이터 반복에 대해 더 자세히 이해하려면 documentation을 읽어보십시오.

의

<div class="container" ng-controller="MyCtrl"> 
    <table ng-repeat="data in jsondata" border='1'> <!-- table level iteration --> 
    <tr> 
    <th>Date</th> 
    <th>age</th> 
    <th>avg</th> 
    <th>num_payments</th> 
    </tr> 
    <tr ng-repeat='histo in data.histogram'> <!-- row level iteration --> 
    <td>{{data.date}}</td> 
    <td>{{histo.ages}}</td> 
    <td>{{histo.avg}}</td> 
    <td>?</td> 
    </tr> 
</table>