Angular JS: Uncaught SyntaxError: Неожиданный токен

Question

У меня есть одна ошибка в строке $http.json.

Вот мой код:

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)); 
     }); 

    }; 
} 

При нажатии на кнопку обновления, появится сообщение об ошибке в консоли:

Вы также можете here найти соответствующую услугу.

Answer 1

Я считаю, что основная проблема заключается в том, что служба, похоже, не поддерживает вызов jsonp. Независимо от того, как я называю предоставляемую вами услугу, она отвечает только стандартными результатами JSON, а не JSON, включенным в функцию обратного вызова. Ваш снимок экрана в Chrome даже показывает сырой JSON, а не ответ JSONP от службы. Если служба не поддерживает JSONP, вы не можете ее принудить, это то, что каждая служба выполняет в каждом конкретном случае в зависимости от того, как она написана. Поэтому основной причиной вашей ошибки является то, что AngularJS ожидает, что функция обратного вызова будет частью ответа, она не сможет ее найти, и вы получите ошибку, которую видите.

Я построил тест на жасмин для вашего кода, и он проходит. Это лучшее, что я могу сделать, чтобы подтвердить, что ваш код верен, и проблема выходит за рамки вашего Углового кода.

Если веб-служба фактически не отвечает ожидаемой функцией обратного вызова, связанной с JSON, вам необходимо переключиться на стандартный $ http.get() и решить любые потенциальные проблемы XSS, с которыми вы можете столкнуться по-другому.

Вы можете увидеть рабочий пример JSONP с this url. Вы заметите, что он начинается с «getdata», а затем обертывает содержимое JSON внутри этой функции(). Ваша служба не делает этого с атрибутом строки запроса обратного вызова.

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; 
}]); 

Тогда тест будет выглядеть примерно так:

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"); 
}); 
}); 

Испытание не включает фактическую функцию обратного вызова в содержании ответа, потому что основа насмешливых ручек, что упаковка и разворачивание для вас так же, как AngularJS в первую очередь, поэтому это не точный тест, но он настолько близок, насколько я могу получить то, что у нас есть.