Retrieving nested JSON data - Ext JS - json

Question

Let's start off with my store:
var newstore = Ext.create('Ext.data.Store', {
fields: ['id', 'table_name', 'name', 'description']
proxy: {
type: 'memory'
}
});
I have some example data here, which comes from a dynamic json response:
{
"elements":[
{
"element":{
"name":"Element Name", <---- This is the value I need**
"id":"Element ID",
"attributes":[
{
"attrname":"id",
"attrvalue":"This is the ID"
},
{
"attrname":"name",
"attrvalue":"This is the name"
},
{
"attrname":"description",
"attrvalue":"This is the description"
},
{
"attrname":"table_name",
"attrvalue":"This is the table"
}
]
}
}
}
And I decode my json here, which places it neatly into my store:
for( var i=0; i < decoded.elements.length; i++ ) {
var element = decoded.elements[ i ].element;
var element_name = element.name; <---- THIS retrieves that value I need
var model = {};
// loop over attributes
for( var x=0; x < element.attributes.length; x++ ) {
var attribute = element.attributes[ x ];
model[ attribute.attrname ] = attribute.attrvalue;
}
// implicitly cast data as Model
newstore.add( model );
}
And lastly, my grid - ResponseList.js:
var grid = Ext.define('MyApp.view.ResponseList' ,{
initComponent: function(columns) {
//config
this.columns = [
{header: 'Element Name', dataIndex: 'What goes here ???'},
{header: 'ID', dataIndex: 'id'},
{header: 'View Name', dataIndex: 'name'},
{header: 'Description', dataIndex: 'description'},
{header: 'Table Name', dataIndex: 'table_name'},
etc...
My question is, how do I place that first name value, Element Name into the first row of my grid? The name name is already taken for the attributes.attrname field, so I'm not sure how to proceed. Everything except Element Name displays just fine.
[Edit]: This is how I want my grid to look:
Any help is appreciated thanks!

Answer 1

In your fields in the store or in a model you can specify mapping which allows for nested json data:
var model = Ext.define('myModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
mapping: 'element.id',
type: 'auto'
}],
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
root: 'elements',
successProperty: ''
}
}
});
var store = Ext.create('Ext.data.Store', {
model: model,
autoLoad: true,
listeners: {
load: function() {
console.log(store);
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo:Ext.getBody(),
store:store,
columns: {
defaults: {},
items: [{
header: "Id",
dataIndex: "id",
hidden: false
}]
}
});
Here is a fiddle demonstrating working code.

Answer 2

You can probably use the renderer on the grid to get the value you actually need.
{header: 'Element Name', dataIndex: 'What goes here ???',
renderer: function(value, metaData, record, row, col, store, gridView){
return record.someAttribute;
}
},
I'm not sure of the structure of your record, but I think you can guess how to go on from here.
Also, I don't think all that manual decoding is necessary, I can't figure out how you want your grid to look, but if you post a sketch of it or something maybe we can make all that decoding look cleaner.