AngularJS resource service with jsonp fails

I'm trying to fetch the JSON output of a rest api in AngularJS. Here are the problems I'm facing:

  • The Rest api url has the port number in it which is being interpolated by AngularJS for a variable. I tried several resolutions for this in vain.
  • I'm having issues with JSONP method. Rest api isn't hosted on the same domain/server and hence a simple get isn't working.
  • The parameters to the rest api are slash separated and not like a HTML query string. One of the parameters is an email address and I'm thinking the '@' symbol is causing some problem as well. I wasn't able to fix this either.

My rest api looks something like: http://myserver.com:8888/dosomething/me@mydomain.com/arg2. Sample code / documentation would be really helpful.

I struggled a lot with this problem, so hopefully this will help someone in the future :)

JSONP expects a function callback, a common mistake is to call a URL that returns JSON and you get a Uncaught SyntaxError: Unexpected token : error. Instead, JSONP should return something like this (don't get hung up on the function name in the example):

angular.callbacks._0({"id":4,"name":"Joe"})

The documentation tells you to pass JSON_CALLBACK on the URL for a reason. That will get replaced with the callback function name to handle the return. Each JSONP request is assigned a callback function, so if you do multiple requests they may be handled by angular.callbacks._1, angular.callbacks._2 and so forth.

With that in mind, your request should be something like this:

var url = 'http://myserver.com:8888/dosomething/me@mydomain.com/arg2';
$http.jsonp(url + '?callback=JSON_CALLBACK')
   .then(function (response) {
       $scope.mydata = response.data;
       ...

Then AngularJS will actually request (replacing JSON_CALLBACK): 

http://myserver.com:8888/dosomething/me@mydomain.com/arg2?callback=angular.callbacks._0

Some frameworks have support for JSONP, but if your api doesn't do it automatically, you can get the callback name from the querystring to encapsulate the json. Example is in Node.js:

var request = require('request');
var express = require('express');
var app = express();

app.get('/', function(req, res){
    // do something to get the json
    var json = '{"id":4,"name":"Joe"}';

    res.writeHead(200, {"Content-Type": "application/javascript"});
    res.write(req.query.callback + '(' + json + ')');
    res.end();
});
app.listen(8888);

The main issue I was facing here was related to CORS. I got the $http to retrieve the JSON data from the server by disabling the web security in Chrome - using the --disable-web-security flag while launching Chrome.

Regarding the 8888 port, see if this works:

$scope.url  = 'http://myserver.com:port/dosomething/:email/:arg2';
$scope.data = $resource($scope.url, {port:":8888", email:'me@mydomain.com', 
                 arg2: '...', other defaults here}, …)

Try escaping the ':' var url = 'http://myserver.com\:8888/dosomething/me@mydomain.com/arg2'; Pretty sure I read about this somewhere else