Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

parsing JSONP $http.jsonp() response in angular.js

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?

like image 458
akronymn Avatar asked Aug 22 '12 03:08

akronymn


People also ask

Does Angularjs HTTP service provide JSONP functionality?

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.

What is JSONP in angular?

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.

What is a JSONP request?

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.


1 Answers

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 methods success and error have been deprecated and will be removed in v1.6.0. Use the standard then method instead. If $httpProvider.useLegacyPromiseExtensions is set to false 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);     }); 
like image 93
subhaze Avatar answered Sep 18 '22 14:09

subhaze