如何将多维/嵌套 json 加载到商店中？答案

【问题标题】：How to load multidimensional / nested json into a store?如何将多维/嵌套 json 加载到商店中？
【发布时间】：2014-06-07 23:13:59
【问题描述】：

所以我正在尝试将从网络服务接收到的数据加载到 sencha touch 2 商店中。 数据是嵌套的 JSON，但是它包含多个 dataArrays。

我正在使用 sencha touch 2.3.1，有点相当于 Ext JS 4.2。我还没有太多的煎茶经验，但我已经到了。我决定选择 MVC，所以我希望答案尽可能接近这个:)。

这是我使用的 JSON 示例：

[
    {
        "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"
                }
            ]
        }
    }
]

只通过一个电话，我就得到了这个 json。我不想造成任何不必要的流量，所以我希望能够以某种方式使用这些数据。我希望能够单独使用每个 DataArray。

数据通过其代理发送到商店：

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"
   }
  }
 }
});

我对这里的模型有点坚持。我尝试使用如下所示的映射：

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

我也尝试了关联，但无济于事。

根据 google chrome 控制台，它不会生成任何包含数据的对象。我只得到 1 个所有值为“null”的对象。

我的最终目标是能够在单独的表格中显示每个 dataArray。因此，DataArrayOne 的表，DataArrayTwo 的表......数据本身没有链接。它们只是必须在视图上显示的细节。约翰史密斯与苹果无关，因为他没有购买。苹果只是作为要展示的项目。

由于它们已过时，我见过但尚未理解的可能解决方案是：

ChildStores：您有一个接收数据的主存储，然后你根据 rootProperty 将数据拆分到其他存储。我有但是不知道该怎么做，我不确定它是否会起作用全部。
协会，以防我做错了。我不认为他们需要，因为数据没有相互链接，但它是一部分不过是“DataCollection”。

有人可以发布一个关于如何处理这种不寻常（？）嵌套 json 的示例。或任何其他可以随意使用 3 个 dataArrays 的解决方案。

提前致谢

【问题讨论】：

已给出答案。但欢迎任何更具建设性的解决方案。一个更有趣的事情是看到像 Saki 的答案在商店中与代理相结合。

标签： json extjs nested sencha-touch-2 store

【解决方案1】：

最好的办法是使用单独的 Ext.Ajax.request 加载完整的数据，然后在成功回调中使用 store.loadData。例如：

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

【讨论】：