2013-02-20 17 views
6

Ho un servizio WCF .NET che fornisce il servizio REST. Tutto funziona per me, fino a quando non cerco di inviare oggetti con oggetti nidificati. Quindi non ottengo nulla in angularjs. Come posso utilizzare/accedere ad oggetti nidificati per lo scambio di dati?

servizio

NET parte:

[OperationContract] // route prefix 'api' 
    [WebGet(UriTemplate = "users/{id}/privileges", ResponseFormat = WebMessageFormat.Json)] 
    public PrivilegeSet GetPrivileges(string id) 
    { 
     var response = new PrivilegeSet(); 

     List<Role> roles = new List<Role>(); 
     roles.Add(new Role() { RoleId = 1, Name = "Role 1", Active = true }); 
     roles.Add(new Role() { RoleId = 2, Name = "Role 2", Active = true }); 
     roles.Add(new Role() { RoleId = 3, Name = "Role 3", Active = false }); 
     response.Roles = roles; 

     List<SubRole> subRoles = new List<SubRole>(); 
     subRoles.Add(new SubRole() { SubRoleId = 1, Name = "SubRole 1", RoleId = 1, Active = true }); 
     subRoles.Add(new SubRole() { SubRoleId = 2, Name = "SubRole 2", RoleId = 1, Active = true }); 
     subRoles.Add(new SubRole() { SubRoleId = 3, Name = "SubRole 3", RoleId = 1, Active = false }); 
     response.SubRoles = subRoles; 

     return response; 
    } 

JSON struttura:

{ 
"Roles": [ 
{ 
    "Active": true, 
    "Name": "Role 1", 
    "RoleId": 1 
}, 
{ 
    "Active": true, 
    "Name": "Role 2", 
    "RoleId": 2 
}, 
{ 
    "Active": false, 
    "Name": "Role 3", 
    "RoleId": 3 
} 
], 
"SubRoles": [ 
{ 
    "Active": true, 
    "Name": "SubRole 1", 
    "RoleId": 1, 
    "SubRoleId": 1 
}, 
{ 
    "Active": true, 
    "Name": "SubRole 2", 
    "RoleId": 1, 
    "SubRoleId": 2 
}, 
{ 
    "Active": false, 
    "Name": "SubRole 3", 
    "RoleId": 1, 
    "SubRoleId": 3 
} 
] 
} 
servizio

Angularjs:

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

Angularjs recupero parte:

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

Perché i privilegi rimangono vuoti quando JSON ha oggetti nidificati? E come accedere agli oggetti nidificati nella vista?

+0

Avete controllato in qualsiasi strumenti di sviluppo come Firebug o Chrome Inspector per quello che il server sta tornando? –

+0

Ovviamente, è la parte della struttura JSON. È la risposta del server. – Fanda

risposta

8

Quando si utilizza il servizio $resource l'azione .query presuppone che la risposta sia una matrice. È possibile specificare che la risposta non è un array quando si utilizza .query specificando che quando si crea la risorsa con il terzo parametro di seguito:

angular.module('privilegeService', ['ngResource']). 
    factory('Privilege', function ($resource) { 
     return $resource('api/users/:userId/privileges', 
         {userId: '@id'}, 
         {'query': {method:'GET', isArray:false}}); 
    }); 

Partenza this plnkr per un esempio. Se si estrae la {'query': {method:'GET', isArray:false}}, la risposta sarà una matrice vuota.

Nota 1: la console è probabilmente mostrando un errore TypeError: Object #<Resource> has no method 'push' che, quando si lavora con .query, di solito significa una matrice è previsto dalla vostra chiamata REST.

Nota 2: le impostazioni predefinite di azione delle risorse sono descritte nella documentazione $resource come segue:

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

Funziona, grazie. Come posso ora accedere agli array annidati nella vista? – Fanda

+0

La risorsa restituisce un oggetto con due array chiamati "Ruoli" e "Sottoreti". Puoi fare riferimento a loro usando rispettivamente 'privileges.Roles' e' privileges.SubRoles'. Ho aggiornato il plnkr con un esempio. – Gloopy

+0

Lo stavo provando in questo modo, ma ha bisogno di un aggiornamento più approfondito del browser dopo le modifiche. Grazie mille per il tuo aiuto. – Fanda

Problemi correlati