0

I am working on AngularJS 1.6.9 JSONP . My api endpoint gives projectInstance.jsonpCallback function as a response. Inside factory method i had created same callback function and i got the response. But after getting successful response its directly triggering .error() function also. I got my response but still i cant able to return that response from factory to my controller. i got console error like below

{data: false, status: 404, headers: ƒ, config: {…}, statusText: "error", …}

How to solve this issue ? How to return JSONP callback result from factory to controller?

I have attached my working plunker link below

[https://plnkr.co/edit/TidicooyborGTGHvUzJK?p=preview][1]

Here is my HTML code

<div ng-app="myapp" ng-controller="personCtrl">
  <button ng-click="doRequest()">Make JSONP request</button>
</div

Here is my js code

var app = angular.module('myapp', []);
app.config(function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        'self',
        'http://www.mocky.io/v2/**'

    ]);
});
 app.controller('personCtrl', ['$http', '$scope', '$sce', 'myService', function($http, $scope, $sce, myService) {
   $scope.doRequest = function() {
     myService.getData().then(function(data) {
        console.log("data", data);
    });
  };
 }]);

app.factory('myService', function($q, $http, $sce) {
    return {
       getData: function() {
            var q = $q.defer();
            window.projectInstance = {
                jsonpCallback: function(commandName, responseData) {
                    alert(responseData.projectSnapShot[0].projectId);

                }
            }
            var url = "https://www.mocky.io/v2/5ac61eed4a000061007e065b";
            var trustedUrl = $sce.trustAsResourceUrl(url);
            $http.jsonp(trustedUrl, {
                jsonpCallbackParam: 'projectInstance.jsonpCallback'

            }).then(function(data) {
                return data.data;
            }, function(error) {
                console.log("error",error);
                return error;
            })
            return q.promise;
        }

    }
 })

Here is my Response

projectInstance.jsonpCallback("getActiveProduct",{"totalRecords":null,"projectSnapShot":[{"projectId":"333333","projectNumber":"123456","projectStatus":"Active"}]})
Maak
  • 4,720
  • 3
  • 28
  • 39
user3760261
  • 67
  • 6
  • its working but still i got console error. because data comes as false .it triggering error function also .that's why i cant able to get my response in my controller. i got successful response in alert message i printed that – user3760261 Apr 10 '18 at 13:30
  • The response from that API is not legal JSONP. The AngularJS `$http.jsonp` service can not work with that API. To get the data use `$http.get` and `transformResponse` to strip the function call. See [this PLNKR](http://plnkr.co/edit/JXireVrJwEscHozMhY1V?p=preview). – georgeawg Apr 10 '18 at 21:25
  • I was integrated this code into my project . I have fetch data from third party library. Due to this **$http.get()** its giving **no 'access-control-allow-origin'** error. i have added header to get method .still its throwing Preflight error. Could you please help me out this problem. – user3760261 Apr 12 '18 at 05:31
  • Stackoverflow is not a code writing service. Take the code in the answer [Not a Legal JSONP API — How to get data without CALLBACK parameter](https://stackoverflow.com/questions/44751852/not-a-legal-jsonp-api-how-to-get-data-without-callback-parameter) and adapt it to work with your API. – georgeawg Apr 12 '18 at 15:27
  • Already I tried that was not working k. That's why I posted this question. I am not ask you to write any code. Whatever answer you gave it's not working .no need for your help . – user3760261 Apr 12 '18 at 16:58

0 Answers0