Angular - $http, $q load json

Question

Still trying to learn Angular.

I have a plunker here - https://plnkr.co/edit/oEXn5JDKeqoN82jz3PC1?p=preview

Trying to load external json file using $http and $q

I have a simpleController calling a getJson() function in a simpleService file to load the json.

Just trying to output the data on the home page to start with.

Locally I'm getting an error in the console saying

        TypeError: simpleService.getJson is not a function

The service

(function() {

  angular.module('cxoAppJs').service('simpleService', simpleService);

  simpleService.$inject = ['$http', '$q'];

  function simpleService($http, $q) {

    function getJson() {

      var deferred = $q.defer();

      http.get('https://api.myjson.com/bins/gznzh').then(function() {

        deferred.resolve(data);

        return deferred.promise;

      })

    }

  }

})();

42tg · Accepted Answer · 2016-12-22 16:18:15Z

2

Like Tome Pejoski says, you dont need to wrap the $http.get function

but your error isnt a problem with the wrapping byself. You have to return your functions in a service to get access to it

(function(){
      angular.module('cxoAppJs').service('simpleService', simpleService);

      simpleService.$inject = ['$http', '$q'];
      function simpleService($http, $q){
        var service = {};
        service.getJson = function(){ return $http.get('https://api.myjson.com/bins/gznzh');};
        return service;
      }
})();

After that you can call it in your Controller

angular.module('cxoAppJs').controller('ExampleCtrl', ExampleCtrl);
ExampleCtrl.$inject('$scope', 'simpleService');
function ExampleCtrl($scope, simpleService){
  $scope.exampleData = {};
  simpleService.getJson().then(function(request){
     $scope.exampleData = request.data
  })
}

Edit:

Quick Example Plunker

edited Dec 22, 2016 at 16:18

answered Dec 22, 2016 at 15:30

42tg

7256 silver badges13 bronze badges

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

8 Comments

42tg Over a year ago

got your Plunkter to work too: plnkr.co/edit/TOiRJzxdlb8fXgY4Pedi?p=preview Happy Coding!!

42tg Over a year ago

You have to include your separate JS files too, and I fixed some small issues with naming and typing

mtchris Over a year ago

Thanks 42tg I can see how the plunker works but I was trying to do this with $q and defer. I know $http returns a promise but Ive seen examples using $q and I was trying to understand how to do that. I'll try and update my plunker and question.

42tg Over a year ago

here is an example how to do it with $q directly, added two ways of creating promises, choose what you like more and welcome to the promise chaining :)

42tg Over a year ago

Just to add an important notice the return $q((resolve,reject)=>{}) shorthand function only works with angular >= 1.3.0

|

Tome Pejoski · Accepted Answer · 2016-12-22 15:12:27Z

1

You don't need to wrap the HTTP call in a promise. $http automatically creates a promise.

Your code should look like this:

$http.get('https://api.myjson.com/bins/gznzh').then(function(result){
  return result.data;       
}

answered Dec 22, 2016 at 15:12

Tome Pejoski

1,5802 gold badges11 silver badges34 bronze badges

Collectives™ on Stack Overflow

Angular - $http, $q load json

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related