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
– Amit Aviv, Commented Jun 6, 2013 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
– Amit Aviv, Commented Jun 6, 2013 at 18:28

Amit Aviv · Accepted Answer · 2013-06-06 19:14:22Z

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.

Nico Grunfeld · Accepted Answer · 2013-06-06 18:29:16Z

0

I think the root property of your store should be:

rootProperty: 'task.subtask'

answered Jun 6, 2013 at 18:29

Nico Grunfeld

1,1311 gold badge8 silver badges19 bronze badges

2 Comments

Amit Aviv Over a year ago

note that the toplevel of his data is an array, not an object

chipmunk Over a year ago

i have used the above as you suggested but still am getting same error : undefined. any help ?

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related