Retrieving JSON from an external API with backbone

Question

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?

'opitons.url' should be 'options.url' – Werner Kvalem Vesterås Oct 01 '12 at 09:00 — Werner Kvalem Vesterås, Oct 01 '12 at 09:00
fixed. but still the same problem – AFraser Oct 01 '12 at 09:41 — AFraser, Oct 01 '12 at 09:41

score 3 · Accepted Answer · edited May 23 '17 at 10:24

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?

Thanks this was my problem. I had a basic rails api that was just returning JSON. Not a function call. — AFraser, Oct 04 '12 at 23:22

score 0 · Answer 2 · answered Oct 01 '12 at 15:46

0

Have you tried overriding the fetch method as well?

answered Oct 01 '12 at 15:46

Jordan Denison

2,649
14
14

No not yet. I'll look into it now. – AFraser Oct 01 '12 at 23:14

score 0 · Answer 3 · edited Dec 20 '12 at 11:24

0

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

edited Dec 20 '12 at 11:24

j0k

22,600
28
79
90

answered Dec 20 '12 at 11:03

Joost Faber

1

Retrieving JSON from an external API with backbone

3 Answers3