Angular JS: Uncaught SyntaxError: Unexpected token

Question

I have one error in $http.json line.

Here is my code:

var myApp = angular.module('myApp', ["ionic"]);

myApp.service("Pressed", ["$http", "$log", Pressed]);
myApp.controller("AppCtrl", ["$scope", "Pressed", "$log", AppCtrl]);



function AppCtrl($scope, Pressed, $log){

    $scope.refresh = function(){
        Pressed.getBlogs();
    }
}

function Pressed($http, $log) {
    this.getBlogs = function() {

        $http.jsonp('http://oasisgroups.com/oApp/product.php?callback=JSON_CALLBACK()')
        .success(function(result){
        $log.info(JSON.stringify(result.product));
        });

    };
}

When I click on refresh button, an error is displayed in the console:

You can also here find the respective service.

The error page is not available. Please update the post with a screenshot, instead. — teobais, Feb 15 '16 at 10:10
ok... i added screenshot of error page and add link of services — Sagar Chavada, Feb 15 '16 at 17:17
i correct it.. but still same error... http://127.0.0.1:53358/myApp/myApp/www/index.html this link availible for 2 hour only — Sagar Chavada, Feb 15 '16 at 17:36
You probably need to replace `JSON_CALLBACK()` by `JSON_CALLBACK`. Also, it seems your server doesn't return JSONP, but simply JSON. Use $http.get() instead. — JB Nizet, Feb 15 '16 at 17:46
i tried both things.. its not working... even i tried angular.callback._0. its not working.. is there any new method to solve my prob... — Sagar Chavada, Feb 15 '16 at 17:54
Possible duplicate of [Unexpected token colon JSON after jQuery.ajax#get](http://stackoverflow.com/questions/24311023/unexpected-token-colon-json-after-jquery-ajaxget) — Quentin, Feb 16 '16 at 16:08

tokkov · Accepted Answer · 2016-02-16T16:06:19.637

I believe the main issue is that the service doesn't seem to support a jsonp call. No matter how I call the service you provided it only responds with standard JSON results and not with the JSON wrapped in the callback function. Your screen shot of Chrome even shows the raw JSON, not JSONP response from the service. If a service doesn't support JSONP you can't force it to, that is something each service does on a case by case basis depending on how it is written. So the root cause of your error is that AngularJS is expecting the callback function to be part of the response, it cannot find it, and you get the error you are seeing.

I have constructed a jasmine test for your code and it passes. That is the best I can do to confirm that your code is correct and the issue is outside of your Angular code.

Unless the web service actually responds with the expected callback function wrapping the JSON, you need to switch to a standard $http.get() and deal with any potential XSS issues that you might encounter in a different way.

You can see a working JSONP example with this url. You will note that it starts with "getdata" and then wraps the JSON content inside that function's (). Your service is not doing that with the callback query string attribute.

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

myApp.controller("AppCtrl", ["$scope", "Pressed", "$log", function ($scope, Pressed, $log) {
$scope.refresh = function () {
    Pressed.getBlogs($scope);
}
}]);

myApp.service('Pressed', ['$http', '$log', function ($http, $log) {
var pressed = {};

pressed.getBlogs = function ($scope) {
    $http.jsonp('http://oasisgroups.com/oApp/product.php?callback=JSON_CALLBACK')
        .success(function (data,status,headers,config) {
            $log.info(JSON.stringify(data));
            $scope.products = data.product;
            console.log('Found ' + data.product.length + ' products');
        })
        .error(function () {
            console.log("Error during http get request.");
        });
};

return pressed;
}]);

Then the test would look something like this:

describe('bad_jsonp', function () {
var service, scope;

beforeEach(module('myApp'));

beforeEach(angular.mock.inject(function ($rootScope) {
    scope = $rootScope.$new();
}));

beforeEach(inject(function($httpBackend, _Pressed_) {
    backend = $httpBackend;
    service = _Pressed_;
}));

it('test that service response contains the attribute product', function () {
    backend.expect("JSONP","http://oasisgroups.com/oApp/product.php?callback=JSON_CALLBACK").
        respond(200,
            {"success":1,"msg":"success","product":[{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/160112WP_20160112_17_57_49_Pro__1452604019_113.193.193.146.jpg","title":"Shreenath Ji"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/1601124e199090-c030-4f01-be11-c5140cf20273__1452603831_113.193.193.146.jpg","title":"Acrylic Jali"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/1601128a718e95-7df0-4189-876e-204b715cf90d__1452603868_113.193.193.146.jpg","title":"Acrylic Jali"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/16011229b095c9-b897-4942-831f-92073f527374__1452603895_113.193.193.146.jpg","title":"Wooden Decorative"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/16011255ce3155-3956-4cfb-8dd5-39021713d350__1452603914_113.193.193.146.jpg","title":"Acrylic Jali Oranage"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/160112WP_20160112_17_33_11_Pro__1452603994_113.193.193.146.jpg","title":"Acrylic Jali Green"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/160112607c733c-8dd5-442c-a584-6179339abb0e__1452603974_113.193.193.146.jpg","title":"Acrylic Jali White"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/160112300cca44-e783-48f7-b035-59ef0529ad53__1452603956_113.193.193.146.jpg","title":"Wooden Decorative"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/16011279e7c001-6663-4dfe-91ce-70cc87e6ca2d__1452603940_113.193.193.146.jpg","title":"Wooden Decorative"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/160112WP_20160112_17_58_35_Pro__1452604069_113.193.193.146.jpg","title":"Corian Design "},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/160112WP_20160112_17_59_14_Pro__1452604098_113.193.193.146.jpg","title":"Corian Design "},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/160112WP_20160112_18_00_34_Pro__1452604138_113.193.193.146.jpg","title":"AalaBuster"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/160112WP_20160112_18_01_20_Pro__1452604320_113.193.193.146.jpg","title":"AalaBuster"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/160112WP_20160112_18_02_08_Pro__1452604343_113.193.193.146.jpg","title":"Corian wash basin"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/160112WP_20160112_18_02_25_Pro__1452604370_113.193.193.146.jpg","title":"3d Corian Design"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/160112WP_20160112_18_02_43_Pro__1452604393_113.193.193.146.jpg","title":"3d Corian Design"},{"image":"http:\/\/oasisgroups.com\/images\/oacgallery\/160112WP_20160112_18_03_13_Pro__1452604424_113.193.193.146.jpg","title":"3d Wooden Decorative"}]}
        );

    expect(service).toBeDefined();

    service.getBlogs(scope);
    backend.flush();

    console.log(scope.products);

    var products = scope.products;
    expect(products.length).toBe(17);
    expect(products[0].title).toBe("Shreenath Ji");
});
});

The test doesn't include the actual callback in the response content because the mocking framework handles that wrapping and unwrapping for you just like AngularJS does in the first place, so it isn't an exact test but it is as close as I can get with what we have.

Angular JS: Uncaught SyntaxError: Unexpected token

1 Answers1