PDA

View Full Version : Nested JSON Structure in Gridpanel



BlueZealot
18 Apr 2011, 8:49 AM
Hi all,

I've read several topics on nested JSON structures but none of them seem to go more than one level deep or actually have an additional array in them. For example, this is the type of structure I am looking at:


{"success": "true", "message": "", "total": "1", "data":
{
"id": "0001",
"type": "donut",
"name": "Cake",
"ppu": 0.55,
"batters":
{
"batter":
[
{ "id": "1001", "type": "Regular" },
{ "id": "1002", "type": "Chocolate" },
{ "id": "1003", "type": "Blueberry" },
{ "id": "1004", "type": "Devil's Food" }
]
},
"topping":
[
{ "id": "5001", "type": "None" },
{ "id": "5002", "type": "Glazed" },
{ "id": "5005", "type": "Sugar" },
{ "id": "5007", "type": "Powdered Sugar" },
{ "id": "5006", "type": "Chocolate with Sprinkles" },
{ "id": "5003", "type": "Chocolate" },
{ "id": "5004", "type": "Maple" }
]
}
}

The problem we are coming across is recognizing the inner arrays as separate records in a gridPanel or listView. We can access them through reference via the column's mapping (i.e. batters.batter) but in this example batters.batter is recognized as an array in the single field. So effectively I have a two-tiered array; the first tier being the overall record, the second tier being the batter array of info.

Is there any way to receive this data, and display the "id"s and "type"s each in their own row in a listView or gridPanel?

Any information is much appreciated. Thanks!

Signed,

Slightly Confused /:)

Screamy
18 Apr 2011, 9:05 AM
Here's what I would do:



Configue the batter grid's store with 'autoLoad: false'.
Do an Ext.Ajax.request() to retrieve the data, then call loadData() on the batter grid's store with the target array:


Ext.Ajax.request({
url: 'someUrl',
success: function(response, opts) {
var json = Ext.decode(response.responseText);
gridBatters.store.loadData(json.data.batters.batter);
},
failure: function(response, opts) {
Ext.Msg.alert('Error', 'Oops... the server needs a fresh diaper...');
}
});