Codebase Blog

AngularJSでJSONファイルを扱うには、ngResourceモジュールを利用するのが一般的なようです。

JSONに含まれるデータが配列の場合は、queryメソッドを使います。以下の例では、取得したデータをbooksというスコープ変数に代入すると同時に、booksの各要素をコンソールに出力する処理をしています。ngResourceは非同期読み込みなので、読み込んだ後に実行したい関数をqueryメソッドの引数として渡す形になります。

[
  {"name": "name1", "price": 1000},
  {"name": "name2", "price": 1500},
  {"name": "name3", "price": 3000}
]

angular.module('myApp', ['ngResource'])
  .controller('bookCtrl', ['$scope', '$resource', function($scope, $resource){
    var Book = $resource('/path/to/json');
    $scope.books = $resource.query(function(books) {
      for (var i = 0; i < books.length; i++) {
        console.log(books[i]);
      }
    });
  }]);

データがハッシュの場合は、queryではなくgetを使用します。

{
  "name1": {"price": 1000},
  "name2": {"price": 1500},
  "name3": {"price": 3000}
}

angular.module('myApp', ['ngResource'])
  .controller('bookCtrl', ['$scope', '$resource', function($scope, $resource){
    var Book = $resource('/path/to/json');
    $scope.books = $resource.get(function(books) {
      for (var key in books) {
        console.log(books[key]);
      }
    });
  }]);