PDA

View Full Version : JSONP returns data that cannot be output in TPL



colincalnan
11 Jul 2010, 8:09 PM
I get some JSON data back as so (a list of bus stops)...



[[50119, "Macdonald St @ W 21 Av"], [51269, "Macdonald St @ W 22 Av"], [51270, "Macdonald St @ W 20 Av"], [50118, "Macdonald St @ W 19 Av"], [50120, "Macdonald St @ W 23 Av"], [51268, "Macdonald St @ W 24 Av"], [51271, "Macdonald St @ W 18 Av"], [50121, "Macdonald St @ Alamein Av"], [50113, "Macdonald St @ W 16 Av"], [61090, "W 16 Av @ Macdonald St"]]

How do I output this in the tpl.

From the code example I have this..


Ext.util.JSONP.request({
url: 'http://m.translink.ca/api/stops/?f=json&lng=-123.16789&lat=49.25344',
callbackKey: 'callback',
callback: function(data) {
//data = data.results;
// Update the tweets in timeline
timeline.update(data);

// Add points to the map
for (var i = 0, ln = data.length; i < ln; i++) {
var stop = data[i];
}
}
});

How do I get the data received above to output in my template?


tpl: [
'<tpl for=".">',
'<div class="stop">{data}',
'</div>',
'</tpl>'
]

evant
11 Jul 2010, 8:42 PM
The short answer is you can't do that. JSONP is a hack around normal Ajax, whereby it inserts a script tag into the document and executes the data passed.

JSONP expects something like:



myFunc(['a'], ['b'], ['c'])

colincalnan
12 Jul 2010, 7:49 AM
The short answer is you can't do that. JSONP is a hack around normal Ajax, whereby it inserts a script tag into the document and executes the data passed.

JSONP expects something like:



myFunc(['a'], ['b'], ['c'])


Thanks.

So how can I then get that data to appear on the page?

evant
12 Jul 2010, 7:51 AM
What do you mean? Are you saying the data loads correctly?

colincalnan
12 Jul 2010, 7:54 AM
Sorry, Sencha Noob here. I guess the first questions would be:

1. How do I debug something like this?
2. How can I get data from this remote address using Sencha and then output it in a template similar to what I have done above?

I just want to get the JSON data back from the address, and loop through it, outputting it to screen.

Thanks.

evant
12 Jul 2010, 8:01 AM
As I said above, if you're loading the data from a remote source, you need to have it call some local function on the page, since cross domain Ajax requests aren't allowed.

More info here http://en.wikipedia.org/wiki/JSON#JSONP

colincalnan
12 Jul 2010, 8:10 AM
Evan,

I thought it was calling a local function - callbackKey: 'callback'

and then that function was "callback: function(data) {"

Am I missing something here?

evant
12 Jul 2010, 8:22 AM
JSONP works by inserting a script tag. So to load data cross domain, you need some way of indicating that the data is loaded.

In this case, it's a function, so the data returned from the server needs to look something like:



myWrapper(data)


Have a look at the twitter example, specifically, what the data looks like when it comes back.