JsonP returning "Uncaught SyntaxError: Unexpected token :" AngularJS - routingnumbers.info

Question

I've researched this question a ridiculous amount and would hope that someone can help diagnose what is wrong.

I've already tried looked at the following SO questions: (SO wouldn't let me post more than 2 links due to reputation, so i've just included the paths)

Among many others......

Things I have tried: I've added &callback=JSON_CALLBACK to the end of the url. I've changed config settings such as responseType: 'JSON'. I've also rearranged the http.jsonp request multiple times to make sure it was not something programmatic/textual (http({}) & http.jsonp)

Here is what i'm trying to do: Grab information from routingnumbers.info/api/ using an angular jsonp request (server does not allow CORS). I am able to make the request successfully with jQuery, but i'm unable to make it successfully with angular.

Here is the corresponding test fiddle: http://jsfiddle.net/dqcpa/14/

As you can see, I receive two errors:

Resource interpreted as Script but transferred with MIME type text/plain: "https://routingnumbers.herokuapp.com/api/data.json?rn=071000013&callback=angular.callbacks._0". angular.min.js:97
Uncaught SyntaxError: Unexpected token :

But if you check the response in chrome devtools - NETWORK, it is correct: Though I do know that jsonp will return the response inside of jsonpfunction({ "MyJson": "Data"}) which is where it is getting hung up at.

Here is the original code:

//$scope.number = '071000013';
var routingApiUrl = 'https://routingnumbers.herokuapp.com/api/data.json?rn=' + $scope.number;
$http({
    method: 'jsonp',
    url: routingApiUrl + '&callback=JSON_CALLBACK',
    responseType: "json"
}).
success(function(data){
    console.log('Success: ' + data);
}).
error(function(data){
    console.log('Error: ' + data);
});

Has anyone used this API with angular? I'm assuming that there may be something I can do (sans jquery) to modify headers, but I have not been able to find any information. I'm also thinking that it could be a server issue (although, if it is working correctly in jquery, that wouldn't be the issue). Maybe this could be something with HTTPS

TL:DR - Angular JSONP request is not working, but with the same URL, the jQuery JSONP request is working. Referencing the above code, what am I missing?

Any help would be awesome!

EDIT: Some punctuation and stuff.

don't you need to add ?callback= vs. &callback=? It's the question mark, not the ampersand — Alan L.
– Alan L., Commented Jun 24, 2015 at 23:35
There is already a ?rn= on the URL. see routingApiUrl. Using & as a continuation of the query string. — dannypaz
– dannypaz, Commented Jun 25, 2015 at 20:51

Community · Accepted Answer · 2017-05-23 11:53:52Z

6

acoording to this question: How to get rid of Uncaught SyntaxError: Unexpected token : try adding angular.callbacks._0 (JSON) around your server side json call. it worked for me

This was the plunker http://plnkr.co/edit/oX2UQRBA41FIHpwAP6AA

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Jul 28, 2015 at 21:04

Raymond Ativie

1,8583 gold badges28 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dannypaz Over a year ago

the response is not being wrapped in angular.callback._0. For jQuery, the call is being wrapped correctly. This is the correct description for my issue.

Collectives™ on Stack Overflow

JsonP returning "Uncaught SyntaxError: Unexpected token :" AngularJS - routingnumbers.info

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related