如何通过angularjs $resource访问json中的嵌套对象

前端之家收集整理的这篇文章主要介绍了如何通过angularjs $resource访问json中的嵌套对象前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有提供REST服务的.NET WCF服务.一切都适合我,直到我尝试发送嵌套对象的对象.然后我在 angularjs中得不到任何东西.如何使用/访问嵌套对象进行数据交换?

.NET服务部分:

  1. [OperationContract] // route prefix 'api'
  2. [WebGet(UriTemplate = "users/{id}/privileges",ResponseFormat = WebMessageFormat.Json)]
  3. public PrivilegeSet GetPrivileges(string id)
  4. {
  5. var response = new PrivilegeSet();
  6.  
  7. List<Role> roles = new List<Role>();
  8. roles.Add(new Role() { RoleId = 1,Name = "Role 1",Active = true });
  9. roles.Add(new Role() { RoleId = 2,Name = "Role 2",Active = true });
  10. roles.Add(new Role() { RoleId = 3,Name = "Role 3",Active = false });
  11. response.Roles = roles;
  12.  
  13. List<SubRole> subRoles = new List<SubRole>();
  14. subRoles.Add(new SubRole() { SubRoleId = 1,Name = "SubRole 1",RoleId = 1,Active = true });
  15. subRoles.Add(new SubRole() { SubRoleId = 2,Name = "SubRole 2",Active = true });
  16. subRoles.Add(new SubRole() { SubRoleId = 3,Name = "SubRole 3",Active = false });
  17. response.SubRoles = subRoles;
  18.  
  19. return response;
  20. }

JSON结构:

  1. {
  2. "Roles": [
  3. {
  4. "Active": true,"Name": "Role 1","RoleId": 1
  5. },{
  6. "Active": true,"Name": "Role 2","RoleId": 2
  7. },{
  8. "Active": false,"Name": "Role 3","RoleId": 3
  9. }
  10. ],"SubRoles": [
  11. {
  12. "Active": true,"Name": "SubRole 1","RoleId": 1,"SubRoleId": 1
  13. },"Name": "SubRole 2","SubRoleId": 2
  14. },"Name": "SubRole 3","SubRoleId": 3
  15. }
  16. ]
  17. }

Angularjs服务:

  1. angular.module('privilegeService',['ngResource']).
  2. factory('Privilege',function ($resource) {
  3. return $resource('api/users/:userId/privileges',{userId: '@id'});
  4. });

Angularjs获取部分:

  1. function PrivilegesCtrl($scope,Privilege) {
  2. $scope.privileges = Privilege.query({userId:2}); // privileges remains empty using nested objects,with one level object works fine
  3. ...

当JSON具有嵌套对象时,为什么权限保持为空?以及如何在视图中访问嵌套对象?

当您使用 $resource服务时,.query操作假定您的响应是一个数组.使用.query时,可以通过在使用以下第三个参数创建资源时指定响应来指定响应不是数组:
  1. angular.module('privilegeService',{userId: '@id'},{'query': {method:'GET',isArray:false}});
  2. });

查看this plnkr的示例.如果您取出{‘query’:{method:’GET’,isArray:false}},您的响应将是一个空数组.

注1:您的控制台可能显示错误TypeError:Object#< Resource>没有方法’push’,当使用.query时,通常意味着你的REST调用需要一个数组.

注2:资源操作默认值在$resource文档中描述如下:

  1. { 'get': {method:'GET'},'save': {method:'POST'},'query': {method:'GET',isArray:true},'remove': {method:'DELETE'},'delete': {method:'DELETE'} };

猜你在找的Angularjs相关文章