Как получить данные из вложенных объектов json?

Question

Я новичок, изучая угловые. Я пытаюсь получить доступ к внешним api, чтобы получить данные от них.

Ссылка ниже изображения данные JSON, что я получаю после запроса HTTP из этого API:

В JS файла я сохранил данные как $scope.jsondata = data;

Я хочу, чтобы создать таблицу который будет выглядеть следующим образом:

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

, потому что, когда я попытался получить доступ к переменной, как jsondata.stats.histogram ничего не появляется. Если я дам jsondata.stats и печатать их я получаю следующий вывод

1 [{ "дата":. "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, "ср": 347.39}, { "возрастов": "> = 66", "num_payments": 70881, "ср": 400.2}, {"age": "Unknown", "num_payments": 4133, "avg": 658.82}]}, {"date": "201312", "histogram": [{"age": "< = 18 », "num_payments": 875, "средний": 678.74}, { "века": "19-25", "num_payments": 56716, "средний": 243.19}, { "века": "26-35", "num_payments": 200432, "средний": 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 }]}, {"date": "201401", "histogram": [{"age": "< = 18", "num_payments": 863, "avg": 829.89}, {"age": "19- 25" , "num_payments": 64139, "средний": 215.28}, { "века": "26-35", "num_payments": 211934, "средний": 309.96}, { "века": "36-45" "num_payments": 236751, "средний": 377.17}, { "века": "46-55", "num_payments": 232784, "средний": 409.92}, { "века": "56-65",» num_payments ": 170349," средний ": 331.59}, {" века ":"> = 66" , "num_payments": 77767, "средн": 386.73}, { "века": "Неизвестные", "num_payments": 4084 , "avg": 674.42}]}, {"date": "201402", "histogram": [{"age": "< = 18", "num_payments": 947, "avg": 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}, { "стареет": "56-65", "num_payments": 142261, "ср": 337.21}, { "возрастов": "> = 66", "num_payments": 65938, "средн": 397.11}, {» возраст ":" Неизвестно "," num_payments ": 3685," avg ": 629.59}]}, {" date ":" 201403 "," histogram ": [{" age ":" < = 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,» ср ": 404,77}, {" стареет ":" 56-65" , "num_payments": 149269, "ср": 332.54}, { "возрастов": "> = 66", "num_payments": 67746, "ср" : 403.84}, {"age": "Unknown", "num_payments": 3786, "avg": 644.84}]}, {"date": "201404", "histogram": [{"age": "< = 18" , "num_payments": 942, "ср": 979.4}, { "возрасты": "19-25", "num_payments": 58174, "ср": 230.42}, { "возрасты": "26-35" "num_payments": 194149, "средний": 306.66}, { "века": "36-45", "num_payments": 223234, "средний": 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>