loading JSON data from angular service

Question

Please forgive me if this is a simply problem for an angular guru, i am fairly new to services.

Below is a snippet of my controller where i have attempted make a service request to call out data from my JSON file "jobs.json".

I am not receiving an data when i load my web page neither i am seeing the JSON file in inspector element.

I assume there's something incorrect in my below code. Does anyone what the issue is? Click here if you need to play about with the code

"use strict"; 

var app = angular.module("tickrApp", []);

app.service("tickrService", function ($http, $q){
var deferred = $q.defer();
$http.get('app/data/items.json').then(function (data){
    deferred.resolve(data);
});

this.getItems = function () {
    return deferred.promise;
}
  })

 .controller('tickCtrl', function($scope, tickrService) {

var promise = tickrService.getItems();
promise.then(function (data){

    $scope.items= getData;
    console.log($scope.items);
});

GregL · Accepted Answer · 2015-03-12 22:49:37Z

3

In your Plunkr, you had a few errors, such as the <script> tags around the wrong way (you need to have Angular first, so your code can then use angular.module). You also had the wrong attribute of ng-app-data instead of data-ng-app.

The key problem was with the JS code, the first parameter to the success handler for the $http.get() call is an object with a data property, which is the actual data returned. So you should resolve your promise with that property instead.

Then in the controller, like Michael P. said, getData is undefined, you should use the data parameter passed in.

app.service("tickrService", function($http, $q) {
  var deferred = $q.defer();
  $http.get('jobs.json').then(function(response) {
    deferred.resolve(response.data);
  });

  this.getjobs = function() {
    return deferred.promise;
  }
})

.controller('tickCtrl', function($scope, tickrService) {

  var promise = tickrService.getjobs();
  promise.then(function(data) {

    $scope.jobs = data;
    console.log($scope.jobs);
  });

});

See forked Plunkr.

answered Mar 12, 2015 at 22:49

GregL

38.2k8 gold badges65 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mxp Over a year ago

Beat me to it, I was just typing out the same thing. Here have an upvote :)

Michel · Accepted Answer · 2015-03-15 23:42:19Z

In the success handler of your getItems function, you are storing getData, which is undefined. You want to store data instead.

Therefore, in the controller, your call to getItems() should be as follows

tickrService.getItems().then(function (data) {
    $scope.items = data;
});

Also, you want to make the $http call in getItems. Like that :

this.getItems = function () {
    var deferred = $q.defer();
    $http.get('app/data/items.json').then(function (data) {
        deferred.resolve(data);
    });
    return deferred.promise;
}

However, you can avoid the above boilerplate code around the promises, because $http.get returns itself a promise. Your service and controller could be much more concise and less polluted by boilerplate code.

The service could be as simple as :

app.service("tickrService", function ($http) {

    this.getItems = function () {
        return $http.get('app/data/items.json');
    }
});

And the controller could be shortened to:

app.controller('tickCtrl', function ($scope, tickrService) {

    tickrService.getItems().then(function (response) {
        $scope.items = response.data;
    })
});

Please note that the response resolved by $http is an object that contains (link to doc) :

data – The response body transformed with the transform functions.
status – HTTP status code of the response.
headers – {function([headerName])} – Header getter function.
config – The configuration object that was used to generate the request.
statusText – HTTP status text of the response.

Therefore in the success handler of getItems we are storing response.data, which is the response body, and not the whole response object.

Collectives™ on Stack Overflow

loading JSON data from angular service

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related