PDA

View Full Version : JSON Array Store - how to extract



RajuGuide
2 Oct 2012, 1:58 PM
I have a JSON output that comes from a URL which looks like below:

{ about: 'RRDtool xport JSON output', meta: { start: 1348610400, step: 3600, end: 1348610400, legend: [ 'Tx Packets' ] }, data: [ [ 0.0000000000e+00 ], [ 0.0000000000e+00 ], [ 0.0000000000e+00 ], [ 3.1888888889e-01 ], [ 1.8120555556e+01 ], [ 0.0000000000e+00 ], [ 0.0000000000e+00 ]
]}

I would like to get this in a grid and a chart.
I am not sure how to declare the model, store the display the grid.
The issue is primarily because the data comes without name/value pair.
Second questions is how do I extract the legend and use it as a table heading or chart heading?

Please help.
Thanks.

skirtle
2 Oct 2012, 2:18 PM
You should be able to parse that using an Array reader with a single field:

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Array

RajuGuide
2 Oct 2012, 2:31 PM
Ext.define('RRD',{ extend: 'Ext.data.Model',
fields: [
{name: 'data', type:'string'}
]
});

var myStore = Ext.create('Ext.data.Store', {
model: 'RRD',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'php/dumprrd.php',
reader: { type: 'json', root: 'data', messageProperty: 'about' }
}
});

var myTable = Ext.create('Ext.grid.Panel', { store: myStore,
columns: [
{ text : 'Value', flex : 1, sortable : true, dataIndex: 'data' },
],
height: 900,
width: 300,
title: 'Data'
});

I tried something like the above, but it doesn't work.

skirtle
2 Oct 2012, 2:48 PM
Please use [CODE] tags when posting code. I've edited your post to make it readable.

It'll parse that data fine if you just switch it to an Array reader. i.e. Change:


type: 'json'

to:


type: 'array'

RajuGuide
2 Oct 2012, 3:18 PM
Thanks I tried the following code.


Ext.onReady(function () {

Ext.define('RRD',{ extend: 'Ext.data.Model',
fields: [
{name: 'data', mapping:1, type:'float'}
]
});

var myStore = Ext.create('Ext.data.ArrayStore', {
model: 'RRD',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'php/dumprrd.php',
reader: { type: 'array', messageProperty: 'about' }
}
});

var myTable = Ext.create('Ext.grid.Panel', { store: myStore,
columns: [
{ text : 'Value', flex : 1, sortable : true, dataIndex: 'data' },
],
height: 900,
width: 300,
title: 'Data'
});


var win = Ext.create('Ext.Window', { width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
maximizable: true,
title: 'RRD Table',
renderTo: Ext.getBody(),
layout: 'fit',
items: [myTable]
});

});


Please note that my php outputs something like this:


{ about: 'RRDtool xport JSON output',
meta: { start: 1348610400, step: 3600, end: 1348610400, legend: [ 'Tx Packets' ] },
data: [
[ 0.0000000000e+00 ],
[ 3.1888888889e-01 ],
[ 1.8120555556e+01 ],
[ 0.0000000000e+00 ],
[ 0.0000000000e+00 ]
]
}

I get only one row while I expect 5 items.

skirtle
3 Oct 2012, 1:04 AM
Please format your code properly before posting so we can actually read it. I've edited your last post.

In my previous post I suggested changing 1 word. For some reason you've changed a load of other things as well, which is why it still isn't working.


You've changed Ext.data.Store to Ext.data.ArrayStore. Change it back.
You've added a mapping to the model's field. Get rid of it.
You've removed the root property from the reader. Put it back in.

RajuGuide
3 Oct 2012, 10:28 AM
Thanks - that worked. :)