web-dev-qa-db-fra.com

Lecture en JSON via Angular Resources Service

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

Je travaille sur une application Angular angulaire à 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 plus facilement l'échanger lorsque nous déplaçons un magasin de données sur serveur.

Mes déclarations App et App.controller Sont les suivantes:

'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 suit, 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 console que j'obtiens est la suivante:

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 ma service.query(function (data) { }, qui (si je comprends bien) devrait extraire mon fichier JSON.

J'utilise AngularJS Cats App comme exemple pour extraire des données.

javascriptjsonangularjs
25
Evil Closet Monkey

Je suivrais les conseils de @ pkozlowski et m'assurerais que la réponse est un tableau. Quoi qu'il en soit, voici un exemple qui charge des données à partir 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 sur 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 car la classe Resource vous donne quelques méthodes pratiques utiles telles que get, vous pouvez simplement fais ça

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