PIXEL
DOCK

I like the smell of Swift in the morning…

Working with JSONP in AngularJS

Posted: | Author: | Filed under: Javascript | Tags: , | 3 Comments »

One thing that I really like in AngularJS is how easy it is to load JSONP from the server and work with the result. With just one line of code you have the JSON object “in your hand”:

$http.jsonp('https://myurl.com/getlist?callback=JSON_CALLBACK')
   .success(function (data) {
      $scope.jsonObject = data;
   }
);

Really easy. But at first I could not make it work. The request was returning a valid JSONP response but the Javascript would throw an error:

Uncaught ReferenceError: angularcallbacks_0 is not defined

As usual the reason for this error was quite simple once I found it: When you work with JSONP you need to add the name of the callback function (aka “padding”) to the request. The JSON that comes back from the server will then be padded in a function of the name that you provided. For example:

When you request a JSON file like this:

{"key": "data"}

using JSONP:

https://myurl.com/getlist?callback=myCallback

you will get the following response:

myCallback({"key": "data"});

When you use AngularJS, the callback name must be JSON_CALLBACK.

https://myurl.com/getlist?callback=JSON_CALLBACK

AngularJS changes the callback name internally to make sure that you can use several requests simultaneously. So your response will look like this:

angular.callbacks._0({"key": "data"});

So far so good. But when I looked at the response that I got I noticed that the callback name was missing the dots. That was the reason for the Javascript error. AngularJS was expecting angular.callbacks._0 when all it got was angularcallbacks_0.

As it turned out the PHP on the server side was stripping all dots from request parameters. That was the reason why the JSONP response could not be handled by AngularJS.

3 Comments

  • 1

    Sweshsaid at

    Hi, I am getting a following error,
    when I tried to make jsonp request in angularJs

    Uncaught SyntaxError: Unexpected token :

    My Code is

    return $http({
    method: ‘JSONP’,
    url: ‘https:\\mydomain.com’?callback=JSON_CALLBACK’
    });

  • 2

    Zensaid at

    Thank you so much for this… I am experiencing the same stripping of dots from my JSONP callback name… can you please let me know how you solved this in Angular?

    On Stack Overflow I see some posts that recognize the problem but none of them articulate it as well as you have here and none of them offer a working solution.

    What did you add to your Angular code as a fix? I REALLY appreciate the help!

    Thanks again,

    -Zen

  • 3

    Jörnsaid at

    Hi Zen,

    sorry for the late reply! I am afraid there is no way to fix this problem with AngularJS alone. The problem lies on the server side. You have to fix this in your PHP code. As I was playing around with somebody else’s API and they fixed the problem I cannot really help you with that. But have a look at this stackoverflow question it should point you in the right direction: http://stackoverflow.com/questions/68651/get-php-to-stop-replacing-characters-in-get-or-post-arrays

    Best regards,

    Jörn


Leave a Reply