Cannot read second value in nested json file

[kuarama1990]

For easier to understand I will show my currently code first

My Json:

{
    "success": true,
    "message": "Request retrieved with id:789",
    "data": {
        "id": 789,
        "description": "request description",
        "subject": "request subject",
        "progresses": [
            {
                "description": "progress description 1"
            },
            {
                "description": "progress description 2"
            },
            {
                "description": "progress description 3"
            }
        ]
    }
}

My store:

Ext.define('KitchenSink.store.RequestStore', {
    extend: 'Ext.data.Store',


    config: {
        autoLoad: true,
        //autoSync: true,
        model: 'KitchenSink.model.RequestModel'
    }
});

My Request Model:

Ext.define('KitchenSink.model.RequestModel', {
    extend: 'Ext.data.Model',
    
    requires: [
        'KitchenSink.model.ProgressModel'
    ],
    
    config: {
        fields: [
            {
                name: 'id'
            },
            {
                name: 'description'
            },
            {
                name: 'subject'
            }
        ],
        hasMany: {
            associationName: 'progresses',
            associationKey: 'progresses',
            model: 'KitchenSink.model.ProgressModel'
        },
        proxy: {
            type: 'ajax',
            url: 'progress.json',
            reader: {
                type: 'json',
                rootProperty: 'data'
            }
        }
    }
});

My Progress Model:

Ext.define('KitchenSink.model.ProgressModel', {
    extend: 'Ext.data.Model',
    
    config: {
        fields: [
            {
                name: 'description'
            }
        ],
        belongsTo: {
            model: 'KitchenSink.model.RequestModel'
        }
    }
});

This is my view:

Ext.define('KitchenSink.view.example27', {
    extend: 'Ext.dataview.DataView',
    xtype: 'example27',
    
    config: {
        title: 'Example 27',
        iconCls: 'bulb',        
        
        store: 'RequestStore',
        itemTpl: [
        '<div>',
        '   <div>ID</div>',
        '   <div>{id}</div>',
        '           ',
        '   <div>Subject</div>',
        '   <div>{subject}</div>',
        '           ',
        '   <div>Description</div>',
        '   <div>{description}</div>',
        '</div>',
        '',
        '<h2><b>Progress:</b></h2>',
        '<tpl for="progressmodels">',
        '    <div>',
        '        <div>{description}</div>',
        '    </div>',
        '</tpl>'
        ].join('')
    }
});

My Question:

Currently I can show the id,description and subject but In case of the progress, I want all
progressdescription to be shown, but only the first description is displayed now. Am I missing something? Can any one help me to figure it out because I stuck at this problem for a few days already. Any help would be greatly appreciated!

[sword-it]

Hi kuarama1990,
I think you should make some changes in you tpl. Review the following code:

 '<tpl for="progresses">',    
   // progresses will be the field name that you have added in RequestModel
     '<div>',
        '<div>{description}</div>',
     '</div>',
 '</tpl>'

[kuarama1990]

Hi sword-it:

Thank you for your answer but I have already tried it and this time is even worse when the result is not even display the first description.