3

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'm trying to output each "ownerID", then each "lat" and "long" associated with the ownerID. I'm 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>

It outputs the ownerID's but not the tracks?? Has anyone any idea why please? Thanks...

1
  • You need nested loops: the trackInfo variable only exists inside the first ng-repeat.
    – JB Nizet
    Apr 25, 2015 at 11:20

3 Answers 3

6

Well that's because your second repeat doesn't know what trackInfo is. It just doesn't exist at the moment of ng-repeat. You have to nest it. But then you, still have to specify pointer to 'tracks', or else you will iterate over wrong dataset. 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>
1
  • 1
    Jsfiddle -- with lightly different table structure.
    – Hugolpz
    Apr 26, 2015 at 12:39
2

Each ng-repeat has its own scope. Your second repeat is outside of the scope of the first, so it won't behave as you want it to.

Anger provides ng-repeat-start and ng-repeat-end which allow you to put more than one element within your repeat. That's one way you can accomplish 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>

(though the above is a bit sloppy because it has an empty tr to close the repeat).

Here is a fiddle to show it working with your code: http://jsfiddle.net/0x6prusv/

1

In your iterate You have not any key which is unique in all item. so angular can not iterate over your collection. in this situation You should define how to iterate. this is a simplest way :

 <tr ng-repeat="trackInfo in dataModel track by $index">

$index filled by angular.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.