AngularJS multidimensional array
I have the following JSON:
{
"records":[
{
"TrackID":"4",
"ownerID":"14",
"name":"Test1",
"minTime":"2015-04-08T16:50:51Z",
"maxTime":"2015-04-08T17:26:39Z",
"tracks":[
{
"lat":"53.3996905",
"long":"-2.92532816666667",
"time":"2015-04-20T06:34:46Z",
"hour":6
},
{
"lat":"53.3997495",
"long":"-2.92545483333333",
"time":"2015-04-20T06:35:01Z",
"hour":6
},
{
"lat":"53.4008018333333",
"long":"-2.9253085",
"time":"2015-04-20T06:35:13Z",
"hour":6
}
]
}
]
}
and I am trying to output every "ownerID" then every "lat" and "long" associated with the owner id. I am using the following:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("path to json")
.success(function (response) {
$scope.dataModel = response.records;
});
});
and then (HTML)
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="trackInfo in dataModel">
<td>
{{ trackInfo.ownerID}}
</td>
</tr>
<tr ng-repeat="trackDetails in trackInfo">
<td>
{{ trackDetails.lat }}
</td>
</tr>
</table>
</div>
Does it output the owner ID but not the tracks? Anyone have an idea why? Thank...
source to share
Ok, because your second replay doesn't know what trackInfo is. It just doesn't exist at the time of ng-repeat. You have to put it in the socket. But then you still need to point to the "tracks", otherwise you will be iterating over the wrong data set. This should work:
<table>
<tr ng-repeat="trackInfo in dataModel">
<td>
{{ trackInfo.ownerID}}
</td>
<td ng-repeat="trackDetails in trackInfo.tracks">
{{ trackDetails.lat }}
</td>
</tr>
</table>
source to share
Each ng-repeat has its own scope. The second rep is outside the scope of the first, so it won't behave the way you want it to.
Anger provides ng-repeat-start and ng-repeat-end, which allow you to put multiple elements in your repeat. This is one way to achieve what you want:
<tr ng-repeat-start="trackInfo in dataModel.records">
<td>{{ trackInfo.ownerID}}</td>
</tr>
<tr ng-repeat="trackDetails in trackInfo.tracks">
<td>{{ trackDetails.lat }}</td>
</tr>
<tr ng-repeat-end></tr>
(although the above is a bit messy because it has an empty tr to close the repeat).
Here is a fiddle showing that it works with your code: http://jsfiddle.net/0x6prusv/
source to share
In your iterator, you don't have a single key that is unique across all elements. therefore angular cannot iterate over your collection. in this situation, you must define how to iterate. this is the easiest way:
<tr ng-repeat="trackInfo in dataModel track by $index">
$ index filled with angular.
source to share