Angularjs JSONP not working

Question

I might be missing something here but I can't make this JSONP request work, here is the code:

var url =  'http://' + server + '?callback=JSON_CALLBACK';
$http.jsonp(url)
    .success(function(data){
       console.log('success');
    })
    .error(function () {
      console.log('error')
    });

The request fires ok and I am getting the response (with header Content-Type:application/json) in this format:

    [{"id": "1", "name": "John Doe"},
     {"id": "2", "name": "Lorem ipsum"},
     {"id": "3", "name": "Lorem ipsum"}]

Can you see anything wrong? Maybe the format I should return from the server is not right? Angular fires the error callback without any error message besides the one I set ('error').

The response does not look right, it should be a function call to the callback function specified by the request — joakimbl
– joakimbl, Commented May 2, 2013 at 18:47
@joakimbl is correct. That's not JSONP, that's just JSON. Your response should be a javascript file with the object literal returned inside of a function named after the callback you passed. — Mike Robinson
– Mike Robinson, Commented May 2, 2013 at 19:21

Gloopy · Accepted Answer · 2013-05-10 23:59:24Z

30

@TheHippo is correct the data should not just be a plain json response. Here is a working example of a JSONP request against a youtube endpoint in AngularJS.

A couple of things to note in this example:

Angular's $http.jsonp converts the request querystring parameter from callback=JSON_CALLBACK to callback=angular.callbacks._0.
When calling the youtube endpoint I needed to specify to the service that this is a JSONP request by using alt=json-in-script instead of alt=json in the querystring. This was found in their documentation.
Compare the results of this url to this one to see the difference between JSON and JSONP response in your browser.
Take a look at the Chrome Network Panel in Developer Tools to help compare and troubleshoot with your request/response.

I know this example is very specific but hopefully it helps!

edited May 10, 2013 at 23:59

answered May 3, 2013 at 6:13

Gloopy

37.8k15 gold badges105 silver badges73 bronze badges

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

3 Comments

Nick Over a year ago

@Gloopy - Useful info and example jsfiddle very helpful for debugging my code, thanks very much.

Karoh Over a year ago

Finally a solution that works! Was running into this problem using smartthings just to drop the keyword here.

Johnathan Elmore Over a year ago

Unfortunately the Youtube service utilized for this example no longer works. stackoverflow.com/a/30685729/1014710 shows that it can be done with an Google Developers API key.

Community · Accepted Answer · 2017-05-23 12:16:55Z

16

JSONP requires you do wrap your data into a JavaScript function call. So technically you return a JavaScript file and not a Json file.

The data returned from server should similar to this:

// the name should match the one you add to the url
JSON_CALLBACK([
    {"id": "1", "name": "John Doe"},
    {"id": "2", "name": "Lorem ipsum"},
    {"id": "3", "name": "Lorem ipsum"}
]);

Edit: If some one else stumbles across problems with angular's JSONP please also read this answer to this question, it contains usefull informations about how angular handles the actual callback function.

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered May 2, 2013 at 23:46

TheHippo

63.3k15 gold badges77 silver badges101 bronze badges

1 Comment

Bertrand Over a year ago

Solved! Thanks. TheHippo if you could edit your answer to include what @Gloopy commented: "Angular's $http.jsonp converts the request querystring parameter from callback=JSON_CALLBACK to callback=angular.callbacks._0", so the response is not exactly JSON_CALLBACK() but angular.callbacks._0([ {"id":"1", "name":"John Doe"}, {"id":"2", "name":"Lorem ipsum"}]); If there is more than one request the second jsonp convert the request querystring callback=JSON_CALLBACK to angular.callbacks._1 and so forth, so in my case (PHP server) I am using $_GET['callback']to get the right callback name.

bjc · Accepted Answer · 2015-09-01 08:32:47Z

-3

If the response data is "pure" JSON, we can just handle it with angular's $http.get.

$http.get(url).
  then(function(response) {
    // this callback will be called asynchronously
    // when the response is available
    $scope.responseArray = response.data;
 }, function(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
 });

Refer to the example on w3schools

answered Sep 1, 2015 at 8:32

bjc

1032 bronze badges

2 Comments

mike clagg Over a year ago

Only if you have CORS set

Sujal Mandal Over a year ago

this has nothing to do with jsonp at all

Collectives™ on Stack Overflow

Angularjs JSONP not working

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related