I am using angular's $http.jsonp()
request which is successfully returning json wrapped in a function:
var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=jsonp_callback"; $http.jsonp(url). success(function(data, status, headers, config) { //what do I do here? }). error(function(data, status, headers, config) { $scope.error = true; });
How to access/parse the returned function-wrapped-JSON?
Angular Jsonp You're probably already used to using the $http service. It provides the normal get , post and other functions mapped to http methods. It also provides the function that we'll need: jsonp . The client script also requires that we specify the callback to send data to.
JSONP is a method of performing API requests which go around the issue of CORS . This is a security measure implemented in all browsers that stops you from using an API in a potentially unsolicited way and most API s, including the iTunes API , are protected by it.
JSONP stands for JSON with Padding. Requesting a file from another domain can cause problems, due to cross-domain policy. Requesting an external script from another domain does not have this problem. JSONP uses this advantage, and request files using the script tag instead of the XMLHttpRequest object.
UPDATE: since Angular 1.6
You can no longer use the JSON_CALLBACK string as a placeholder for specifying where the callback parameter value should go
You must now define the callback like so:
$http.jsonp('some/trusted/url', {jsonpCallbackParam: 'callback'})
Change/access/declare param via $http.defaults.jsonpCallbackParam
, defaults to callback
Note: You must also make sure your URL is added to the trusted/whitelist:
$sceDelegateProvider.resourceUrlWhitelist
or explicitly trusted via:
$sce.trustAsResourceUrl(url)
success/error
were deprecated.
The
$http
legacy promise methodssuccess
anderror
have been deprecated and will be removed in v1.6.0. Use the standard then method instead. If$httpProvider.useLegacyPromiseExtensions
is set tofalse
then these methods will throw$http/legacy error
.
USE:
var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts" var trustedUrl = $sce.trustAsResourceUrl(url); $http.jsonp(trustedUrl, {jsonpCallbackParam: 'callback'}) .then(function(data){ console.log(data.found); });
Previous Answer: Angular 1.5.x and before
All you should have to do is change callback=jsonp_callback
to callback=JSON_CALLBACK
like so:
var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK";
And then your .success
function should fire like you have it if the return was successful.
Doing it this way keeps you from having to dirty up the global space. This is documented in the AngularJS documentation here.
Updated Matt Ball's fiddle to use this method: http://jsfiddle.net/subhaze/a4Rc2/114/
Full example:
var url = "http://public-api.wordpress.com/rest/v1/sites/wtmpeachtest.wordpress.com/posts?callback=JSON_CALLBACK"; $http.jsonp(url) .success(function(data){ console.log(data.found); });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With