Avoid using this unauthorized JSONP API - Ways to retrieve information without using the CALLBACK parameter

Question

Avoid using this unauthorized JSONP API - Ways to retrieve information without using the CALLBACK parameter

Dealing with Angular 1.6 Error when Using JSONP despite Receiving a 200 Ok Response from URL

I encountered an issue where I need to fetch some data from a JSONP endpoint, and although the response seems to contain the expected data, Angular is still throwing an error.

var url = "https://careers.icims.com/jobs-api/"

var trustedUrl = $sce.trustAsResourceUrl(url);

$http.jsonp(trustedUrl, {jsonpCallbackParam: 'jobs'}).then(function(res){

    console.log(res); // unfortunately, this line never gets executed

});

The error message that I am seeing is:

Uncaught ReferenceError: jobs is not defined
    at jobs-api?jobs=angular.callbacks._0:1

where jobs refers to my JSONP callback prefix.

However, if we inspect the response closely, we can see that it includes the JSONP script: https://i.sstatic.net/pR1ci.jpg

Can anyone shed light on why this exception is happening and suggest a solution to overcome it? My current Angular version is 1.6.0.

javascript angularjs json jsonp

Answer 1

Answer №1

Warning: Unauthorized JSONP API

The API located at that URL does not comply with JSONP standards.

It can only be accessed through a risky service:

app.service("unsafeAPI", function($q) {
  this.get = get;
  
  function get(funcName, url) {
    var dataDefer = $q.defer();
  
    window[funcName] = function(x) {
      dataDefer.resolve(x);
    }

    var tag = document.createElement("script");
    tag.src = url;

    document.getElementsByTagName("head")[0].appendChild(tag);
    
    return dataDefer.promise;
  }
})

Proceed with caution when using this API.

View the Live DEMO

angular.module("app",[])
.service("unsafeAPI", function($q) {
  this.get = get;
  
  function get(funcName, url) {
    var dataDefer = $q.defer();
  
    window[funcName] = function(x) {
      dataDefer.resolve(x);
    }

    var tag = document.createElement("script");
    tag.src = url;

    document.getElementsByTagName("head")[0].appendChild(tag);
    
    return dataDefer.promise;
  }
})

.run(function($rootScope, unsafeAPI) {
    var url = "https://careers.icims.com/jobs-api/";
    unsafeAPI.get('jobs',url).then(function(data) {
      $rootScope.data = data;
    })
})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app">
    <h1>Unsafe API Demo</h1>
    <pre>{{data | json}}</pre>
  </body>

Answer 2

Warning: Unauthorized JSONP API

The API located at that URL does not comply with JSONP standards.

It can only be accessed through a risky service:

app.service("unsafeAPI", function($q) {
  this.get = get;
  
  function get(funcName, url) {
    var dataDefer = $q.defer();
  
    window[funcName] = function(x) {
      dataDefer.resolve(x);
    }

    var tag = document.createElement("script");
    tag.src = url;

    document.getElementsByTagName("head")[0].appendChild(tag);
    
    return dataDefer.promise;
  }
})

Proceed with caution when using this API.

View the Live DEMO

angular.module("app",[])
.service("unsafeAPI", function($q) {
  this.get = get;
  
  function get(funcName, url) {
    var dataDefer = $q.defer();
  
    window[funcName] = function(x) {
      dataDefer.resolve(x);
    }

    var tag = document.createElement("script");
    tag.src = url;

    document.getElementsByTagName("head")[0].appendChild(tag);
    
    return dataDefer.promise;
  }
})

.run(function($rootScope, unsafeAPI) {
    var url = "https://careers.icims.com/jobs-api/";
    unsafeAPI.get('jobs',url).then(function(data) {
      $rootScope.data = data;
    })
})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app">
    <h1>Unsafe API Demo</h1>
    <pre>{{data | json}}</pre>
  </body>

Avoid using this unauthorized JSONP API - Ways to retrieve information without using the CALLBACK parameter

Dealing with Angular 1.6 Error when Using JSONP despite Receiving a 200 Ok Response from URL

Answer №1

Warning: Unauthorized JSONP API

View the Live DEMO

Similar questions

Steps for releasing a third-party library that is compatible with both Angular 2 and Angular 4

My program is throwing an error due to invalid JSON format

Tips for retrieving sent data from a jQuery Ajax request on XHR error

Restricting JSON output using date and time values within the JSON object

The jQuery function may encounter issues when trying to target elements within an appended HTML form

Exporting SSRS reports in JSON format is a breeze

I am on the lookout for a spell-checking tool that can seamlessly integrate with both Django and Python 2.7

Angular HttpClient not recognizing hashtag

Utilizing ng-model on a pair of inputs to achieve synchronized values

What is the best way to use jest/enzyme to determine if a method from an imported class was called in a component

What are the steps for implementing secure login and authorization process in Oracle's RESTful web services?

What is the recommended TypeScript type for setting React children?

The duration of user engagement on a website with an embedded iframe

Unable to input characters consecutively into the text field because it is being displayed as a distinct function within the component

What exactly occurs when a "variable is declared but its value is never read" situation arises?

Using Typescript to set a variable's value from an asynchronous function

Adding color dynamically to text within ion-card based on a regex pattern

How to output a string in jQuery if it includes a certain character?

Tips for Serializing and Deserializing an XML Document using Javascript

There are various buttons available for users to choose from on a page. How can I retrieve this selection data in JSON format?