1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    63
    Vote Rating
    2
    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
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      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
    ________________
    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 in print!

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

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    63
    Vote Rating
    2
    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.

Thread Participants: 1