how to custom set angularjs jsonp callback name?

Question

I have to fetch json data from some website through angularjs. i have done everything correctly according to the link below.

My problem is the api does not allow callback parameter to have any character except letters, numbers and _. And since angular replaces the JSON_CALLBACK with something like 'angular.callbacks._0', its not being allowed.

How can i custom set this value for angularjs?

parsing JSONP $http.jsonp() response in angular.js

thanks

@runTam's solution worked for me.... working plunkr here: plnkr.co/edit/EyFvXx?p=preview — naterchrdsn
– naterchrdsn, Commented Dec 19, 2014 at 21:01

fedor.belov · Accepted Answer · 2014-12-23 18:11:52Z

11

The callback names are hard-coded here httpBackend.js#L55, so you can't config it.

But, you could write a HTTP interceptor to workaround it like this:

.factory('jsonpInterceptor', function($timeout, $window, $q) {
  return {
    'request': function(config) {
      if (config.method === 'JSONP') {
        var callbackId = angular.callbacks.counter.toString(36);
        config.callbackName = 'angular_callbacks_' + callbackId;
        config.url = config.url.replace('JSON_CALLBACK', config.callbackName);

        $timeout(function() {
          $window[config.callbackName] = angular.callbacks['_' + callbackId];
        }, 0, false);
      }

      return config;
    },

    'response': function(response) {
      var config = response.config;
      if (config.method === 'JSONP') {
        delete $window[config.callbackName]; // cleanup
      }

      return response;
    },

    'responseError': function(rejection) {
      var config = rejection.config;
      if (config.method === 'JSONP') {
        delete $window[config.callbackName]; // cleanup
      }

      return $q.reject(rejection);
    }
  };
})

Example Plunker: http://plnkr.co/edit/S5K46izpIxHat3gLqvu7?p=preview

Hope this helps.

edited Dec 23, 2014 at 18:11

fedor.belov

23.6k28 gold badges97 silver badges135 bronze badges

answered Aug 20, 2014 at 13:28

runTarm

11.6k1 gold badge39 silver badges37 bronze badges

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

2 Comments

naterchrdsn Over a year ago

Tested and working with a directive I made using the API the OP referenced: plnkr.co/edit/EyFvXx?p=preview

JimmyBlu Over a year ago

Unfortunately won't work when requesting two resources in parallel. The callback id won't be incremented in between and the callback of the second request won't be defined anymore: Uncaught ReferenceError: angular_callbacks_0 is not defined (see plnkr.co/edit/TVnta6lZeaAaVC7Z8vBl)

Collectives™ on Stack Overflow

how to custom set angularjs jsonp callback name?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related