CODEWITHSUNDEEP
angularjsjsonp
Brian
Brian

Reputation: 173

Angular JSONP returning JSON_CALLBACK is not defined error

I am trying to pull data down via JSONP with angular. I've been puzzled as to why it won't work in certain situations.

I've been able to successfully pull in this sample JSONP:

https://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Brian

But when copied to a bucket on S3, I keep getting this error:

Uncaught ReferenceError: JSON_CALLBACK is not defined

The file is public and I can access it just fine with $.ajax, but not $http.jsonp

I've tried changing the MIME type for the json file to all of the following:

None of them have allowed me to make a successfull call through the $http.jsonp function

Upvotes: 7

Views: 14895

Answers (6)

Pullat Junaid
Pullat Junaid

Reputation: 3384

Just use JSONP_CALLBACK instead of JSON_CALLBACK

Thanks.

Upvotes: 0

Edwin Castañeda
Edwin Castañeda

Reputation: 176

The problem is in your Rest Answer or http json file on the bucket, need to be dynamic with the get(callback) parameter.

You need to detect the callback parameter and concat to the json to get the jsonp.

For Example:

1) http://example.com?callback=JSONP_CALLBACK
2) http://example.com?callback=OtherCallback
3) http://example.com?callback=JSONP_CALLBACK_OTHER

get the GET parameter "callback" and make your rest like this:

1) JSONP_CALLBACK({YOUR REST INFO})
2) OtherCallback({YOUR REST INFO})
3) JSONP_CALLBACK_OTHER({YOUR REST INFO})

Upvotes: 0

Mise
Mise

Reputation: 3557

Change your response from server by

angular.callbacks._0 ({"name":"Super Hero","salutation":"Namaste","greeting":"Namaste Super Hero!"});

instead of 

JSON_CALLBACK ({"name":"Super Hero","salutation":"Pryvitannie","greeting":"Pryvitannie Super Hero!"});

Upvotes: -1

Aero Wang
Aero Wang

Reputation: 9217

Brian I found out a method to make sure it detects ?callback=JSON_CALLBACK. When you request for the url, instead of putting the whole thing inside, you can write it this way, and it detects 100%:

$http({
  method: 'JSONP',
  url: 'https://angularjs.org/greet.php' + '?callback=JSON_CALLBACK' + '&name=Brian"'
});

Upvotes: 0

Brian
Brian

Reputation: 173

Ok, so this is very strange, but I eventually got it to work by changing the callback wrapper in the JSONP from JSON_CALLBACK(.......) to angular.callbacks._0 because that's the callback function angular kept trying to call instead of JSON_CALLBACK... very weird behavior.

Upvotes: 8

Nader Dabit
Nader Dabit

Reputation: 53681

Not being able to see your code, I can show you what worked for me a few days ago when working with JSONP and angular:

controller('YourCtrl', ['$scope', '$http', function($scope, $http) {
var url = "https://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Brian"
$http.jsonp(url)
    .success(function(data) {
        $scope.greeting = data;
    });
}])

Then in the view, something like this should work:

<div ng-controller="YourCtrl">
{{greeting.name}} <br />
{{greeting.salutation}}
</div>

If this doesn't answer your question, try pasting in your code.

Upvotes: 1

Related Questions