How to load multidimensional / nested json into a store?

Question

So I'm trying to load the data received from a webservice into a sencha touch 2 store. The data is nested JSON, however it is made to include multiple dataArrays.

I am working with sencha touch 2.3.1, somewhat equal to Ext JS 4.2. I don't have that much experience with sencha yet, but I'm getting there. I decided to go for MVC, so I'd like the answers to be as close to this as possible :).

This is the example JSON I am using:

[
    {
        "DataCollection": {
            "DataArrayOne": [
                {
                    "Name": "John Smith",
                    "Age": "19"
                },
        {
                    "Name": "Bart Smith",
                    "Age": "16"
                }
            ],
            "DataArrayTwo": [
                {
                    "Date": "20110601",
                    "Product": "Apple",
                    "Descr": "",
                    "Remark": ""
                },
                {
                    "Date": "20110601",
                    "Product": "Orange",
                    "Descr": "",
                    "Remark": ""
                },
                {
                    "Date": "20110601",
                    "Product": "Pear",
                    "Descr": "",
                    "Remark": ""
                }
            ],
            "DataArrayThree": [
                {
                    "SomeTotalCost": "400,50",
                    "IntrestPercentage": "3"
                }
            ]
        }
    }
]

Through only one call, I get this json. I don't want to cause any unnecessary traffic so I hope to be able to use the data somehow. I want to be able to use each DataArray on its own.

The data gets sent to the store through its proxy:

Ext.define("MyApp.store.myDataObjects", {
 extend: "Ext.data.Store",
 config: {
  model: "MyApp.model.myDataObject",
  proxy: {
   reader: {
    type: "json",
    rootProperty: "DataCollection"
   },
   type: "ajax",
   api: {
    read: "https://localhost/Service.svc/json"
   },
   limitParam: false,
   startParam: false,
   pageParam: false,
   extraParams: {
    id: "",
    token: "",
    filter: ""
   },
   writer: {
    encodeRequest: true,
    type: "json"
   }
  }
 }
});

I am a bit stuck with the model here. I tried using mappings which would look like this:

config: {
  fields: [ {
   name: "IntrestPercentage",
   mapping: "Calculation.IntrestPercentage",
   type: "string"
  }
]}

I tried associations as well but to no avail.

According to google chrome console, it doesn't make any objects containing data. I get only 1 object with all values "null".

My endgoal is to be able to show each dataArray in a separate table. So a table for DataArrayOne, a table for DatarrayTwo... The data itself isn't linked. They are only details that have to be shown on a view. John Smith isn't related to the apples, as in he didn't buy. The apples are just there as an item to be shown.

The possible solutions I've seen yet not understood due to them being outdated are:

• ChildStores: You have a master store that receives the data, and then you split the data to other stores according to rootProperty. I have no idea how to do this however and I'm not sure if it will work at all.
• Associations, in case I was doing them wrong. I don't think they are needed because the data isn't linked to each other but it is part of "DataCollection" though.

Could someone please post an example on how to deal with this unusual(?) kind of nested json. Or any other solution which will lead to being able to use the 3 dataArrays at will.

Thanks in advance

Answer 1

The best would be to load the complete data with a separate Ext.Ajax.request and then use store.loadData in the success callback. For example:

var data = Ext.decode(response.responseText);
store1.loadData(data[0].DataCollection.DataArrayOne);
store2.loadData(data[0].DataCollection.DataArrayTwo);
store3.loadData(data[0].DataCollection.DataArrayThree);