Retrieving nested JSON data - Ext JS

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: enter image description here

Any help is appreciated thanks!

weeksdev · Accepted Answer · 2014-02-28 21:19:19Z

3

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.

answered Feb 28, 2014 at 21:19

weeksdev

4,39525 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Clay Banks Over a year ago

This code works great but it seems to accomplish getting the element.name and element.id, but now I can't seem to return any of the attributes!

weeksdev Over a year ago

@ClayBanks I'm not positive exactly what you are looking to do with the attributes since there is more than one in an array. However, if you are looking to aggregate information into a column then convert should work here's a fiddle for example. Otherwise if you want the data in another store then you will want to utilize the hasMany property of the store.

Clay Banks Over a year ago

I've figured out exactly what I need to do and your code is very helpful. The only thing I need to know now is how to read my JSON data from my ajax response/define it in the 'model', rather than your predefined data.json.

weeksdev Over a year ago

@ClayBanks that proxy in the example should be pretty close to what is required for an actual web service. You should just need to change the url to match the request. If there are parameters required than extraParams needs to be included too. Here is a gist i created that i usually use for my models.

martskins · Accepted Answer · 2014-02-28 18:59:17Z

1

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.

answered Feb 28, 2014 at 18:59

martskins

2,9604 gold badges29 silver badges53 bronze badges

1 Comment

Clay Banks Over a year ago

Thanks for the feedback lascort, I was heading in the direction of renderer. I've included an image of how I want my grid to display.

Collectives™ on Stack Overflow

Retrieving nested JSON data - Ext JS

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related