nested dynamic JSON data to Extjs Model

Question

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?

How are the numbers generated? Is it done in the JS or in the backend somewhere? — Sumner Evans
– Sumner Evans, Commented Jan 30, 2015 at 18:51
it's done with .net framework, i generate an object with a sortedList<int,TableMode> object, and JsonNet print the json object format. Does it is a right choice for pass data to Extjs for generate charts? — davymartu
– davymartu, Commented Feb 1, 2015 at 12:39

matt · Accepted Answer · 2015-01-30 16:48:48Z

1

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.

answered Jan 30, 2015 at 16:48

matt

4,0572 gold badges27 silver badges32 bronze badges

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

2 Comments

davymartu Over a year ago

Thanks for response, but if i want to view also "0" "1" "2"..(same of my initial example) how can i do?

Alex Over a year ago

@matt is correct, this is just a mistake in data modelling. The model should not have N-number of dynamic properties with integers as property names. This better modelled as an array of objects, each with their own properties [{id: 0, Rx: 0, Tx: 0}, {id: 1, Rx: 2, Tx: 0}, {id: 2, Rx: 0, Tx: 0}, {id: 3, Rx: 6, Tx: 0}].

Lorenz Meyer · Accepted Answer · 2015-02-01 14:17:15Z

1

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

answered Feb 1, 2015 at 14:17

Lorenz Meyer

20.1k23 gold badges83 silver badges130 bronze badges

2 Comments

davymartu Over a year ago

Now i'm generating this in backend. How to rapresent it in Extjs store? I'm confusing (specially with hasOne associations)

Lorenz Meyer Over a year ago

I don't have experience with associations. I had problem getting them to work, and finally I didn't need them.

davymartu · Accepted Answer · 2015-02-03 12:57:16Z

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

Collectives™ on Stack Overflow

nested dynamic JSON data to Extjs Model

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related