角度リソースサービスによるJSONの読み込み

Question

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) { }を呼び出す必要はありません。

私はデータを引き出すための例としてAngularJS Cats Appを使っています。

Answer 1

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

サービスisArrayがfalseに設定されていることを

angular.module('jsonService', ['ngResource']) 
.factory('JsonService', function($resource) { 
    return $resource('cats.json',{ }, { 
    getData: {method:'GET', 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; 
    }); 
}); 

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