Processing Json data with EXTJS

Question

Java application sends to the front the following json data:

{"data":[{"id":1,"name":"","password":"xxxxxxxxxxxxxxxxxxx","roles":[{"id":1,"name":"Administrator"}],"username":"admin"}]}

In the front I have an user model like the following:

Ext.define('App.store.Users', {
  extend: 'Ext.data.Store',
   fields: [
      {name: 'id', type: 'auto'},
      {name: 'name', type: 'auto'},
      {name: 'password', type: 'auto'},
      {name: 'roles', type: 'auto'},
      {name: 'username', type: 'auto'},
   ],
   autoLoad: true,
   proxy: {
      type: 'ajax',
      url: '/web/user',
      reader: {
          type: 'json',
          root: 'data'
      }
   }
});

Edit: I updated the code and this way the data is loaded.

Also i made a grid so I can show the results.

Ext.define('App.view.Home', {
  extend: 'Ext.panel.Panel',
  alias: 'widget.home',
  title: 'Home',
  layout: 'fit',
  items: [
      {
          xtype: 'gridpanel',
          store: 'Users',
          title: 'Users grid',
          columns: [
              {text: 'Id', dataIndex: 'id' },
              {text: 'Username', dataIndex: 'username', width : 200 },
              {text: 'Role', dataIndex: 'roles', width : 200 },
              {text: 'Name', dataIndex: 'name', width : 200 },
          ]
      }
  ]
});

Now the question that remains is that the grid is showing [object Object] how could i be showing the part that i want from that object, as the name of the role

Answer 1

You need to change the reader type to JSON, This code is working for me:

Fiddle

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.define('Users', {
            extend: 'Ext.data.Store',
            fields: ['id', {
                name: 'username',
                type: 'string'
            }, {
                name: 'name',
                type: 'string'
            }],
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url: 'data1.json',
                reader: {
                    type: 'json',
                    rootProperty: 'data'
                }
            }
        });

        Ext.create("Users", {
            listeners: {
                load: function() {
                    console.log("Loaded " + this.getCount() + " records");
                }
            }
        });
    }
});

I also removed the mappings as I don't think that you need them.

EDIT

In regards to the data showing in a grid, the 'roles' property in the JSON data is an array, that's why it's showing in the grid as object, I've updated the fiddle to show a possible way to get this information, But it's not the recommended method. You should probably look at associations in ExtJs for this.

Reviewing the guide on the Data Package may also help with this.

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.define('Users', {
            extend: 'Ext.data.Store',

            fields: [{
                name: 'id',
                type: 'int' 
            }, {
                name: 'username',
                type: 'string'
            }, {
                name: 'name',
                type: 'string'
            }, {
                name: 'roles',
                type: 'auto'
            }],

            autoLoad: true,

            proxy: {
                type: 'ajax',
                url: 'data1.json',
                reader: {
                    type: 'json',
                    root: 'data'
                }
            },
            listeners: {
                load: function(store, records) {
                    console.log("Loaded " + this.getCount() + " records");
                }
            }
        });

        var users = Ext.create("Users");

        Ext.define('App.view.Home', {
            extend: 'Ext.panel.Panel',
            alias: 'widget.home',
            title: 'Home',
            layout: 'fit',
            items: [{
                xtype: 'gridpanel',
                store: users,
                title: 'Users grid',
                columns: [{
                    text: 'Id',
                    dataIndex: 'id'
                }, {
                    text: 'Username',
                    dataIndex: 'username',
                    width: 200
                }, {
                    text: 'Role',
                    dataIndex: 'roles',
                    width: 200,
                    renderer: function(v, metadata) {
                        return v[0].name;
                    }
                }, {
                    text: 'Name',
                    dataIndex: 'name',
                    width: 200
                }]
            }]
        });

        Ext.create('App.view.Home', {
            renderTo: Ext.getBody()
        });
    }
});