CODEWITHSUNDEEP
jqueryangularjsjsonweb-servicescross-domain
Vikrant Durve
Vikrant Durve

Reputation: 11

Getting "Uncaught SyntaxError: Unexpected token :" when trying to consume cross domain webservice using jsonp in AngularJS

Hello I'm quite new to Angular js. I am trying to consume the web-service which is designed to return data in JSON format, I'm calling it from the local js file on localhost(WAMP). Webservice is designed in .net platform. I have used jsonp as I am hitting cross-domain webservice.

My AngularJs code is like this:

var app = angular
                .module("myModule",[])
                .controller("myController",function($scope,$http,$sce,$log){
                    var url = "http://somevalid_api_url";
                    url=$sce.trustAsResourceUrl(url);
                    $http.jsonp(url, {jsonpCallbackParam: 'callback'})
                    .then(function(data){
                        console.log(data);
                    });

                });

The response for api is like this:

{  
   "deviceId":null,
   "id":1,
   "isNewUser":"\u0000",
   "message":"Sucess",
   "playlistId":0,
   "userId":0,
   "privacyPolicy":"<p style=\"box-sizing: border-box; margin: 0px 0px 12.5px; color: rgb(0, 0, 0); font-family: wf_segoe-ui_normal, Tahoma, Verdana, Arial, sans-serif; font-size: 16px;\">\u000d\u000a\u0009Your privacy is important to us. This privacy statement explains what personal data we collect from you and how we use it. We encourage you to read the summaries below and to click on &quot;Learn More&quot; if you&#39;d like more information on a particular topic.<\/p>\u000d\u000a<p style=\"box-sizing: border-box; margin: 0px 0px 12.5px; color: rgb(0, 0, 0); font-family: wf_segoe-ui_normal, Tahoma, Verdana, Arial, sans-serif; font-size: 16px;\">\u000d\u000a\u0009The product-specific details sections provide additional information relevant to particular Microsoft products. This statement applies to the Microsoft products listed below, as well as other Microsoft products that display this statement. References to Microsoft products in this statement include Microsoft services, websites, apps, software and devices.<\/p>\u000d\u000a",
   "termAndCondition":"<p>\u000d\u000a\u0009<span style=\"color: rgb(51, 51, 51); font-family: Georgia, &quot;Times New Roman&quot;, serif; font-size: 18px;\">Terms and Conditions are a set of rules and guidelines that a user must agree to in order to use your website or mobile app. It acts as a legal contract between you (the company) who has the website or mobile app and the user who access your website and mobile app.<\/span><\/p>\u000d\u000a",
   "termsId":1
}

In browser's console getting following error:

Uncaught SyntaxError: Unexpected token :

When I click on the error I get following details : Image of details in console

Which means it is having some problem from the colon ( : ) which is immediately after "deviceId".

I have tried solutions from the following links but didn't worked for me:

parsing JSONP $http.jsonp() response in angular.js

AngularJS cross-domain requests using $http service

Cross-domain $http request AngularJS

AngularJS Uncaught SyntaxError: Unexpected token :

Have tried on two versions of Angualr Js v1.6.2 and v1.5.1, but failed on both.

I dint understood anything from following solution : Angularjs JSONP not working

I will be really grateful if anyone can help or guide me through this.

Upvotes: 1

Views: 304

Answers (1)

yuc
yuc

Reputation: 508

Because it's not a JSONP format, a JSONP response will be look like this:

mycallback({ user: 'wang' });

not like the normal JSON:

{ user: 'wang' }

You will need a server side to do JSONP, not only Front-End coding.

Upvotes: 1

Related Questions