How to format returned string value of JSON with Ext JS?

Question

I'm getting this JSON below and need to format code field' string value to some other text. For example 'TOTALPENDING' will render as "Pending Bonus" and 'TOTALLEFT' to "Current Bonus". How can i achieve to this?

{
    "success": true,
    "msg": "OK",
    "count": 5,
    "data": [
        {
            "bookerid": 103083420,
            "code": "TOTALPENDING",
            "totalcount": 1
        },
        {
            "bookerid": 103083420,
            "code": "TOTALLEFT",
            "totalcount": 2
        },

Data fetchs through ViewModel stores;

 stores: {
        bookStore: {
            model: 'MyApp.model.base.BookStatModel',
            autoLoad: true,
            session: true,
            proxy: {
                url: MyApp.Globals.getUrl() + '/bonustrans/stat/book',
                type: 'ajax',
                reader: {
                    type: 'json',
                    rootProperty: 'data'
                }
            }
        },

Answer 1

For this you need to use convert config inside of model.

In this FIDDLE, I have created a demo using grid, store and model. I hope this will help/guide you to achieve your requirement.

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.define('Book', {
            extend: 'Ext.data.Model',
            fields: ['bookerid', {
                name: 'code',
                convert: function (v, rec) {
                    switch (v) {
                    case 'TOTALPENDING':
                        v = 'Pending Bonus';
                        break;
                    case 'TOTALLEFT':
                        v = 'Current Bonus';
                        break;
                    default:
                        v = '';
                        break;
                    }
                    return v;
                }
            }, 'totalcount'],
        });

        Ext.define('TestViewModel', {
            extend: 'Ext.app.ViewModel',
            alias: 'viewmodel.test',
            stores: {
                books: {
                    model: 'Book',
                    proxy: {
                        type: 'ajax',
                        url: 'book.json',
                        reader: {
                            type: 'json',
                            rootProperty: 'data',
                            keepRawData: true
                        }
                    },
                    autoLoad: true
                }
            }
        });

        Ext.create({
            xtype: 'container',
            layout: 'vbox',
            fullscreen: true,
            renderTo: Ext.getBody(),

            viewModel: {
                type: 'test'
            },

            items: [{
                xtype: 'container',
                userCls: 'infocardCount',
                margin: 10,
                bind: {
                    html: '<small>If value is 0 then we can use pipes and in that case you need to pass 0 inside of string like this <b> books.data.items.0.totalcount || "0"</b> </small><br><br> <b style="color: #3c3c3c;background: #ccc;padding: 10px;margin: 10px;">{books.data.items.0.totalcount || "0"}</b>'
                }
            }, {
                xtype: 'grid',
                flex: 1,
                width: '100%',
                title: 'Book Data',
                bind: {
                    store: '{books}'
                },
                columns: [{
                    text: 'BOOK ID',
                    flex: 1,
                    dataIndex: 'bookerid'
                }, {
                    text: 'CODE',
                    dataIndex: 'code',
                    flex: 1
                }, {
                    text: 'TOTAL',
                    flex: 1,
                    dataIndex: 'totalcount'
                }]
            }]
        });

    }
});

JSON FILE

{
    "success": true,
    "msg": "OK",
    "count": 5,
    "data": [{
        "bookerid": 103083420,
        "code": "TOTALPENDING",
        "totalcount": 0
    }, {
        "bookerid": 103083421,
        "code": "TOTALLEFT",
        "totalcount": 15
    }, {
        "bookerid": 103083422,
        "code": "TOTALPENDING",
        "totalcount": 12
    }, {
        "bookerid": 103083423,
        "code": "TOTALLEFT",
        "totalcount": 10
    }, {
        "bookerid": 103083424,
        "code": "TOTALLEFT",
        "totalcount": 16
    }]
}