AngularJS V1.6 JSONP is giving $http.badjsonp error

Question

I am trying to get details from an external API but got stuck in getting the JSON response.

Here is my service code:

angular.module('app').factory('appService', appService);
appService.$inject = ['$http','$sce'];
function appService($http, $sce) {
            return {
                    getData: getData
               };

    function getData() {
        //Rest Headers
        var URL = "https://www.westelm.com/services/catalog/v4/category/shop/new/all-new/index.json?callback=JSON_CALLBACK";
        var requestHeaders = {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json'
                            };


    var trustedUrl = $sce.trustAsResourceUrl(URL);

    return $http.jsonp(trustedUrl, {jsonpCallbackParam: 'callback'})
    .then(function successCallback(response) {
                        console.log("succes");
                        return response.data;
                }, function errorCallback(response) {
                        console.log("error");
                        console.log(response);
                        return response.data;
                }
    );

    }
}

I am getting below error message:

Error: [$http:badjsonp] http://errors.angularjs.org/1.6.9/$http/badjsonp?p0=https%3A%2F%2Fwww.westelm.com%2Fservices%2Fcatalog%2Fv4%2Fcategory%2Fshop%2Fnew%2Fall-new%2Findex.json%3Fcallback%3DJSON_CALLBACK

But the API is running fine. How can I hit this API to get the data?

Updated code based on given answer:

angular.module('app').factory('appService', appService);
appService.$inject = ['$http','$sce'];
function appService($http, $sce) {
    //Binding   
        return {
                    getData: getData
               };

    function jsonp_callback(data) {
        console.log("callback");
      console.log(data);
      return true;
    }

    function getData() {
        //Rest Headers
        var URL = "https://www.westelm.com/services/catalog/v4/category/shop/new/all-new/index.json";
        var requestHeaders = {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json'
                            };


    $sce.trustAsResourceUrl(URL);


    return $http.jsonp(URL, {
        jsonpCallbackParam: 'jsonp_callback'
      })
      .then(function(response) {
        console.log("succes");
        console.log(response);
      });   
    }

}

Now I am getting error as :

Error: [$sce:insecurl] http://errors.angularjs.org/1.6.9/$sce/insecurl?p0=https%3A%2F%2Fwww.westelm.com%2Fservices%2Fcatalog%2Fv4%2Fcategory%2Fshop%2Fnew%2Fall-new%2Findex.json

If an API isn't CORS enabled or serves JSONP you have to use a proxy either on your server or third party service. Neither condition seems true here — charlietfl, Apr 01 '18 at 21:16
please don't update the question with an attempt from an answer and then change the question to a new question; If the answer solved your **original error**, mark the answer as accepted, and if you are now getting a **new error**, create a new question with the new error, referencing this question as necessary. Questions with changing requirements make it very hard to figure out what is going on for new readers, and make it hard to identify what answers really apply to which part of the problem. — Claies, Apr 01 '18 at 22:16

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

You are getting the error because the URL has ?callback=JSON_CALLBACK in it, which is no longer allowed.

From the Docs:

Error: $http:badjsonp

Bad JSONP Request Configuration

Description

This error occurs when the URL generated from the configuration object contains a parameter with the same name as the configured jsonpCallbackParam property; or when it contains a parameter whose value is JSON_CALLBACK.

$http JSONP requests need to attach a callback query parameter to the URL. The name of this parameter is specified in the configuration object (or in the defaults) via the jsonpCallbackParam property. You must not provide your own parameter with this name in the configuratio of the request.

In previous versions of AngularJS, you specified where to add the callback parameter value via the JSON_CALLBACK placeholder. This is no longer allowed.

To resolve this error, remove any parameters that have the same name as the jsonpCallbackParam; and/or remove any parameters that have a value of JSON_CALLBACK.

For more information, see the $http.jsonp() method API documentation.

— AngularJS Error Reference - badjsonp

The way that JSONP is done in AngularJS was changed with V1.6.

For more information, see AngularJS Developer Reference - Migrating to V1.6 - $http.

AngularJS V1.6 JSONP is giving $http.badjsonp error

1 Answers1

Error: $http:badjsonp

Bad JSONP Request Configuration

Description