Um array dimensional de strings sendo analisado para 2d por recurso angular

A seguinte resposta JSON do servidor

[ "hello", "world" ] 

está sendo analisado em uma matriz 2d por este serviço ngResource

 myService.factory('Name', function($resource){ return $resource(site_url+'api/accounts/:accountId/names/', {}, { list: {method:'GET', params:{}, isArray:true} }); }); 

chamado assim

 $scope.names = Name.list({accountId:$scope.account.id}, function(e){ console.log(e); }); 

traços para

 [{"0":"h","1":"e","2":"l","3":"l","4":"o"},{"0":"w","1":"o","2":"r","3":"l","4":"d"}] 

Alguma dica?

TLDR; ngResource espera um object ou uma matriz de objects em sua resposta.


Quando isArray é definido como true na lista de ações, o módulo ngResource itera sobre cada item recebido na resposta e cria uma nova instância de um Recurso. Para fazer isso, o Angular executa uma cópia profunda entre o item recebido e a class Resource , que nos fornece um object com methods especiais ( $save , $delete e assim por diante)

Verifique a fonte aqui .

Internamente angular usa angular.copy para executar a cópia profunda e esta function só opera com objects e arrays , quando passamos uma string, ela irá tratá-la como um object.

Strings em JS podem se comportar como matrizes, fornecendo access sequencial a cada caractere. angular.copy produzirá o seguinte quando passar uma string

 angular.copy('hi',{}) => {0:'h', 1:'i'} 

Cada caractere se torna um valor em um object, com seu índice definido como a chave. ngResource fornecerá um recurso com propriedades 0 e 1 .


Suas escolhas são:

Use o serviço $ http de nível mais baixo

 $http.get('/res').success(function(data){ $scope.test = data; }); 

Retornar uma matriz de objects em sua resposta json

 [{'data': "hello"}, {'data': "world"}] 

Intercepte a resposta e altere seus dados

Se você não puder modificar os dados que o servidor envia de volta e quiser usar o ngResource, será necessário transformar a resposta. Leia como fazer aqui

Eu tenho lutado com isso também. Aqui está a minha solução, ajustando o serviço ligeiramente usando consulta

 var app = angular.module('testApp', ['ngResource']); app.factory('Name', function($resource, $sce) { var path = "test.json"; return $resource(path, {}, { query: { method: 'GET', isArray: false } }) }); app.controller('testController', function($scope, Name) { $scope.result; $scope.getResult = function() { Name.query(function(data) { $scope.result = data; }); }; $scope.getResult(); }); 

HTML:

          

{{result.surname}}

e o arquivo JSON:

 { "name": "Homer", "surname": "Simpson", "Town": "Springfield" } 

e também trabalhando Plunker se interessado: http://plnkr.co/edit/SwqlZyqZ4zfcpaLxaf39

Espero que isso ajude alguém …