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
– maxisam, Commented Nov 5, 2012 at 15:22
sry, I had a typo here. Service A returns the error. Service B works fine — mawo
– mawo, Commented Nov 5, 2012 at 15:29

F Lekschas · Accepted Answer · 2012-11-05 16:23:04Z

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 5, 2012 at 16:23

F Lekschas

12.9k12 gold badges67 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

F Lekschas Over a year ago

@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.

mawo Over a year ago

problem solved. it turned out that the server did not return valid jsonp. thanks anyway!

blamb Over a year ago

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 Over a year ago

ok, i thnjk i know where im going wrong there, i was trying to put servicesin 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

Collectives™ on Stack Overflow

jsonp request with AngularJS $resource

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related