HTTP JSONP request issue with $http in AngularJS

Question

I get the bellow error when I try to use the JSONP method in angularJS.

Uncaught SyntaxError: Unexpected token : http://example.com/getSomeJson?format=jsonp&json_callback=angular.callbacks._0

What am I doing wrong here, this is my AngularJs controller with the http request:

UPDATED QUESTION DETAILS

See below with code snipit which reproduces my problem, I've commented some of the .js to illustrate what I've tried so far.

var app = angular.module('app', []); 

app.controller('mainController', ['$http', 'mainService', function($http, mainService){

 mainCtrl = this;

 mainCtrl.test = "If you can see this the mainController works"

 var promise = mainService.getJson();
 promise.then(function (data)
 {
  mainCtrl.json = data;
 });
}]);

app.service("mainService", function ($http, $q)
{
  var deferred = $q.defer();
 
    /*  
    // Method to Grab JSON that has CORs enabled:
    // JSON resource with CORs enabled
 var url = 'https://jsonplaceholder.typicode.com/posts/1';
 $http({
     method: 'GET',
     cache: true,
     url: url,
           headers: {  
           'Content-Type': 'application/json;charset=UTF-8'  
       }
 }).
 success(function(response) {
     //your code when success
     deferred.resolve(response);
     console.log('HTTP CORS SUCCESS!');
 }).
 error(function(response) {
     //your code when fails
     console.log('HTTP CORS ERROR!');
 });
*/ 


 /* */
    // Method to Grab JSON that has CORs enabled:
 // JSON resources without CORs enabled
 var url = 'http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json' // does not work?
    // var url = 'http://samcroft.co.uk/json-data/sample'  // this one works

 $http({
        method: 'jsonp',
        url: url + '?callback=JSON_CALLBACK',
    }).
 success(function(response) {
     //your code when success
     deferred.resolve(response);
     console.log('JSONP SUCCESS!');
 }).
 error(function(response) {
     //your code when fails
     console.log('JSONP ERROR!');
 });


 
 this.getJson = function ()
 {
  return deferred.promise;
 };


});

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-route.js"></script>
 <script src="app.js"></script>
</head>
<body ng-controller="mainController as mainCtrl">
 <p>{{mainCtrl.test}}</p>
 <hr />
 <p>You should also see the JSON obeject below:</p>
 {{mainCtrl.json}}
</body>
</html>

ORIGIONAL QUESTION DETAILS

app.controller('testController', ['$scope', '$http', function($scope, $http){

    var url = 'http://example.com/getSomeJson';

    $http({
        method: 'JSONP',
        url: url,
        params: {
            format: 'jsonp',
            json_callback: 'JSON_CALLBACK'
        }
    }).
    success(function(data) {
        //your code when success
        $scope.data = data;
        console.log('SUCCESS!');
    }).
    error(function(status) {
        //your code when fails
        console.log('ERROR!');
    });
}]);

When I look at the json in the chromes sources panel I see where the error is highlighted.

Any idea what I'm doing wrong? Or could it be an issue with how the API service is configured?

are you getting back json or jsonp? In order to use jsonp your json has to be wrapped in a function. See this: http://stackoverflow.com/questions/17062450/using-jsonp-method-for-http-service-in-angularjs without that, you get the error you are describing `unexpected token :` — Ronnie, Dec 08 '16 at 00:54
@Ronnie, do you know how it has to be wrapped in a function, I tried that by setting the `json_callback` param. I also tried just `callback` — Holly, Dec 08 '16 at 01:15

score 1 · Accepted Answer · edited May 23 '17 at 12:30

Here you go :-)

The code you tried with the jsonp request looks good but the url you used is not supporting the jsonp request, that's why you got an error.

If you try the same url with $http.get, it will work fine.

To support the jsonp call, the response should be wrapped with the JSON_CALLBACK () as below

JSON_CALLBACK ({ /* JSON */ })

Hence, I changed this to valid jsonp url and it worked!

https://angularjs.org/greet.php?callback=JSON_CALLBACK

You can try this url in the browser and see the response, how it is wrapped with JSON_CALLBACK ().

But if you try the below url, you can just see the json without any wrapping.

http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json?callback=JSON_CALLBACK

That's the difference to find whether the api supports jsonp.

Also, I have changed the service below with the same syntax as in another SO question answer,

https://stackoverflow.com/a/41030976/7055233

Working snippet:

var app = angular.module('app', []); 

app.controller('mainController', ['$http', 'mainService', function($http, mainService){

 mainCtrl = this;

 mainCtrl.test = "If you can see this the mainController works"

 var promise = mainService.getJson();
 promise.then(function (data)
 {
  mainCtrl.json = data;
 });
}]);

app.service("mainService", function ($http, $q)
{
    var deferred = $q.defer();
 var url = 'https://angularjs.org/greet.php';
 //var url = 'http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json';
 
    /*  
    // Method to Grab JSON that has CORs enabled:
    // JSON resource with CORs enabled
 var url = 'https://jsonplaceholder.typicode.com/posts/1';
 $http({
     method: 'GET',
     cache: true,
     url: url,
           headers: {  
           'Content-Type': 'application/json;charset=UTF-8'  
       }
 }).
 success(function(response) {
     //your code when success
     deferred.resolve(response);
     console.log('HTTP CORS SUCCESS!');
 }).
 error(function(response) {
     //your code when fails
     console.log('HTTP CORS ERROR!');
 });
*/ 


 /* */
    // Method to Grab JSON that has CORs enabled:
 // JSON resource without CORs enabled
  function getJson() {

 // $http.jsonp(url + "?callback=JSON_CALLBACK").  // this does not work either
 $http.jsonp(url + '?callback=JSON_CALLBACK').
 then(function(response) {
     //your code when success
     deferred.resolve(response);
     console.log('JSONP SUCCESS!');
 }, function(response) {
     //your code when fails
     console.log('JSONP ERROR!');
        deferred.reject(response);
 });
 
    return deferred.promise;

  }
 
 this.getJson = getJson;


});

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-route.js"></script>
 <!--<script src="app.js"></script>-->
</head>
<body ng-controller="mainController as mainCtrl">
 <p>{{mainCtrl.test}}</p>
 <hr />
 <p>You should also see the JSON obeject below:</p>
 {{mainCtrl.json}}
</body>
</html>

thanks man, I didn't realise the API has to support JSONP. What's the advantage over using CORS vs JSONP, is it just what whoever is using providing the API decides to go with? — Holly, Dec 08 '16 at 23:16
If the api is in your own server with different domain name, then you can explictly give access to your another domain with the `access-control` header and you can access it with `cors`. If a thrird party domain is not supporting `cors` but allows `jsonp` request, then you access it through `jsonp`. `cors` has much power as you can control which http method can be given access like `post` or `delete` etc. But `jsonp` is similar to `get`. — Aruna, Dec 08 '16 at 23:20
Thanks, really good to know thatI can check if JSONP is supported by going to the URL with `?callback=JSON_CALLBACK` appended. One last question if I may, would you use an AngularJS Service, Factory, or Provider to get JSON data like this? Or is it much of a muchness for all I'm trying to do? http://stackoverflow.com/q/15666048/1814446 — Holly, Dec 08 '16 at 23:25
There are few differences between them as in the link and I would recommend to go with the `factory` in your above case rather than the `service`. I will give a different link later to understand them better. — Aruna, Dec 08 '16 at 23:28

georgeawg · Answer 2 · 2016-12-08T20:28:31.253

0

JSONP callback must be specified by `jsonpCallbackParam`

BREAKING CHANGE

You can no longer use the JSON_CALLBACK placeholder in your JSONP requests. Instead you must provide the name of the query parameter that will pass the callback via the jsonpCallbackParam property of the config object, or app-wide via the $http.defaults.jsonpCallbackParam property, which is "callback" by default.

-- Added to AngularJS v1.6.0-rc.2

UPDATE

The OPs example code does not work because the http://run.plnkr.co API does not support JSONP.

JSONP is available only on some sites with an API that pre-date ACCESS-CONTROL headers.

For more information, see JSONP Demystified

edited Dec 08 '16 at 20:28

answered Dec 07 '16 at 19:26

georgeawg

48,608
13
72
95

thanks but that didn't work but we're using v1.5.9. I tried both `json_callback: 'jsonpCallbackParam'` and `callback: 'jsonpCallbackParam'` – Holly Dec 07 '16 at 19:40
I updated my question with a code snippet which reproduces the issue – Holly Dec 08 '16 at 13:21

HTTP JSONP request issue with $http in AngularJS

UPDATED QUESTION DETAILS

ORIGIONAL QUESTION DETAILS

2 Answers2

JSONP callback must be specified by `jsonpCallbackParam`

UPDATE

Linked

HTTP JSONP request issue with $http in AngularJS

UPDATED QUESTION DETAILS

ORIGIONAL QUESTION DETAILS

2 Answers2

JSONP callback must be specified by jsonpCallbackParam

UPDATE

Linked

JSONP callback must be specified by `jsonpCallbackParam`