PDA

View Full Version : Json Data, with nested array



Bleak
7 Jul 2010, 12:17 PM
I have a json string as follows;



{
"data": {
"categories": [
"M",
"A"
],
"series": [
"Projects"
],
"seriesdata": [
13,
20
]
},
"success": true,
"totalRecords": 1
}
And I have defined a record as;



this.record = new Ext.data.Record.create(
[
{name: 'categories'},
{name: 'series'},
{name: 'seriesdata'}
]
)
The issue I am having, is that this data doesnt appear to load properly. I do not get any errors, just an empty store. I believe the issue has to do with the array data in the json string and somehow I am not mapping the record correctly.

Any insights?

mankz
7 Jul 2010, 9:10 PM
What's your store definition? Set root to 'data'. Also add listeners on the store for "exception" event to notify you when a load breaks.

Bleak
8 Jul 2010, 5:19 AM
Hey Manz,

I've done some inspecting through Firebug, and the store is loaded. I can see the data associated with my record, however, I simply get "undefined" if I attempt to try something like store.getAt(0), I am unable to get the data into a record so I get the impression there is something wrong with my record definition.

There are no errors through, my store is configured to catch exceptions and log them to the console.

mankz
8 Jul 2010, 5:20 AM
Ok, if you want more help you'll have to post your code (in CODE tags).

Condor
8 Jul 2010, 5:26 AM
The root of a JSON store needs to be an array, but your 'data' is a single object.

You could use:

root: function(value){
return [value.data];
}

Bleak
8 Jul 2010, 6:35 AM
I've made some small changes to the JSON Data Structure, here is my updated store definition, record definition, etc;



example.dao.DAOBaseCls = Ext.extend(Object, {


id : null,
store : null,
recordConfig : null,
reader : null,
writer : null,
root : null,
entity : null,
component : null,


constructor : function(config) {
Ext.apply(this, config, {
autoLoad : true
});

example.dao.DAOBaseCls.superclass.constructor.call(this);
},

/**
* The default configuration for the Reader
* @param Ext.data.Record
* @return Ext.data.JsonReader
*/
getReader: function(record) {

if (! this.reader) {
this.reader = new Ext.data.JsonReader({ totalProperty: 'totalRecords',
root: this.root,
idProperty: 'id',
successProperty: 'success'}
, record);

}

return this.reader;
},

/**
* The default configuration for the Writer
* @return Ext.data.JsonWriter
*/
getWriter: function() {

if (! this.writer) {
this.writer = new Ext.data.JsonWriter({
root: this.root,
encode: true,
encodeDelete: true,
returnJson: true,
writeAlLFields: true,
listful: true
});
}

return this.writer;
},


/**
* The default configuration for the Proxy
* @return Ext.data.HttpProxy
*/
getProxy: function() {

if (! this.proxy) {
this.proxy = new Ext.data.HttpProxy({
api: {
read :'pp.do?xaction=read',
create: 'pp.do?xaction=create',
update: 'pp.do?xaction=update',
destroy: 'pp.do?xaction=destroy'
}
});
}

return this.proxy;
},

/**
* The Store
* @return Ext.data.Store
*/
getStore: function() {

if (!this.store) {
this.store = new Ext.data.Store(
{
id : this.id,
autoSave: true,
autoLoad: this.autoLoad,
storeId: this.id,
reader: this.getReader( this.getRecord() ),
writer: this.getWriter(),
proxy: this.getProxy(),
successProperty: 'success',
baseParams: {entity: this.entity, component: this.component, user_id:-1},
listeners: {
exception: function() {
console.log(arguments);
}
}
});


}
return this.store;
}


});


example.dao.ChartDAO = Ext.extend(example.dao.DAOBaseCls, {

constructor: function(config) {
Ext.apply(this, config, {
root : 'data',
entity : 'chart',
id : Ext.id(),
autoLoad : false
});

example.dao.ChartDAO.superclass.constructor.apply(this, arguments);

this.getStore();
},


/**
* The default configuration for a record
*
* @return Ext.data.Record
*/
getRecord: function() {
if (! this.record) {
this.record = new Ext.data.Record.create(
[
{name: 'categories' },
{name: 'series'}
]
)
}

return this.record;
}



});
The data returning from the server is as follows;



{
"data": {
"categories": [
"M",
"A"
],
"series": [
{
"name": "Projects" ,
"data": [
13,
20
]
}
]
},
"success": true,
"totalRecords": 0
}
I know that the store loads the data, as I can reference the store.reader.data.jsonData and the data is available. I am unable to get it via Ext.data.Record when using any of the store.getAt(), store.each(), etc.

Appreciate any further help.

Bleak
8 Jul 2010, 6:42 AM
I've posted the code, requires a moderator to review. However, Condor, I changed the data to be an array and everything works beautifully.

The new JSON Structure looks like this'



{
"data": [
{
"categories": [
"M",
"A"
],
"series": [
{
"name": "Projects" ,
"data": [
13,
20
]
}
]
}
],
"success": true,
"totalRecords": 0
}
Just adding the [] around the data node, and everything works properly.

Thanks!