http.jsonp and callbacks in javascript

Question

I am working on a calculator that will consider AWS instance costs. I am pulling the data from a .js file on amazon and I would like to read it into an object but i keep getting an error "Uncaught ReferenceError: callback is not defined" .. here is my .js file.

(function() {
  var app = angular.module('formExample', []);

  var ExampleController = function($scope, $http) {
    $scope.master = {};

    $scope.update = function(user) {
      $scope.master = angular.copy(user);
      $scope.GetAws();
    };

    $scope.reset = function() {
      $scope.user = "";
    };

    function callback(data) {
      $scope.aws = data;
    }

    $scope.GetAws = function() {
      var url = "http://a0.awsstatic.com/pricing/1/ec2/linux-od.min.js?callback=callback";
      $http.jsonp(url);
    };

    $scope.reset();
  };
  app.controller('ExampleController', ['$scope', '$http', ExampleController]);
}());

PSL · Accepted Answer · 2015-01-21 02:03:04Z

2

It is weird that the aws link you are using supports jsonp but it does not take custom callback function name. (Atleast you can look up to find out if the query string they are looking for is callback or not). angular handles it when we provide callback=JSON_CALLBACK it gets translated to angular.callbacks_x which are exposed globally temporarily by angular to handle the request and resolve the promise accordingly. But for this the endpoint must take the callback argument and wrap the response in the same string and function invocation. However this endpoint does not seem to consider it and even without any callback it automatically wraps into default callback function invocation. So you would need to inject $window (Correct DI way) object and set callback function to it and ?callback=callback is irrelevant.

  var ExampleController = function($scope, $http, $window) {
    $scope.master = {};

    //....

    $window.callback = function(data) {
      $scope.aws = data;
    }

    $scope.GetAws = function() {
      var url = "http://a0.awsstatic.com/pricing/1/ec2/linux-od.min.js?callback=callback";
      $http.jsonp(url);
    };

    $scope.reset();
   };

   app.controller('ExampleController', ['$scope', '$http', '$window', ExampleController]);

Plnkr

answered Jan 21, 2015 at 2:03

PSL

124k21 gold badges257 silver badges243 bronze badges

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

2 Comments

PSL Over a year ago

See if the query string argument is callback itself or is it expecting a different name.

mikegertrudes Over a year ago

This is a much better solution than the one I suggested. I'm actually going to go back to a few apps I've made an update them to use this approach.

mikegertrudes · Accepted Answer · 2015-01-21 01:57:05Z

It is because the AWS script is looking to call a function called "callback" on the global scope (outside of Angular). Since your function is within the scope of another (IIFE) function, it cannot be accessed.

What I've done in a case like this is simply put the function in the global scope.

In cases where an application requires some API to have loaded before Angular can do it's magic and has a callback similar to your situation, I have done the following, manually bootstrapping Angular:

index.html

<script src="http://www.example.com/api?callback=myCallbackFunction"></script>

app.js

// callback function, in global (window) scope
function myCallbackFunction() {

  // manually bootstrap Angular
  angular.element(document).ready(function() {
    angular.bootstrap(document, ['myApp']);
  });

}


// your IIFE
(function() {

})();

hirra · Accepted Answer · 2015-01-21 02:06:49Z

1

Notice callback should be set in window scope. So,one solution is like:

$scope.reset = function() {
  $scope.user = "";
};

window.callback = function(data) {
  $scope.aws = data;
}

$scope.GetAws = function() {
  var url = "http://a0.awsstatic.com/pricing/1/ec2/linux-od.min.js?callback=callback";
  $http.jsonp(url);
};

answered Jan 21, 2015 at 2:06

hirra

1,0379 silver badges14 bronze badges

Collectives™ on Stack Overflow

http.jsonp and callbacks in javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related