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

[scheid]

Hi All,

I am trying to use the Google maps /directions API (http://code.google.com/apis/maps/documentation/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/#!/api/Ext.data.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!

[mitchellsimoens]

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


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:


{
routes : [
{
step : 'Hello'
}
]
}

[scheid]

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.