Extjs simple model and store

Question

I have a simple model, let's say:

Ext.define('UserModel', {
    extend: 'Ext.data.Model',

    fields: [
        {name: 'firstname',    type: 'string'},
        {name: 'lastname',     type: 'string'}
    ]
});

And a json file that looks like this:

{  
"DatabaseInJSON": {
    "Users": [
      {
        "KeyFirstName": "John",
        "KeyLastName": "Doe"
      },{
        "KeyFirstName": "James",
        "KeyLastName": "Howlett"
      }
    ],
    "OtherStuffWeDontCareAbout": [
        ...
    ]
  }
}

My question is: If I create a store like this, how can i map the attribute "firstname" from my model to "KeyFirstName" from my json ?

Ext.define('my.custom.Store', {
    extend: 'Ext.data.Store',

    model: 'UserModel',

    proxy: {
        type: 'ajax',
        url: 'path/to/my/file.json',
        reader: {
            type: 'json',
            rootProperty: 'DatabaseInJSON'
        }
    }
});

Answer 1

You need to either employ mapping or a convert function

Have a look at the demo here which demonstrates both in action.

For the sake of the demo I turned your store into a memory proxy store and you are I presume also accessing your rootProperty wrong as it should be rootProperty: 'DatabaseInJSON.Users'

Code:

Ext.application({
    name: 'Fiddle',

    launch: function() {

        myData = {
            "DatabaseInJSON": {
                "Users": [{
                    "KeyFirstName": "John",
                    "KeyLastName": "Doe"
                }, {
                    "KeyFirstName": "James",
                    "KeyLastName": "Howlett"
                }],
                "OtherStuffWeDontCareAbout": {}
            }
        };


        Ext.define('UserModel', {
            extend: 'Ext.data.Model',

            fields: [{
                name: 'firstname',
                mapping: 'KeyFirstName',
                type: 'string'
            }, {
                name: 'lastname',
                convert: function(v, record) {
                    return record.data.KeyLastName;
                },
                type: 'string'
            }]
        });

        Ext.define('my.custom.Store', {
            extend: 'Ext.data.Store',

            model: 'UserModel',

            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    rootProperty: 'DatabaseInJSON.Users'
                }
            }
        });

        myStore = Ext.create('my.custom.Store', {
            data: myData
        });
        console.log(myStore.getRange());
    }
});

Answer 2

Generally your Json properties should match the same names of your fields so that the reader can read them properly, to map 'KeyFirstName' to 'firstname' I think your best option would be to create a mapping in the field definition on the model.

This would apply this globally for all requests and I believe it would reverse the mapping when it come to saving the data.

To use the mapping in your case, you would need something like:

Ext.define('UserModel', {
    extend: 'Ext.data.Model',

    fields: [
        {name: 'firstname', type: 'string', mapping: function(data) { return data.KeyFirstName; } },
        {name: 'lastname', type: 'string', mapping: function(data) { return data.KeyLastName; } }
    ]
});

Other than changing the format of the JSON data, the only other way I can think of would be to override the read or getResponseData method of the JsonReader