jsonp request with AngularJS $resource

Question

I have defined the following 2 services in AngularJS. Both should return JSONP since I'm 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'm binding the result to my scope:

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

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

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

Am I missing something? What do I have to do, in order to receive proper JSON from A?

Service B returns the expected result in JSON format, while Service B returns something like: --> do you mean server A ? — maxisam, Nov 05 '12 at 15:22
sry, I had a typo here. Service A returns the error. Service B works fine — mawo, Nov 05 '12 at 15:29

score 12 · Answer 1 · answered Nov 05 '12 at 16:23

12

Your code looks confusing. Both services were called A but you use different module names. Apart from that, does it matter that your second service calls a JSON file whereas the first one doesn't?

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

answered Nov 05 '12 at 16:23

F Lekschas

12,481
10
60
72

@mawo So the problem is solved or does it still exist? I would then check if the error depends on the JSON resource you are querying or if its AngularJS. – F Lekschas Nov 07 '12 at 17:11
problem solved. it turned out that the server did not return valid jsonp. thanks anyway! – mawo Nov 07 '12 at 20:58
how does one inject it when its coded this way, i.e. im trying to call it in my controller, but i cant just `controller(abc', ['$scope','app.services', funcion` – blamb Aug 11 '15 at 01:00
ok, i thnjk i know where im going wrong there, i was trying to put `services`in the list in controller() instead of the list in module(), however im cointinually getting errors on the file app.js which contains my controller, where i try to use this module. can you give an example of how you call and use it in the controlle rplease, for your module suggestion? @F Lekschas – blamb Aug 11 '15 at 01:35

jsonp request with AngularJS $resource

1 Answers1

Linked