web-dev-qa-db-ja.com

Angular Resources Serviceを介したJSONの読み取り

_angular-resources.js_を使用して、サービスを介してJSONファイルを読み込むにはどうすればよいですか？

私はテストのために非常に基本的なAngularアプリに取り組んでおり、現在JSONファイルからデータを読み取ろうとしています。このコードをより簡単に交換できるようにサービスに配置していますサーバーベースのデータストアを移動すると、.

私のAppおよび_App.controller_宣言は次のとおりです。

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

私のJsonServiceは、現時点では次のように定義されています。

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

私が得ているコンソール出力は次のとおりです。

_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
_

service.query(function (data) { }を呼び出そうとするとエラーが表示されます。（正しく理解していれば）JSONファイルを取り込む必要があります。

データをプルする例として AngularJS Cats App を使用しています。

javascriptjsonangularjs
25
Evil Closet Monkey

@pkozlowskiのアドバイスに従い、応答が配列であることを確認します。とにかく、コメントで記述したものと同様のJSONファイルからデータをロードする例を次に示します。 ngResourceを使用し、物事をまとめるのに役立ちます： http://plnkr.co/edit/Ofq7Md8udEnIhAPF1NgL?p=preview =

サービス

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

isArrayがfalseに設定されていることに注意してください。

アプリとコントローラー

var app = angular.module('app', ['jsonService']);

app.controller('ctrl', function($scope, JsonService){
  JsonService.getData(function(data){
    $scope.name = data.name;
    $scope.children = data.children;
  });
});

ResourceクラスはgetDataなどの便利な便利なメソッドを提供するため、getは実際には必要ありません。これを行う

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