PDA

View Full Version : problem gridding with the ol' jsonstore



ljhendex
18 Sep 2009, 9:41 AM
Hey there everyone,

In my application I have to work with a API backend, so I am unable to format and configure the responses my server sends me. The problem is the server sends back a json array, and I just want to use and display the second element in the array. Here is an example of what is returned:



[ {
"class" : "fltupdevt",
"timestamp" : 1253293953335,
"updtype" : "countupd",
"count" : 1
}, {
"class" : "fltupdevt",
"timestamp" : 1253293953335,
"updtype" : "entered",
"entity" : {
"class" : "entity",
"guid" : "EQUIPMENT_93808735",
"retired" : false,
"deletable" : true,
"MODEL" : "TEST",
"$aName" : "TEST",
"CHECKED_STATUS" : "Out",
"MANUFACTURER" : "AGILENT",
"$aDescription" : "TEST"
}
}, {
"class" : "fltupdevt",
"timestamp" : 1253293953335,
"updtype" : "rowlist",
"last-update" : true,
"roworder" : [ "EQUIPMENT_93808735" ]
} ]

From the example, all I want is the information after "entity": I am having trouble configuring my jsonstore to only use and display the second element in the returned array. I think the solution may be trivial but I haven't been able to get it to work. As a new user, I am seeking some elder wisdom. Any thoughts?

Logan

Condor
18 Sep 2009, 10:21 AM
Does the response always include only one 'entity' element?

Why would you want to use a store + grid for only one element?

rlegend
18 Sep 2009, 11:05 AM
How much data are you returning? You could just do an ajax request to get the server data then create or set the data of your store with the good parts of the returned data.

ljhendex
21 Sep 2009, 7:12 AM
Thanks for the replies guys.

No the response doesn't always return just one element. It will be variable depending on the search criteria, but it is going to return in the form:

[{GARBAGE},
{"class": "class",
"entity": {information I need},
},{
class: "class",
"entity": {information I need}
},{etc....},
{GARBAGE}]

So I need all the data except the first and last entry. I am thinking that I will need to create custom record and reader to cater to the following type of JSON data:



{
"class" : "fltupdevt",
"timestamp" : 1253293953335,
"updtype" : "entered",
"entity" : {
"class" : "entity",
"guid" : "EQUIPMENT_93808735",
"retired" : false,
"deletable" : true,
"MODEL" : "TEST",
"$aName" : "TEST",
"CHECKED_STATUS" : "Out",
"MANUFACTURER" : "AGILENT",
"$aDescription" : "TEST"
}
}

Am I right that the records that do not follow this format will not be rendered in the grid?

ljhendex
21 Sep 2009, 7:20 AM
I was thinking something like:


new myJsonReader({
fields: [{name: 'entity.$aDescription'},
{name: 'entity.$aName'},
{name: 'entity.CHECKED_STATUS'},
{name: 'entity.MANUFACTURER'},
{name: 'entity.MODEL'},
{name: 'entity.class'},
{name: 'entity.deletable'},
{name: 'entity.guid'},
{name: 'entity.retired'}],
root: 'class'
})


What do you guys think?

ljhendex
21 Sep 2009, 9:19 AM
Ok I think I figured out my problem.

I ended up formatting my response from the API server to a JSON Array which looks like:


[{
"class" : "fltupdevt",
"timestamp" : 1253546489621,
"updtype" : "entered",
"entity" : {
"class" : "entity",
"guid" : "EQUIPMENT_100c0bd1",
"retired" : false,
"deletable" : true,
"MODEL" : "16717A",
"$aName" : "1190",
"MANUFACTURER" : "Agilent",
"$aDescription" : "68 Channel Timing and State Module with 2M memory depth per channel"
}
etc...
}]


Note: I overrode the JsonReader class to include my formatting function formatReturn:



var myJsonReader = Ext.extend(Ext.data.JsonReader,{
constructor: function(config){
Ext.apply(this, config)
// apply config
myJsonReader.superclass.constructor.call(this, config)
},
// format the return response to delete first and last entries
formatReturn: function(jsonResponse){
var response = [];
var responseLen = jsonResponse.length;
for(len = 0;len < (responseLen-2); len++){
response[len] = jsonResponse[len+1]
}
return response;
},
//override read
read: function(response) {
var json = response.responseText;
var o = Ext.decode(json);
if(!o) {
throw {message: 'JsonReader.read: Json object not found'};
}
return this.readRecords(this.formatReturn(o));
}// overridden read function
});


the formatReturn function basically just got rid of the first and last garbage objects in the JSON array.

Then I had to map my fields according in my instantiation of my JsonReader class:


new myJsonReader({
fields: [{name: '$aDescription', mapping: 'entity.$aDescription'},
{name: '$aName', mapping: 'entity.$aName'},
{name: 'CHECKED_STATUS', mapping: 'entity.CHECKED_STATUS'},
{name: 'MANUFACTURER', mapping: 'entity.MANUFACTURER'},
{name: 'MODEL', mapping: 'entity.MODEL'}]
}),


Note: No root was specified.

I found this link very helpful in trying to access nested JSON data objects and mapping:
https://www.extjs.com/forum/showthread.php?t=6152

And heres my grid for good measure:


Application.labEquipGrid = Ext.extend(Ext.grid.GridPanel, {
initComponent:function() {
Ext.apply(this, {
title: 'Lab Equipment Grid',
region: 'center',
store: labEquipmentStore,
layout: 'fit',
columns: [
{header: 'AssetID', width: 75,sortable: true, dataIndex: '$aName'},
{header: 'Description', width: 75, sortable: true, dataIndex: '$aDescription'},
{header: 'Model', width: 75, sortable: true, dataIndex: 'MODEL'},
{header: 'Manufacturer', width: 75, sortable: true, dataIndex: 'MANUFACTURER'},
{header: 'Checked Status', width: 75, sortable: true, dataIndex: 'CHECKED_STATUS'}
],
stripeRows: true,
viewConfig: {forceFit: true},
height: 400
});// eo apply
// apply config
Application.labEquipGrid.superclass.initComponent.apply(this, arguments)
}// eo func initComponent
,onRender: function() {
Application.labEquipGrid.superclass.onRender.apply(this, arguments);
}// eo func onRender
});// eo class Application.labEquipGrid


I hope this helps anyone trying to use a JSON object for their grid data.

Logan