Het volgende JSON-antwoord van de server
[
"hello",
"world"
]
wordt geparseerd in een 2D-array door deze ngResource-service
myService.factory('Name', function($resource){
return $resource(site_url+'api/accounts/:accountId/names/', {}, {
list: {method:'GET', params:{}, isArray:true}
});
});
zo genoemd
$scope.names = Name.list({accountId:$scope.account.id}, function(e){
console.log(e);
});
sporen naar
[{"0":"h","1":"e","2":"l","3":"l","4":"o"},{"0":"w","1":"o","2":"r","3":"l","4":"d"}]
Heeft u hints?
Antwoord 1, autoriteit 100%
TLDR; ngResourceverwacht een object of een reeks objectenin uw antwoord.
Als isArray
is ingesteld op true
in de lijst met acties, herhaalt de module ngResourceelk item dat in het antwoord is ontvangen en creëert een nieuwe instantie van een resource. Om dit te doen, voert Angular een diepe kopie uit tussen het ontvangen item en de klasse Resource
, wat ons een object geeft met speciale methoden ($save
, $delete
enzovoort)
Bekijk de bron hier.
Intern hoekig gebruikt hoekig.copyom de deep copy en deze functie werkt alleen met objectenen arrays, als we een string doorgeven, wordt deze als een object behandeld.
Strings in JS kunnen zich gedragen als arrays door sequentiële toegang tot elk teken te geven. angular.copy
zal het volgende produceren wanneer een string wordt doorgegeven
angular.copy('hi',{}) => {0:'h', 1:'i'}
Elk teken wordt een waarde in een object, met de index als sleutel. ngResourcelevert een bron met eigenschappen 0
en 1
.
Uw keuzes zijn:
Gebruik de $http-service op een lager niveau
$http.get('/res').success(function(data){
$scope.test = data;
});
Retourneer een reeks objecten in uw json-antwoord
[{'data': "hello"}, {'data': "world"}]
Onderschep de reactie en wijzig uw gegevens
Als u de gegevens die de server terugstuurt niet kunt wijzigen en u ngResourcewilt gebruiken, moet u het antwoord transformeren. Lees hier
hoe u dit doet
Antwoord 2
Ik heb hier ook last van. Hier is mijn oplossing door de service iets aan te passen met behulp van query
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:
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-resource.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="testController">
<h1>{{result.surname}}</h1>
</body>
</html>
en het JSON-bestand:
{
"name": "Homer",
"surname": "Simpson",
"Town": "Springfield"
}
en ook werkende Plunker als je geïnteresseerd bent: http://plnkr.co/edit/SwqlZyqZ4zfcpaLxaf39
Ik hoop dat dit iemand helpt …