Lecture dans JSON par Angular Resources Service

Comment puis-je utiliser angular-resources.js pour lire dans un fichier JSON via un service?

Je travaille sur une application Angular très basique à des fins de test et j'essaie simplement de lire les données du fichier JSON en ce moment. Je place ce code dans un service afin que je puisse l'échanger plus facilement lorsque nous déplacez un magasin de données basé sur le serveur.

App.controller déclaration de Ma App et App.controller est la suivante:

 'use strict'; // create module for custom directives var App = angular.module('App', ['jsonService']); // controller business logic App.controller('AppCtrl', function AppCtrl($scope, JsonService) { console.log("marker 1"); if (!$scope.jsonData) { console.log("marker 2"); JsonService.getData(function (d) { console.log(d); $scope.jsonData = d; $scope.records = d.length; }); } else { console.log("I have data already... " + $scope.jsonData); } console.log($scope.jsonData); }); 

Mon JsonService est défini comme le suivant, pour le moment:

 'use strict'; angular.module('jsonService', ['ngResource']) .factory('JsonService', function($resource, $filter) { // define the remote service using Angular's $resource module var service = $resource('/data/ProcessModeling-Resources.json', {}); var JsonService = { // calls $resource.query() to retrieve the remote data. getData : function getData(callback) { console.log("marker 3"); service.query(function (data) { console.log("marker 4"); }); } }; return JsonService; }); 

La sortie de la console que je reçois suit:

 marker 1 app.js:8 marker 2 app.js:11 marker 3 services.js:13 undefined app.js:21 TypeError: Object #<Resource> has no method 'push' at copy (http://127.0.0.1:8000/lib/angular.js:556:21) at new Resource (http://127.0.0.1:8000/lib/angular-resource.js:330:9) at http://127.0.0.1:8000/lib/angular-resource.js:386:32 at forEach (http://127.0.0.1:8000/lib/angular.js:117:20) at http://127.0.0.1:8000/lib/angular-resource.js:385:19 at wrappedCallback (http://127.0.0.1:8000/lib/angular.js:6650:59) at http://127.0.0.1:8000/lib/angular.js:6687:26 at Object.Scope.$eval (http://127.0.0.1:8000/lib/angular.js:7840:28) at Object.Scope.$digest (http://127.0.0.1:8000/lib/angular.js:7707:25) at Object.Scope.$apply (http://127.0.0.1:8000/lib/angular.js:7926:24) angular.js:5582 

Je reçois mon erreur lorsque j'essaie d'appeler mon service.query(function (data) { } , qui (si je comprends correctement) devrait tirer sur mon fichier JSON.

J'ai utilisé AngularJS Cats App comme un exemple pour tirer des données.

Je suivrais les conseils de @ pkozlowski et je ferais en sorte que la réponse soit un tableau. Quoi qu'il en soit, voici un exemple qui charge les données d'un fichier JSON similaire à ce que vous décrivez dans vos commentaires. Il utilise ngResource et peut vous aider à mettre les choses ensemble: http://plnkr.co/edit/Ofq7Md8udEnIhAPF1NgL?p=preview

Le service

 angular.module('jsonService', ['ngResource']) .factory('JsonService', function($resource) { return $resource('cats.json',{ }, { getData: {method:'GET', isArray: false} }); }); 

Notez que isArray est défini comme false .

Votre application et votre contrôleur

 var app = angular.module('app', ['jsonService']); app.controller('ctrl', function($scope, JsonService){ JsonService.getData(function(data){ $scope.name = data.name; $scope.children = data.children; }); }); 

getData n'est en fait pas nécessaire puisque la classe Resource vous offre des méthodes de commodité utiles telles que get , vous pouvez simplement le faire

 angular.module('jsonService', ['ngResource']) .factory('JsonService', function($resource) { return $resource('cats.json'); }); app.controller('ctrl', function($scope, JsonService){ JsonService.get(function(data){ $scope.name = data.name; $scope.children = data.children; }); });