7

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:

  • application/json
  • application/javascript
  • application/x-javascript
  • text/plain
  • text/javascript

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

1
  • "Uncaught ReferenceError: JSON_CALLBACK is not defined" — Your question is missing the code which defaults the JSON_CALLBACK function. Commented Feb 11, 2016 at 13:15

6 Answers 6

8

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.

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

3 Comments

What is the version of angular.js you are using?
The $http.jsonp will replace the JSON_CALLBACK in url with the angular.callbacks.{{callbackId}} automatically. For some reason, it failed to do so in your case.
Yes, very weird behavior, but you saved my day anyway!
1

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.

1 Comment

That's exactly what I'm doing.
0

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"'
});

Comments

0

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}) 

Comments

0

Just use JSONP_CALLBACK instead of JSON_CALLBACK

Thanks.

Comments

-1

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!"});

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.