ng-repeat for an json object which has arrays - angularjs

Question

I have a JSON object which is data for a chart. This has 2 properties labels and data. Both are arrays. Along with the chart I wish to display a table as well. I am not able to figure out how to use the ng-repeat directive here.
JSON Object
$scope.chartdata={
labels: ["XYZ", "ABC","DEF"],
data: [4286, 38870, 3955]
};
HTML
<table class="table table-striped">
<thead>
<tr>
<th>Labels</th>
<th>Data </th>
</tr>
</thead>
<tr ng-repeat="cht in chartdata">
<td>{{cht.labels}}</td>
<td>{{cht.data}}</td>
</tr>
</table>
Do I need to change the JSON structure? I do not wish to cos it works for my chart directive and I want to resues the same JSON for displaying the table as well.

Answer 1

You need to use $index, because these are 2 separate properties within the chartdata object
<table class="table table-striped">
<thead>
<tr>
<th>Labels</th>
<th>Data </th>
</tr>
</thead>
<tr ng-repeat="label in chartdata.labels">
<td>{{label}}</td>
<td>{{chartdata.data[$index]}}</td>
</tr>
</table>
That said the object structure you have can probably be revised to be more like the model (unless you are using the object structure for something else that expects it in that format)
$scope.chartdata = [
{
label: "XYZ",
data: 4286
},
...
];
In the latter case too, you could use the above structure and set up a method that transforms the object into the dual array structure that you need for the something else.