CODEWITHSUNDEEP
ajaxjsonapibackbone.js
AFraser
AFraser

Reputation: 1006

Retrieving JSON from an external API with backbone

I'm new to backbone.js and I've read other solutions to similar problems but still can't get my example to work. I have a basic rails api that is returning some JSON from the url below and I am trying to access in through a backbone.js front end. Since they are one different servers I think I need to use a 'jsonp' request. I'm currently doing this by overriding the sync function in my backbone collection.

Api url: http://guarded-wave-4073.herokuapp.com/api/v1/plans.json

sync: function(method, model, options) {
    options.timeout = 10000;
    options.dataType = 'jsonp';
    options.url = 'http://guarded-wave-4073.herokuapp.com/api/v1/plans.json'
    return Backbone.sync(method, model, options);
}

To test this I create a new 'plans' collection in my chrome console using "plans = new Plans()" and then "plans.fetch()" to try and get the JSON.

When I call plans.models afterwards I still have an empty array and the object that returns from plans.fetch() doesn't seem to have any json data included.

Any ideas where I'm going wrong?

Upvotes: 2

Views: 1150

Answers (3)

Joost Faber
Joost Faber

Reputation: 1

You should add ?callback=? to your api url in order to enable jsonp

Upvotes: 0

TYRONEMICHAEL
TYRONEMICHAEL

Reputation: 4244

I have had the same problem before. You should not have to override your sync method.

Taken from Stackoverflow Answer

"The JSONP technique uses a completely different mechanism for issuing HTTP requests to a server and acting on the response. It requires cooperating code in the client page and on the server. The server must have a URL that responds to HTTP "GET" requests with a block of JSON wrapped in a function call. Thus, you can't just do JSONP transactions to any old server; it must be a server that explicitly provides the functionality."

Are you sure your server abides to the above? Test with another compatible jsonp service (Twitter) to see if you receive results?

Upvotes: 3

Jordan Denison
Jordan Denison

Reputation: 2727

Have you tried overriding the fetch method as well?

Upvotes: 0

Related Questions