Reading in JSON through Angular Resources Service

Question

How can I use angular-resources.js to read in a JSON file through a service?

I am working on a very basic Angular app for testing purposes and am just trying to read in data from JSON file right now. I am placing this code in a service so I can more easily swap it out when we move a server based data store.

My App and App.controller declaration are as follows:

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

My JsonService is defined as the follow, at the 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; }); 

The console output I am getting follows:

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 

I'm receiving my error when I attempt to call my service.query(function (data) { }, which (if I'm understanding correctly) should be pulling my JSON file in.

I've been using AngularJS Cats App as an example for pulling data.

Answer 1

I'd follow @pkozlowski's advice and make sure the response is an array. Anyway, here's an example that loads data from a JSON file similar to what you describe in your comments. It uses ngResource and can help you put things together: http://plnkr.co/edit/Ofq7Md8udEnIhAPF1NgL?p=preview

The service

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

Notice that isArray is set to false.

Your app and controller

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 is actually not needed since the Resource class gives you some useful convenience methods such a get, you can just do this

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