JSONP not working in AngularJS as expected

Question

The first commented $scope.url which I took from angular documentation works fine, similarly I am trying to invoke another public url which gives me back the response but always goes to error callback.

Both the URLs are in public domain, so please feel free to try.

                $scope.method = 'JSONP';
             // URL 1: Working
             // $scope.url = 'https://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Super%20Hero';

             // URL 2: Not working (Getting response with status 200OK but going to error callback)           
                $scope.url= 'http://apps.nlm.nih.gov/medlineplus/services/mpconnect_service.cfm?callback=JSON_CALLBACK&mainSearchCriteria.v.cs=2.16.840.1.113883.6.96&mainSearchCriteria.v.c=41381004&knowledgeResponseType=application/javascript';

                $scope.fetch = function() {
                    $scope.code = null;
                    $scope.response = null;

                    $http({method: $scope.method, url: $scope.url, cache: $templateCache}).
                        success(function(data, status) {
                             console.log(data);
                             console.log(status);
                        }).
                        error(function(data, status) {
                            console.log(data);
                            console.log(status);
                        });
                };

enter image description here

Krzysztof Safjanowski · Accepted Answer · 2014-07-30 19:02:04Z

2

For some reason dots are stripping from callbacke method name http://apps.nlm.nih.gov/medlineplus/services/mpconnect_service.cfm?callback=angular.callbacks._0&mainSearchCriteria.v.cs=2.16.840.1.113883.6.96&mainSearchCriteria.v.c=41381004&knowledgeResponseType=application/javascript

This response can’t be handle by AngularJS as Angular wants to call angular.callbacks.0

Some development background

var jsonpDone = jsonpReq(url.replace('JSON_CALLBACK', 'angular.callbacks.' + callbackId),
    function() {
        if (callbacks[callbackId].data) {
            completeRequest(callback, 200, callbacks[callbackId].data);
        } else {
            completeRequest(callback, status || -2);
        }
        callbacks[callbackId] = angular.noop;
});

Every URL that has JSON_CALLBACK string inside will be replaced by angular.callbacks.{\D}

source: AngularJS.js

answered Jul 30, 2014 at 19:02

Krzysztof Safjanowski

7,4483 gold badges38 silver badges50 bronze badges

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

2 Comments

Himalay Majumdar Over a year ago

Thanks @Krzysztof for confirming the response is not suitable for Angular. The Web Service is not under my control, I will find another way to call it than using Angular.

Krzysztof Safjanowski Over a year ago

I’ve found one ugly solution. You can external api with callback other than JSON_CALLBACK. And (this is ugly part) you must create global method with the same name as callback. In that global method you can handle response.

Collectives™ on Stack Overflow

JSONP not working in AngularJS as expected

1 Answer 1

Some development background

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Some development background

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related