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; }); });