CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Or Weinberger
Or Weinberger

Reputation: 7472

AngularJS - item data in ng-repeat is not showing, but ng-repeat is repeating blank divs

This is my controller:

'use strict';

/* Controllers */

function roles($scope, $http) {
    delete $http.defaults.headers.common['X-Requested-With']
  $http.get('/engine/ListRoles').success(function(data) {
    $scope.roles = data;
  });

  $scope.orderProp = 'id';
}

This is the JSON response that I get from /engine/ListRoles/

data: "[{"External":false,"Filter":"","ID":25,"Name":"content editor","Permissions":[{"Description":"test","Group":"report","ID":2,"Name":"view"},{"Description":"test","Group":"report","ID":4,"Name":"delete"},{"Description":"test","Group":"report","ID":3,"Name":"edit"},{"Description":"test","Group":"report","ID":5,"Name":"customize"},{"Description":"test","Group":"manage","ID":1,"Name":"access"}]},{"External":false,"Filter":"","ID":26,"Name":"data editor","Permissions":[{"Description":"test","Group":"manage","ID":1,"Name":"access"},{"Description":"test","Group":"manage","ID":6,"Name":"cache"},{"Description":"test","Group":"report","ID":5,"Name":"customize"},{"Description":"test","Group":"report","ID":4,"Name":"delete"},{"Description":"test","Group":"report","ID":3,"Name":"edit"},{"Description":"test","Group":"report","ID":2,"Name":"view"}]},{"External":false,"Filter":"","ID":27,"Name":"guest","Permissions":[]},{"External":false,"Filter":"","ID":2,"Name":"super user","Permissions":[{"Description":"test","Group":"manage","ID":1,"Name":"access"},{"Description":"test","Group":"report","ID":2,"Name":"view"},{"Description":"test","Group":"report","ID":3,"Name":"edit"},{"Description":"test","Group":"report","ID":4,"Name":"delete"},{"Description":"test","Group":"manage","ID":6,"Name":"cache"},{"Description":"test","Group":"report","ID":5,"Name":"customize"}]},{"External":false,"Filter":"","ID":1,"Name":"user","Permissions":[{"Description":"test","Group":"report","ID":2,"Name":"view"},{"Description":"test","Group":"report","ID":5,"Name":"customize"}]}]"
resultcode: "200"
resulttext: ""
timestamp: "/Date(1369497355200+0300)/"

However when I try to use this ng-repeat:

<div id="table" ng-controller="roles">
      <div>
            <div ng-repeat="role in roles.data">
               {{role.Name}}<br />
            </div>
      </div>
</div>

I just get a huge list of blank DIVs.

Upvotes: 0

Views: 1078

Answers (2)

OzBob
OzBob

Reputation: 4520

http://jsfiddle.net/uZWQY/37/ has an example of a angular directive for 2 types of date formatting. One is the date formatter, the other is to cope with $scope elements that are formatted as a Microsoft Json Date: /Date(1369980188993)/

The Date format from 'Epoch' is now fixed in Micorost .Net 4.5 MVC JavascriptSerializer. The pain felt by many including TheHansleMan is now lessened by: How to swap out the serializer to JSON.NET on Henrik's blog http://blogs.msdn.com/b/henrikn/archive/2012/02/18/using-json-net-with-asp-net-web-api.aspx

Angular Solution (with out "cheating" and reformatting the date as a string on the server):

HTML

<input type="text" size="35" ng-model="testTime" jsondate='dd/MM/yyyy'>

Javascript:myApp.directive('jsondate', function (dateFilter) { return { require:'ngModel', link:function (scope, elm, attrs, ctrl) { var dateFormat = 'dd/MM/yyyy'; ctrl.$formatters.unshift(function (modelValue) { var newDate = new Date(parseInt(modelValue.replace("/Date(", "").replace(")/", ""), 10)); ctrl.$setValidity('jsondate', true); return dateFilter(newDate, dateFormat); }); } }; });

NOTE: will only work OUTSIDE a ng-repeat. You have to do the 'Long' Directive format for it to work : http://docs.angularjs.org/guide/directive

Upvotes: 0

jupiter
jupiter

Reputation: 4056

If the response you have given is actually what is returned from your server than this is not valid JSON code. You can look the specification up here: http://www.ietf.org/rfc/rfc4627.txt.

It states that JSON is a serialized object or array. Hence, your data you return must either be an object or an array. Furthermore, properties must be wrapped into double quotes. This differs to JavaScript where property names can also be defined without wrapping them into double quotes. Return the following and it will work:

{
"data": [{"External":false,"Filter":"","ID":25,"Name":"content editor","Permissions":[{"Description":"test","Group":"report","ID":2,"Name":"view"},{"Description":"test","Group":"report","ID":4,"Name":"delete"},{"Description":"test","Group":"report","ID":3,"Name":"edit"},{"Description":"test","Group":"report","ID":5,"Name":"customize"},{"Description":"test","Group":"manage","ID":1,"Name":"access"}]},{"External":false,"Filter":"","ID":26,"Name":"data editor","Permissions":[{"Description":"test","Group":"manage","ID":1,"Name":"access"},{"Description":"test","Group":"manage","ID":6,"Name":"cache"},{"Description":"test","Group":"report","ID":5,"Name":"customize"},{"Description":"test","Group":"report","ID":4,"Name":"delete"},{"Description":"test","Group":"report","ID":3,"Name":"edit"},{"Description":"test","Group":"report","ID":2,"Name":"view"}]},{"External":false,"Filter":"","ID":27,"Name":"guest","Permissions":[]},{"External":false,"Filter":"","ID":2,"Name":"super user","Permissions":[{"Description":"test","Group":"manage","ID":1,"Name":"access"},{"Description":"test","Group":"report","ID":2,"Name":"view"},{"Description":"test","Group":"report","ID":3,"Name":"edit"},{"Description":"test","Group":"report","ID":4,"Name":"delete"},{"Description":"test","Group":"manage","ID":6,"Name":"cache"},{"Description":"test","Group":"report","ID":5,"Name":"customize"}]},{"External":false,"Filter":"","ID":1,"Name":"user","Permissions":[{"Description":"test","Group":"report","ID":2,"Name":"view"},{"Description":"test","Group":"report","ID":5,"Name":"customize"}]}],
"resultcode": "200",
"resulttext": "",
"timestamp": "/Date(1369497355200+0300)/"
}

The reason why you get a bunch of divs is that your ng-repeat directive actually iterates over the characters of a string. You get a string because AngularJS has not converted the response into an object because the JSON was not valid JSON.

To check if you have valid JSON you can parse it with JSON.parse() in your JavaScript console (e. g. Firebug).

Upvotes: 1

Related Questions