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'
                }
            }
        },

Narendra Jadhav · Accepted Answer · 2018-03-12 12:11:35Z

2

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
    }]
}

edited Mar 12, 2018 at 12:11

answered Mar 12, 2018 at 8:12

Narendra Jadhav

10.3k15 gold badges35 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nuri Engin Over a year ago

Thats worked perfectly. Shall ask an additional question please? One of item on JSON returns totalcount field as 0; { "code": "TOTALI", "totalcount": 0 },. While totalcount is zero, it's not bind to screen. Please check out this screen shoot @ prnt.sc/iq1eb0 . How can configure the model or view to keep bind any value even it's 0?

Nuri Engin Over a year ago

No it is not. It's integer. Just shows count. I'm binding to JSON on view as this way;

{ xtype: 'container', userCls: 'infocardCount',                                                 bind: {                                                     html: '{reserStore.data.items.9.totalcount}'                                                 },                                                 flex: 1                                             },

Narendra Jadhav Over a year ago

@NuriEngin Please see my fiddle I have updated

{             xtype: 'container',             margin: 10,             viewModel: {                 type: 'test'             },             userCls: 'infocardCount',             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>'             },             flex: 1         }

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related