ng-repeat key not displaying using JSON data

Question

My service grabs JSON data and returns the data to the controller successfully, however I am having a problem using ng-repeat to iterate over the key names.

I want to display the key names on the page as a list as they are category names.

Currently ng-repeat iterates the correct number of times but it does not display the key name.

Controller:

app.controller('getNav', function(getJSONData, $scope) {
    var path = 'json/navigation';
    getJSONData.async(path).then(function(d) {
        $scope.data = d;    
    });
});

Service:

app.factory('getJSONData', function($http) {
  var getJSONData = {
    async: function(path) {
      var promise = $http.get(path).then(function (response) {
        return response.data;
      });
      return promise;
    }
  };
  return getJSONData;
});

JSON Data:

{ 
     "data": {
         "category_a": ["a", "b", "c", "d"], 
         "category_b": ["e", "f", "g"], 
         "category_c": ["h", "i", "j"]
     }, 
     "response": "Navigation"
}

View:

<ul ng-controller="getNav">
   <li data-ng-repeat="(key, value) in data.data">Category name is: {{key}}</li>
</ul>

You ng-repeat is fine: [plunker](http://plnkr.co/edit/CSvrUOmkcuS8qHUIbv1C). — Stewie, Mar 15 '13 at 12:29
This confuses me even more because I dont know why the above example is not working. The controller successfully retrieves the data and the scope seems to be iterating but it never displays the key names. — Malcr001, Mar 15 '13 at 13:23
Use `console.log()` in your getJSONData callback function to check/dump the JSON data coming back from your server to ensure it is formatted correctly. — Mark Rajcok, Mar 15 '13 at 15:25
@mark Data is logged as an object. Would this be the reason? — Malcr001, Mar 15 '13 at 15:33
Not necessarily. Use Stewie's plunker and console.log($scope.data) in the controller. Compare that output (which in Chrome shows "Object" but I can expand it to see all the data) to what you are getting back from the server. If they look the same, then that is not your issue. — Mark Rajcok, Mar 15 '13 at 15:37
This has got to be a googleappengine problem because I moved all the files out of it and moved them onto a local apache server and it works. Very strange. — Malcr001, Mar 15 '13 at 17:44

score 5 · Accepted Answer · edited May 23 '17 at 11:45

OK so hopefully I can help someone out in the future who has this same problem. I wasted a day pulling my hair out over this darn thing. After isolating the files from my google apps engine I discovered the files work on a simple MAMP localhost but not the google apps engine.

After some searching around I found out it was because of conflicting template tags that angular and DJango uses {{}}. So simply set angular to use something different and the problem will be sorted, see here:

AngularJS with Django - Conflicting template tags

ng-repeat key not displaying using JSON data

1 Answers1