Sencha Touch - Accessing Associated-Model Store JSON via Nested Looping

Question

I've been lurking on Stack Overflow for quite some time now, and have found quite a number of very helpful answers. Many thanks to the community! I hope to be able to contribute my own helpful answers before too long.

In the meantime, I have another issue I can't figure out. I am using Sencha Touch to create a Web-based phone app and I'm having trouble using a nested loop to iterate through some JSON. I can grab the first level of data, but not the items nested within that first level. There is a somewhat related ExtJS thread, but I decided to create my own since ExtJS and Touch diverge in subtle yet important ways. Anyway, here is some code to show where I am:

JSON (truncated - the JSON is PHP/MYSQL-generated, and there are currently actually three sub levels with "title", all of which I can access. It's the sub level "items" through which I can't iterate):

{
"lists": [
    {
        "title": "Groceries",
        "id": "1",
        "items": [
            {
                "text": "contact solution - COUPON",
                "listId": "1",
                "id": "4",
                "leaf": "true" 
            },
            {
                "text": "Falafel (bulk)",
                "listId": "1",
                "id": "161",
                "leaf": "true" 
            },
            {
                "text": "brita filters",
                "listId": "1",
                "id": "166",
                "leaf": "true" 
            }
        ] 
    } 
]

}

Store:

var storeItms = new Ext.data.Store({
    model: 'Lists',
    proxy: {
        type: 'ajax',
        method: 'post',
        url : LIST_SRC,
        extraParams: {action: 'gtLstItms'},
        reader: {
            type: 'json',
            root: 'lists'
        }
    }
});

Working Loop:

storeItms.on('load', function(){
    var lstArr = new Array();
    storeItms.each(function(i) {
        var title = i.data.title;
        lstArr.push(i.data.title);
    });
    console.log(lstArr);
});

Non-working Nested Loop:

storeItms.on('load', function(){
    var lstArr = new Array();
    storeItms.each(function(i) {
        var title = i.data.title;
        var id = i.data.id;
        title.items.each(function(l) {
            lstArr.push(l.data.text);
        });
    });
    console.log(lstArr);
});

The non-working nested loop gives me the error "Cannot call method 'each' of undefined", in reference to 'title.items.each...'

I suspect this is because I've not set title to be a key to set up a key:value pair, so it just sees a list of strings...but I'm kind of at a loss.

I should mention that the store is populated via two Models that have been associated with one another. I know that the Store can access everything because I am able to do nested iterating via an XTemplate.

Any help will be much appreciated and hopefully returned to the community in kind before too long!'

-Eric

James Pearce James Pearce · Accepted Answer · 2011-01-28T23:38:50

Eric, why the loop?

If your models are associated in the same way that the JSON is nested, then you should just be able to set autoLoad:true on the store, sit back and enjoy.

Anyway, on the assumption that you are needing these arrays for some other unrelated reason, the problem is that you are trying .each on

i.data.title.items

Surely you should be iterating through

i.data.items

Also, if the object is a model, you can use .get() instead of the data object:

var title = i.get('title);

Sencha Touch - Accessing Associated-Model Store JSON via Nested Looping

3 Answers