Sencha touch2: How can i parse my nested json data?

Question

i could not able to parse my nested json data and i tried in many ways but i could not succeed. any help is appreciated. Here is my json output looks like:

[
  {
    "task": {
      "locator": "FGWESD",
      "subtask": [
        {
          "work": {
            "number": "1145",
            "id": "0",
            "status": true,
            "gate": "N\/A",
            },
          "sequenceNumber": "0",
          "id": "0"
        },
        {
          "work": {
            "number": "1145",
            "id": "0",
            "status": true,
            "gate": "N\/A",
          },
          "sequenceNumber": "0",
          "id": "0"
        }
      ],
      "connectTime": "0",
      "id": "0"
    }
  }
]

Here is my model:

Ext.define('MyApp.model.MyModel',{
    extend:'Ext.data.Model',
    xtype:'myModel',
    config:{
        fields:[
        {name:'number',mapping:'work.number'},
        {name:'id',mapping:'work.id'},
        {name:'locator',mapping:'task.locator'},
        {name:'gate',mapping:'work.gate'}

        ]
    }
});

Here is the store:

Ext.define('MyApp.store.StoreList', {
    extend:'Ext.data.Store',
     config:{
        model:'MyApp.model.MyModel',
        storeId: 'id_Store',
// added the url dynamically inside the controller
        proxy:{
            type:'ajax',
            reader:
            {
                type:"json",
                rootProperty: 'subtask'
            },
            method: 'POST',
            actionMethods: {
                create : 'POST',
                read   : 'POST', // by default GET
                update : 'POST',
                destroy: 'POST'
            },
            headers :{
                "Content-Type" :'application/xml',
                'Accept':'application/json'
            }

        }
    }
});

Here is my controller code :

    Ext.define('MyApp.controller.LoginController', {
        extend: 'Ext.app.Controller',
        requires: ['Ext.data.proxy.Rest'],

        config: {
// My code is too long to add here so am adding store loading when user taps login button

},
  getDetails: function(){
        var segmentStore = Ext.create('MyApp.store.StoreList');
        var url = 'http://localhost:8080/apps';
        segmentStore.getProxy().setUrl(url.trim());
        segmentStore.load({
                   scope:this,
                    callback: function(records, operation, success){
                        if(success){
                           console.log('records: ',records);

                           console.log('records: '+records.length); // prints here 1
                          console.log('locator: '+records[0].getData().locator);
// prints FGWESD
                          console.log('locator: '+records[0].getData().number);
//prints undefined
// 
                        }
}
            }
        )
    },
});

Can any one please help me out. how can i get Values of number, gate, id and status? What are the necessary changes have to be made in model, store and controller ? Please help me out in resolving ? Thanks.

I don't think you can do this just by using `rootProperty` and `mapping`. Do you have multiple 'task' items or just one? — Amit Aviv, Jun 06 '13 at 18:00
hmm, in that case the only way I see is to fetch the data from the server using `Ext.Ajax.request`, parse the data in the callback, and use `store.setData` with a properly structured data. I will be happy to hear of a better way though.. — Amit Aviv, Jun 06 '13 at 18:28
Let me know if you need help implementing the way I suggest.. — Amit Aviv, Jun 06 '13 at 18:39
yeah. i need your help. if you can add the code will be more helpful for me. Thanks. — chipmunk, Jun 06 '13 at 18:46
you can do it by setting rootProperty as subtask (as you did) with hasOne mapping in the model (like subtask model HasOne work model). see this http://docs.sencha.com/touch/2.2.1/#!/api/Ext.data.association.HasOne — Viswa, Jun 07 '13 at 11:57
if you are interested at this point let me know.. i will post how to structure model for this case. — Viswa, Jun 07 '13 at 12:09
@Viswa are you sure about that? My understanding is that because the top level of his data is an array, you can't — Amit Aviv, Jun 07 '13 at 13:45
@Viswa, Can you please structure my above model and provide relevant code. so it can be useful. Thanks. — chipmunk, Jun 07 '13 at 14:01
@AmitAviv you are right, i tied and learned from this.. reader is not configured for that array type JSON format, so JSON needed to be map addressable for the first set of siblings. — Viswa, Jun 07 '13 at 16:42

score 3 · Accepted Answer · answered Jun 06 '13 at 19:14

As I wrote in a comment, I don't think you can achieve that without manually parsing the data and loading it to the store. So the getDetails function should look like this:

getDetails: function(){
    var segmentStore = Ext.create('MyApp.store.StoreList');
    Ext.Ajax.request({
        url: 'http://localhost:8080/apps',
        success: function(response){
            var responseObj = Ext.decode(response.responseText);
            var task = responseObj[0].task;
            var locator = task.locator;
            var subtasks = [];
            Ext.each(task.subtask, function(subtask) {
                subtasks.push({
                    number: subtask.work.number,
                    id: subtask.work.id,
                    gate: subtask.work.gate,
                    locator: locator
                });
            });
            segmentStore.setData(subtasks);
        }
    });
}

Also, when using this method you should remove the mapping from your model, and you can get rid of the proxy definition of the store. Also, I'm not sure why you want to create the store in the "getDetails" and not define it in the 'stores' config of the controller, but maybe you have your reasons.. I didn't run the code, so there maybe errors, but I hope you get the idea.

score 0 · Answer 2 · answered Jun 06 '13 at 18:29

0

I think the root property of your store should be:

rootProperty: 'task.subtask'

answered Jun 06 '13 at 18:29

Nico Grunfeld

1,133
1
8
19

1

note that the toplevel of his data is an array, not an object – Amit Aviv Jun 06 '13 at 18:30
i have used the above as you suggested but still am getting same error : undefined. any help ? – chipmunk Jun 06 '13 at 18:32

Sencha touch2: How can i parse my nested json data?

2 Answers2

Linked