Angular JSONP calling WordPress JSON REST API

Question

I'm not entirely sure what's going on, as I'm still trying to figure cross domain javascript calls, but I'm calling some JSON from a WordPress site (that's using the WordPress JSON REST API plugin). Since it's coming from a local site (I'm working on a mobile app using Ionic/Angular), I've had some cross-domain access issues. So, I'm looking at using JSONP.

I've successfully called and returned info, but I can't seem to do anything with the returned data.

My call is as so:

$http.jsonp('http://heavymetalhamilton.ca/wp-json/hmh-api/shows?_jsonp&callback=JSON_CALLBACK')
  .success(function(data) {
    console.log(data);
  });

However, nothing is being logged. I can see that the $http.jsonp call is returning data (I can see in developer tools and looks like this:

/**/([{"ID":30,"post_date":"2014-09-25 18:33:15","post_date_gmt":"2014-09-25 
...
)

I see that the returning data has some packing around it, but I'm not sure how to process this data.

Any help?

EDIT: Have what's happening going on in a CodePen

If nothing is logged then the request must have failed. Try $http.jsonp('…').error(function (data, status, headers, config) { … … }) — Michał Miszczyszyn
It does hit the error... and shows a status of 404. Very strange, since dev tools are showing the request returned a status of 200 as well as data. — MetalAdam
Is there anything else shown? Such as error message or the exception thrown? Status codes are not reliable when using JSONP requests. — Michał Miszczyszyn
So, I kind of have this working, but I'm not really sure why. I'm not sure how I can keep the callback function happen inside the controller so that I can continue to use the scope that's available... codepen.io/anon/pen/rvFHL — MetalAdam

MetalAdam MetalAdam · Accepted Answer · 2014-10-28T12:24:45

So, the biggest problem I had (there were a couple), was my jsonp call. There isn't a "success" promise attached to it. Jsonp fires a function defined as a callback - in this case, the call to:

http://heavymetalhamilton.ca/wp-json/hmh-api/shows?_jsonp=mytest&callback=JSON_CALLBACK

calls a global function of mytest() once returned. So, in order to get a global function in my controller, so I can use $scope, my end result is:

$http.jsonp('http://heavymetalhamilton.ca/wp-json/hmh-api/shows?_jsonp=mytest&callback=JSON_CALLBACK');

window.mytest = function(data) {
  $scope.shows = data;
};

I also had an issue with the content type I was returning (as mentioned by @Miszy). I have to specify that the Content-Type is set to application/javascript... previously it was returning application/json.

In my case, I'm writing some custom functionality to return specific content, so I added the following:

if ($_GET['_jsonp']) {
   $response->header( 'Content-Type', 'application/javascript; charset=' . get_option( 'blog_charset' ), true );
}

Hope this helps someone down the road!

Angular JSONP calling WordPress JSON REST API

2 Answers