1. #1
    Sencha User
    Join Date
    Jun 2014
    Posts
    2
    Vote Rating
    0
    Kilvearn is on a distinguished road

      0  

    Default Answered: Load from nested JSON data

    Answered: Load from nested JSON data


    Hello,

    I'm new to Ext-JS and I'm trying to import data from a nested JSON file.
    Unfortunately, it only displays the "parent" object ("Data"), and not the children ("Info")... It has value "undefined" in Chrome console...
    Thanks a lot for your help, and sorry for my bad English !

    Here is my app.js :

    Code:
    Ext.application({
        name: 'Nested',
    
    
        launch: function() {
        
            Ext.define("Data", {
                extend: 'Ext.data.Model',
                fields: ['name', 'status'],
                hasMany:{model:'Info',name:'infos'}
            });
    
    
            Ext.define("Info", {
                extend: 'Ext.data.Model',
                fields: ['info1', 'info2', 'info3'],
            });
    
    
            var store = Ext.create('Ext.data.Store', {
                model: "Data",
                autoLoad: true,
                proxy: {
                    type: 'ajax',
                    url: 'data1.json',
                    reader: {
                        type: 'json',
                        root: 'data'
                    }
                }
            });
            
            store.on('load', function() {
                console.log(store.data.items[1]);
                console.log(store.data.items[1].infos());
                console.log("Name : " + store.data.items[1].get('name'));
                console.log("Status : " + store.data.items[1].get('status'));
                console.log("Info : " + store.data.items[1].get('infos'));
            })
        }
    });
    and my JSON file :
    Code:
    {
        "success": true,
        "code": 0,
        "message": "works",
        "data": [{
            "name": "connection1",
            "status": 1,
            "info": [{
                "info1": "abc",
                "info2": "def",
                "info3": "123"
            }, {
                "info1": "ghi",
                "info2": "jkl",
                "info3": "456"
            }]
        }, {
            "name": "connection2",
            "status": 1,
            "info": [{
                "info1": "mno",
                "info2": "pqr",
                "info3": "789"
            }]
        }, {
            "name": "connection3",
            "status": 1,
            "info": [{
                "info1": "stu",
                "info2": "vwx",
                "info3": "123"
            }]
        }, {
            "name": "connection4",
            "status": 0,
            "info": [
    
    
            ]
        }, {
            "name": "connection5",
            "status": 0,
            "info": [
    
    
            ]
        }]
    }
    (and if useful, my index.html file : )
    HTML Code:
    <html>
    <head><title>Sencha Fiddle - http://stackoverflow.com/questions/22248476/extjs-4-2-0-loading-nested-json-data-in-grid</title>
    <script type="text/javascript" src="https://extjs.cachefly.net/ext/gpl/4.2.1/ext-all-debug.js"></script>       <script type="text/javascript" src="https://extjs.cachefly.net/ext/gpl/4.2.1/packages/ext-theme-neptune/build/ext-theme-neptune-debug.js"></script>        
    <link rel="stylesheet" href="https://extjs.cachefly.net/ext/gpl/4.2.1/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css" />
     <script type="text/javascript" src="app.js"></script>
    </head>   
    <body>
    
    
     </body>
    </html>

  2. Here is a quick example to review:
    https://fiddle.sencha.com/#fiddle/1jp

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,935
    Answers
    656
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Here is a quick example to review:
    https://fiddle.sencha.com/#fiddle/1jp

  4. #3
    Sencha User
    Join Date
    Jun 2014
    Posts
    2
    Vote Rating
    0
    Kilvearn is on a distinguished road

      0  

    Default


    Thanks a lot for your help :-)

Thread Participants: 1

Tags for this Thread