1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    50
    Vote Rating
    1
    scheid is on a distinguished road

      0  

    Default using nested data (from the google directions api) in a simple (non-nested) list

    using nested data (from the google directions api) in a simple (non-nested) list


    Hi All,

    I am trying to use the Google maps /directions API (http://code.google.com/apis/maps/doc...on/directions/) with a Sench Touch 2 list component to create a list of directions from one place to another. I can get the json data from the Google maps API just fine, but am having difficulty figuring out how to tell a list component that I just want to use the list of directions from the json object.

    I see a good description of how to do nested data here: http://docs.sencha.com/touch/2-0/#!/....reader.Reader , which seems like what I would need to do for the Google directions data.

    But, can I configure the store(s) in such a way that I can still just specify a simple store object for the list component, or will I need to manually pick out the 'html_instructions' strings from the returned json object?

    Basically I just need the html_instructions strings from the steps array of routes[0].legs[0]

    Thanks for any help!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    St. Louis, MO
    Posts
    33,714
    Vote Rating
    436
    mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of

      0  

    Default


    You will need to have a store. Your template can go through nested data. Like for an array:

    Code:
    itemTpl : Ext.create('Ext.XTemplate',
        '<tpl for="routes">',
            '<div>{step}</div>',
        '</tpl>'
    )
    The for attribute to the <tpl> tag will tell the parser that it should do a for loop in the routes array. I added another <div> for each item (which is an Object) in the routes array and will have the value of the step key.

    This is a simple example that will go through a structure like this:

    Code:
    {
        routes : [
            {
                step : 'Hello'
            }
        ]
    }
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    http://www.JSONPLint.com - Source to lint your JSONP!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is almost in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    50
    Vote Rating
    1
    scheid is on a distinguished road

      0  

    Default


    Excellent, the approach of looping via the template sounds like a great solution; certainly simpler than what I was attempting. I'll give that a whirl. Thanks for the quick reply.