AngularJS Uncaught SyntaxError: Unexpected token :

Question

Okay, iI tried several attempts and nothing is working

Checked the following answers

questions/26262235/jsonp-returning-uncaught-syntaxerror-unexpected-token-angularjs-routingnu
questions/16344933/angularjs-jsonp-not-working/16352746#16352746
questions/19269153/jsonp-request-in-angularjs-doesnt-work-like-in-jquery
questions/19669044/angularjs-getting-syntax-error-in-returned-json-from-http-jsonp

And non of them solved my problem.

I would like to use Giant Bombs API: http://www.giantbomb.com/api/

Yes i took a look at the forum posts nothing works.

$http({
        method: 'JSONP',
        url: 'http://www.giantbomb.com/api/game/3030-4725/',
        params: {
            api_key: $rootScope.api_key,
            format: 'jsonp',
            callback: 'JSON_CALLBACK'
        }
    }).then(function (data) {
        $scope.data = data;
        console.log($scope.data)
    });

Error

Uncaught SyntaxError: Unexpected token :

Could someone give me a hint?

Because its really frustrating, I even wrapped the data with JSON_CALLBACK() same result

Can you add complete code where the error is, you can get hint from the console — Tushar, Oct 31 '15 at 12:08
I suppose You checked if the code itself doesn't have the SyntaxError. So the "unexpected colon" will be in the response. Jsonp is javascript object encapsulate into the calling of function. Please provide code of response. — Víťa Plšek - angular.cz, Oct 31 '15 at 12:15

score 1 · Accepted Answer · answered Oct 31 '15 at 12:30

The reason of this is, that angular requires service returns jsonp, but it doesn't

Your code does this request:

http://www.giantbomb.com/api/game/3030-4725/?json_callback=angular.callbacks._0&format=jsonp

And in network console you can see the response:

{"error":"'jsonp' format requires a 'json_callback' arguement","limit":0,"offset":0,"number_of_page_results":0,"number_of_total_results":0,"status_code":103,"results":[]}

so the parameter for callback should be named: json_callback, not just callback.

$http({
        method: 'JSONP',
        url: 'http://www.giantbomb.com/api/game/3030-4725/',
        params: {
            format: 'jsonp',
            json_callback: 'JSON_CALLBACK'
        }
    })

After that I can see in response error about api key - this will probably be ok in your instance. So I uppose you will get correct JSONP

http://www.giantbomb.com/api/game/3030-4725/?json_callback=angular.callbacks._0&format=jsonp

{"error":"Invalid API Key","limit":0,"offset":0,"number_of_page_results":0,"number_of_total_results":0,"status_code":100,"results":[]}

The other problem would be that your function in then doesn't get data directly, but response, which is objects which carry data, so:

.then(function (response) {
        $scope.data = response.data;
        console.log(response.data)
    });

The last one recommendation, do not use $scope in controllers, rather use "controller as" syntax.

AngularJS Uncaught SyntaxError: Unexpected token :

1 Answers1

Linked