1. #1
    Ext User
    Join Date
    Jul 2010
    Posts
    4
    Vote Rating
    0
    colincalnan is on a distinguished road

      0  

    Default JSONP returns data that cannot be output in TPL

    JSONP returns data that cannot be output in TPL


    I get some JSON data back as so (a list of bus stops)...

    Code:
    [[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..

    Code:
    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?

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

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,642
    Vote Rating
    582
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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:

    Code:
    myFunc(['a'], ['b'], ['c'])
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User
    Join Date
    Jul 2010
    Posts
    4
    Vote Rating
    0
    colincalnan is on a distinguished road

      0  

    Default


    Quote Originally Posted by evant View Post
    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:

    Code:
    myFunc(['a'], ['b'], ['c'])
    Thanks.

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

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,642
    Vote Rating
    582
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    What do you mean? Are you saying the data loads correctly?
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Ext User
    Join Date
    Jul 2010
    Posts
    4
    Vote Rating
    0
    colincalnan is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,642
    Vote Rating
    582
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  7. #7
    Ext User
    Join Date
    Jul 2010
    Posts
    4
    Vote Rating
    0
    colincalnan is on a distinguished road

      0  

    Default


    Evan,

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

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

    Am I missing something here?

  8. #8
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,642
    Vote Rating
    582
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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:

    Code:
    myWrapper(data)
    Have a look at the twitter example, specifically, what the data looks like when it comes back.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Similar Threads

  1. [FIXED] Auto load data into Panel (using a tpl)
    By Hani79 in forum Ext 3.x: Help & Discussion
    Replies: 7
    Last Post: 30 Jun 2014, 3:28 PM
  2. Simple text output of JSON store data
    By squeakingsneaker in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 26 Feb 2010, 8:22 AM
  3. is js in data evaluated at tpl.overwrite(panel.body, data)
    By mxu in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 29 Nov 2007, 6:50 AM
  4. tpl.overwrite(el, data) vs el.update(data, true)
    By mxu in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 28 Nov 2007, 2:20 PM

Thread Participants: 1

Tags for this Thread