Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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)

  1. questions/16344933/angularjs-jsonp-not-working/16352746#16352746
  2. questions/19269153/jsonp-request-in-angularjs-doesnt-work-like-in-jquery
  3. questions/19669044/angularjs-getting-syntax-error-in-returned-json-from-http-jsonp

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:

  1. 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
  2. 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.

share|improve this question

1 Answer 1

The problem is in the response. If you check the response in Chrome dev tools "Network" tab, you get the correct JSON but with JSONP it should have call to

JSON_CALLBACK()

wrapped around the JSON object. See example for JSONP here: https://docs.angularjs.org/api/ng/service/$http

Your response isn't wrapped in the function call:

{"rn": "1", "code": 400, "message": "Routing numbers are 9 digits"}

For reference, see: https://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Super%20Hero

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.