CODEWITHSUNDEEP
javascriptjsonextjsextjs4extjs4.2
davymartu
davymartu

Reputation: 1443

nested dynamic JSON data to Extjs Model

I want to transform this json to Extjs Model:

{
  "TableHour": {
    "0": {
      "Rx": 0,
      "Tx": 0
    },
    "1": {
      "Rx": 2,
      "Tx": 0
    },
    "2": {
      "Rx": 0,
      "Tx": 0
    },
    "3": {
      "Rx": 6,
      "Tx": 0
    }
  }
}

I've tried :

Ext.define("TableHour", {
            extend: 'Ext.data.Model',
        hasMany:  { model:'TableMode' }
    });

    Ext.define("TableMode", {
        extend: 'Ext.data.Model',
        fields: [
        'Rx','Tx'
        ],          
        belongsTo: 'TableHour',
    });     

    var store1 = Ext.create('Ext.data.JsonStore',{
        autoLoad: true,
        model:'TableHour',
        proxy:{
            type:'ajax',
            url:'HoursReports.json',
            reader:{
                type: 'json',
            }
        }

    });   
    console.log(store1.getAt(0));

But the last line, print "undefined". It's sure that model definition is wrong. The numbers "0" "1" "2" "3" aren't declared in my model beacause they're dynamically generated... how can i do?

Upvotes: 0

Views: 833

Answers (3)

davymartu
davymartu

Reputation: 1443

I've modified my backend generated Json. Now my json is:

{
  "Date": null,
  "TableHourDto": [
    {
      "Hour": "0",
      "Rx": 3,
      "Tx": 5
    },
    {
      "Hour": "1",
      "Rx": 2,
      "Tx": 0
    },
    {
      "Hour": "2",
      "Rx": 0,
      "Tx": 0
    },
    {
      "Hour": "3",
      "Rx": 5,
      "Tx": 0
    }
}

My Extjs model is:

Ext.define("TableHour", {
                extend: 'Ext.data.Model',       
                fields: [
                'Hour','Rx','Tx'
                ],
            });

And my store:

var store1 = Ext.create('Ext.data.JsonStore',{
                autoLoad:true,
                proxy:{
                    type:'ajax',
                    url:'HoursReports.json',                    
                    reader:{
                        type: 'json',
                        model:'TableHour',
                        root: 'TableHourDto',
                        listeners : {
                            exception: function( reader, response, error, eOpts ){
                                console.log('Got exception');
                            }
                        }
                    }                   
                },
                listeners:{
                    load:function( store, records, successful, eOpts ){
                        console.log(store.getAt(0).data);
                        // This print first: Object {Hour: "0", Rx: 3, Tx: 5}
                    }
                }
            });

Having this store, i will build relative Charts... Thank all for reply

Upvotes: 0

Lorenz Meyer
Lorenz Meyer

Reputation: 19945

Instead of loading the store automatically using its load () method, you could load the data with Ext.Ajax.request () and transform the data in the success callback such that it has the required format. Then you can feed it into your store.

The data has to look something like this :

{
  "TableHour": [
    {
      "Id": 0,
      "Rx": 0,
      "Tx": 0
    },{
      "Id": 1,
      "Rx": 2,
      "Tx": 0
    },{

Upvotes: 1

matt
matt

Reputation: 4047

Your JSON data appears to contain an object with numeric properties as a collection. In order to work with ExtJS this should be an array instead:

{
  "TableHour": [
    {
      "Rx": 0,
      "Tx": 0
    },{
      "Rx": 2,
      "Tx": 0
    },{
      "Rx": 0,
      "Tx": 0
    },{
      "Rx": 6,
      "Tx": 0
    }
  ]
}

Now, if you want to work with a store, then TableHour should be the data root and there should be only one model "TableMode":

Ext.define("TableMode", {
    extend: 'Ext.data.Model',
    fields: [
        'Rx', 'Tx'
    ]
});

var store1 = Ext.create('Ext.data.JsonStore',{
    autoLoad: true,
    model: 'TableMode',
    proxy: {
        type:'ajax',
        url: 'HoursReports.json',
        reader: {
            type: 'json',
            root: 'TableHour'
        }
    }
});

Check out this fiddle for a working example.

Upvotes: 1

Related Questions