parsing JSONP http jsonp response in angular js

Question

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

User · Answer

The MOST IMPORTANT THING I didn t understand for quite awhile is that the request MUST contain  callback JSON CALLBACK   because AngularJS modifies the request url  substituting a unique identifier for  JSON CALLBACK    The server response must use the value of the  callback  parameter instead of hard coding  JSON CALLBACK    JSON CALLBACK json response       wrong    Since I was writing my own PHP server script  I thought I knew what function name it wanted and didn t need to pass  callback JSON CALLBACK  in the request   Big mistake   AngularJS replaces  JSON CALLBACK  in the request with a unique function name  like  callback angular callbacks  0    and the server response must return that value   angular callbacks  0 json response

User · Answer

This should work just fine for you  so long as the function jsonp callback is visible in the global scope   function jsonp callback data           returning from async callbacks is  generally  meaningless     console log data found      var url    http   public-api wordpress com rest v1 sites wtmpeachtest wordpress com posts callback jsonp callback     http jsonp url     Full demo  http   jsfiddle net mattball a4Rc2   disclaimer  I ve never written any AngularJS code before

User · Answer

You still need to set callback in the params   var params        a   b     token auth   TOKEN     callback    functionName      sce trustAsResourceUrl url     http jsonp url      params  params       Where  functionName  is a stringified reference to globally defined function  You can define it outside of your angular script and then redefine it in your module

User · Answer

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

User · Answer

for me the above solutions worked only once i added  format jsonp  to the request parameters

User · Answer

I m using angular 1 6 4 and answer provided by subhaze didn t work for me  I modified it a bit and then it worked - you have to use value returned by  sce trustAsResourceUrl  Full code   var url    http   public-api wordpress com rest v1 sites wtmpeachtest wordpress com posts  url    sce trustAsResourceUrl url     http jsonp url   jsonpCallbackParam   callback         then function data           console log data found

User · Answer

This was very helpful   Angular doesn t work exactly like JQuery   It has its own jsonp   method  which indeed requires   amp callback JSON CALLBACK  at the end of the query string   Here s an example   var librivoxSearch   angular module  librivoxSearch        librivoxSearch controller  librivoxSearchController   function   scope   http         http jsonp  http   librivox org api feed audiobooks author Melville format jsonp amp callback JSON CALLBACK   success function  data             scope data   data                Then display or manipulate    data    in your Angular template

User · Answer

For parsing do this-      http jsonp url       success function data  status  headers  config          what do I do here        scope data data        Or you can use         scope data JSON Stringify data    In Angular template you can use it as    data

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

Examples related to javascript

Examples related to angularjs

Examples related to jsonp