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.

Answer 1

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