How to get data of json nested objects?

Question

I am a newbie learning angularjs. I am trying to access external api to get data from them.

The below image link is the json data that I get after http request from that api:

In js file I have saved data as $scope.jsondata = data;

I want to create an table which will look like this:

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

because when I tried to access the variable like jsondata.stats.histogram nothing comes up. If I give jsondata.stats and print them I get following output

1.[{"date":"201311","histogram":[{"ages":"<=18","num_payments":825,"avg":525.24},{"ages":"19-25","num_payments":49628,"avg":243.86},{"ages":"26-35","num_payments":181206,"avg":335.73},{"ages":"36-45","num_payments":208087,"avg":409.1},{"ages":"46-55","num_payments":209074,"avg":387.01},{"ages":"56-65","num_payments":156109,"avg":347.39},{"ages":">=66","num_payments":70881,"avg":400.2},{"ages":"Unknown","num_payments":4133,"avg":658.82}]},{"date":"201312","histogram":[{"ages":"<=18","num_payments":875,"avg":678.74},{"ages":"19-25","num_payments":56716,"avg":243.19},{"ages":"26-35","num_payments":200432,"avg":330.1},{"ages":"36-45","num_payments":227268,"avg":399.74},{"ages":"46-55","num_payments":227818,"avg":385.11},{"ages":"56-65","num_payments":166577,"avg":337.03},{"ages":">=66","num_payments":75534,"avg":373.36},{"ages":"Unknown","num_payments":4075,"avg":609.47}]},{"date":"201401","histogram":[{"ages":"<=18","num_payments":863,"avg":829.89},{"ages":"19-25","num_payments":64139,"avg":215.28},{"ages":"26-35","num_payments":211934,"avg":309.96},{"ages":"36-45","num_payments":236751,"avg":377.17},{"ages":"46-55","num_payments":232784,"avg":409.92},{"ages":"56-65","num_payments":170349,"avg":331.59},{"ages":">=66","num_payments":77767,"avg":386.73},{"ages":"Unknown","num_payments":4084,"avg":674.42}]},{"date":"201402","histogram":[{"ages":"<=18","num_payments":947,"avg":929.1},{"ages":"19-25","num_payments":50168,"avg":227.48},{"ages":"26-35","num_payments":170661,"avg":326.44},{"ages":"36-45","num_payments":192451,"avg":387.63},{"ages":"46-55","num_payments":190980,"avg":396.35},{"ages":"56-65","num_payments":142261,"avg":337.21},{"ages":">=66","num_payments":65938,"avg":397.11},{"ages":"Unknown","num_payments":3685,"avg":629.59}]},{"date":"201403","histogram":[{"ages":"<=18","num_payments":921,"avg":736.56},{"ages":"19-25","num_payments":56525,"avg":216.75},{"ages":"26-35","num_payments":186010,"avg":311.57},{"ages":"36-45","num_payments":204997,"avg":406.57},{"ages":"46-55","num_payments":200943,"avg":404.77},{"ages":"56-65","num_payments":149269,"avg":332.54},{"ages":">=66","num_payments":67746,"avg":403.84},{"ages":"Unknown","num_payments":3786,"avg":644.84}]},{"date":"201404","histogram":[{"ages":"<=18","num_payments":942,"avg":979.4},{"ages":"19-25","num_payments":58174,"avg":230.42},{"ages":"26-35","num_payments":194149,"avg":306.66},{"ages":"36-45","num_payments":223234,"avg":381.75},{"ages":"46-55","num_payments":221479,"avg":389.42},{"ages":"56-65","num_payments":165403,"avg":337.9},{"ages":">=66","num_payments":74967,"avg":392.94},{"ages":"Unknown","num_payments":3848,"avg":548.89}]}] 2.

Answer 1

First you have to understand your data structure. It is array of object with date property. For those every dates there are histogram array. So there will be array of array that need to iterate.

I assume you will create one table for every stats date and in every row of that table you want to list histogram data. So we need to iterate date in table level. Later in row level we will iterate histogram array. The structure of the html will be like this below. You can see it live in this link. The example show the data initiated in local. But it will work same with data fetched from server. Furthermore read this documentation to get understand more with angular data iteration.

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