I encountered the following error message while attempting to utilize the JSONP method in AngularJS:
Uncaught SyntaxError: Unexpected token : http://example.com/getSomeJson?format=jsonp&json_callback=angular.callbacks._0
Could someone please assist me in identifying what I may be doing incorrectly here? Below is my AngularJs controller code along with the HTTP request:
UPDATED QUESTION DETAILS
Refer to the code snippet below which showcases the issue I am facing. Certain portions of the .js have been commented out to demonstrate the troubleshooting steps I have taken thus 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 resources without CORs enabled
var url = 'http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json'
$http({
method: 'jsonp',
url: url + '?callback=JSON_CALLBACK',
}).
success(function(response) {
deferred.resolve(response);
console.log('JSONP SUCCESS!');
}).
error(function(response) {
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 object below:</p>
{{mainCtrl.json}}
</body>
</html>ORIGINAL 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) {
$scope.data = data;
console.log('SUCCESS!');
}).
error(function(status) {
console.log('ERROR!');
});
}]);
Upon inspecting the JSON via Chrome's sources panel, I noticed where the error was highlighted. https://i.sstatic.net/gHWOQ.png
Any insights on what might be causing the issue? Could it potentially be a problem with how the API service is set up?