Jsonp request with AngularJS $ resource

Question

I defined the following 2 services in AngularJS. Both should return JSONP since I am doing a cross-domain request.

Service A:

angular.module('ServiceA', ['ngResource']). factory('A', function ($resource) { return $resource('url/offers', {}, { get: { method: 'JSONP', params: {property_code: 'DEMO_ERFOLGX', adults: '2', callback: 'JSON_CALLBACK'} } } ); }); 

Service B:

 angular.module('ServiceB', ['ngResource']). factory('B', function ($resource) { return $resource('url/search.json', {}, { get: { method: 'JSONP', params: {property_code: 'DEMO_ERFOLGX', adults: '2', callback: 'JSON_CALLBACK'} } } ); }); 

In my controller, I bind the result to my area:

 $scope.foo = A.get(); $scope.bar = B.get(); 

According to my console.log () output, B returns the expected result in JSON format, and A returns something like:

 SyntaxError: invalid label {"DEMO_ERFOLGX":{"offers":[{"checkin":"2012-12-01","checkout" 

Am I missing something? What do I need to do to get the correct JSON from A?

Answer 1

Your code looks confusing. Both services were called A, but you use different module names. Also, does it matter that your second service calls the JSON file and the first does not?

I would try the following:

 angular.module('app.services', ['ngResource']) .factory('ServiceA', function ($resource) { return $resource('url/offers', {}, { get: { method: 'JSONP', params: {property_code: 'DEMO_ERFOLGX', adults: '2', callback: 'JSON_CALLBACK'} } } ); }); .factory('ServiceB', function ($resource) { return $resource('url/search.json', {}, { get: { method: 'JSONP', params: {property_code: 'DEMO_ERFOLGX', adults: '2', callback: 'JSON_CALLBACK'} } } ); });