Sencha Touch: How to get data from complex JSON objects

Question

I am not able retrieve records from complex json objects but i am able to get the data when using an TPL.

Please see the below example codes:

JSON:

{
"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": "false" 
            }
        ] 
    } 
]

Model:

Ext.regModel("TopModel", 
{
    fields: [
        { name: 'title', type: 'string' },
        { name: 'id', type: 'string' },
    ],
    hasMany: [
        { model: 'SubModel', name: 'items' }
    ],
    proxy: {
    type: 'ajax',
    url : 'test/lists.json',
        actionMethods: {
            create: 'POST',
            destroy: 'POST',
            read: 'POST',
            update: 'POST'
    },
    reader: {
        type: 'json',
        root: function(data) {
                    return data.lists || [];
                }
    }
   }
});

Ext.regModel("SubModel", 
{
    fields: [
            { name: 'text', type: 'string'},
        { name: 'listId', type: 'string'},
        { name: 'id', type: 'string'},
        { name: 'leaf', type: 'string'}
    ]
});

In my View file, i have defined the store as below.

this.stores = new Ext.data.Store({
            clearOnPageLoad: false,
        autoLoad:true,
            model:'TopModel',
        getGroupString: function(record) {
        return record.get('leaf');
            }
});
});

I am not able to retrieve the values for record.get('leaf') as this refers to the child model items. When I tried to print it, it prints as undefined.

How to access the child attributes? Here 'items' is listed as an array.

I tried to display the data using list as below. All the records are displayed but the problem is that it is picked as one whole item instead of separate list for each item.

var list = new Ext.List({
    cls: 'big-list',
    grouped : true,
    emptyText: '<div>No data found</div>',
    itemTpl: ['<div><tpl for="items">',
        '<div>',
        '{id} {text}',
        '</div>',
        '</tpl></div>',
        ],
    store: this.stores,
    listeners: {
        itemtap: this.onListItemTap,
        scope: this
    }
});

Kindly help me on how to get the list items to be displayed as individual records.

Do you want to display all TopModels or all SubModels in that grid grouped by "leaf"? this.stores is according to your code a "TopModel"-store but you want to display SubModels. Thanks for more information. — Philipp
the whole template is seen as an 'item' aka in your case the group. also you can set root as 'lists' instead of the function — Dawesi

vadher jitendra vadher jitendra · Accepted Answer · 2014-01-07T12:13:06

you can use online json parser(http://json.parser.online.fr/) to parse json xml from parser data you easily seprate objects and arrays and you get all data which are require for you..i hope this help you

Sencha Touch: How to get data from complex JSON objects

1 Answers