如何使用 Sencha Touch 数据模型读取嵌套的 JSON 结构？答案

【问题标题】：How to read nested JSON structure with a Sencha Touch Data Model?如何使用 Sencha Touch 数据模型读取嵌套的 JSON 结构？
【发布时间】：2011-10-09 23:48:04
【问题描述】：

我整个晚上都在试图解决这个问题，但无济于事。我有一个 JSON 结构如下（来自另一个系统，所以我不能改变它的结构）：

{ “父母”：{ “父母”：[ { “父ID”：1， “孩子们”：{ “孩子”：[ { "childId":1, }, { "childId":2, } ] } }, { “父ID”：2， “孩子们”：{ “孩子”：[ { "childId":1, }, { "childId":2, } ] } } ], "pageNum":1, “页面大小”：2 } }

但是，我无法弄清楚数据模型的正确结构应该是什么。我尝试了以下方法，但它不起作用。顺便说一句，我可以访问父信息。问题在于访问子信息。所以，我想我设置关系数据的方式有问题。

Ext.regModel("父模型", { 有很多： { 模型：'ChildrenModel'， name: 'children.child' // 不太确定这个位 }, 字段：[ {名称：'parentId'，类型：'string'} ], 代理： { 类型：'ajax'，网址：'models.json'，读者：{ 类型：'json'， root: 'parents.parent' // 这很好用 } } }); Ext.regModel('ChildrenModel', { belongsTo: 'ParentModel', // 不太确定这个位字段：[{name：'childId'，类型：'string'}] });

使用数据存储：

Ext.regStore('ParentModelStore', { 模型：'父模型'，自动加载：真 });

我正在使用以下模板获取父信息，但无法从中获取子数据：

myapp.views.ParentView = Ext.extend(Ext.Panel, { 布局：'卡片'，初始化组件：函数（）{ this.list = new Ext.List({ itemTpl: 新的 Ext.XTemplate( '', '

', '{parentId}', // 这很好用 '

', '', // 这不起作用 {childId} '', '', ), 商店：'父商店'， }); this.listpanel = new Ext.Panel({ 布局：'适合'，项目：this.list， }); this.items = this.listpanel; myapp.views.ParentView.superclass.initComponent.apply(this, arguments); }, }); Ext.reg('ParentView', myapp.views.ParentView);

我正在努力解决的事实是“子”和“父”元素分别被另一个元素“子”和“父”包围。

非常感谢任何帮助。

提前致谢，

菲利普

PS 如果我删除外部“children”包装元素并只保留内部“child”元素（并在模型定义中将“children.child”更改为“child”），代码可以正常工作。

PPS 我正在回答我自己的问题：

哇！我忘了在 ParentModel 的字段中添加“children”元素。

应该如下所示（注意：我不需要指定 'hasMany' 或 'associations' 元素 - 不太清楚为什么会这样或包含它们有什么好处）：

Ext.regModel("父模型", { 字段：[ {name：'parentId'，类型：'string'}， {name: 'children'} // 添加此字段非常重要 ], 代理： { 类型：'ajax'，网址：'models.json'，读者：{ 类型：'json'， root: 'parents.parent' // 这很好用 } } }); Ext.regModel('ChildrenModel', { 字段：[{name：'childId'，类型：'string'}] });

模板也可以正常工作：

'', // 这个语法也有效。 {childId} '',

【问题讨论】：

标签： json nested extjs

【解决方案1】：

最近遇到了类似的问题..我想。

您需要指定与模型中所需数据的映射。例如：

Ext.regModel('Album', {
fields: [
    {name: 'artist_name', mapping: 'album.artist.name'},
    {name: 'artist_token', mapping: 'album.artist.token'},
    {name: 'album_name', mapping: 'album.name'},
    {name: 'token', mapping: 'album.token'},
    {name: 'small_cover_url', mapping: 'album.covers.s'},
    {name: 'large_cover_url', mapping: 'album.covers.l'}
]/*,
getGroupString : function(record) {
    return record.get('artist.name')[0];
},*/

});

使用这个 JSON：

   {
  "album":{
     "covers":{
        "l":"http://media.audiobox.fm/images/albums/V3eQTPoJ/l.jpg?1318110127",
        "m":"http://media.audiobox.fm/images/albums/V3eQTPoJ/m.jpg?1318110127",
        "s":"http://media.audiobox.fm/images/albums/V3eQTPoJ/s.jpg?1318110127"
     },
     "artist":{
        "name":"New Order",
        "token":"OyOZqwkN"
     },
     "name":"(The Best Of)",
     "token":"V3eQTPoJ"
  }

【讨论】：

酷 - 映射有效，但是，我仍然遇到问题，因为有时会返回单个对象，有时会返回数组。我在下面提供了另一个答案以及我目前使用的解决方案。

【解决方案2】：

我添加了一个转换器，以允许模板始终如一地访问模型中的数据，无论返回的是单个对象还是数组。

Ext.regModel("ParentModel", {
        fields: [
            {name: 'parentId', type: 'string'},
            {name: 'children', convert: 
            function(value, record) {
                if (value.child) {
                    if (value.child instanceof Array) {
                        return value.child;
                    } else {
                        return [value.child]; // Convert to an Array 
                    }
                }

                return value.child;
            }
        }
        ],

        proxy: {
            type: 'ajax',
            url : 'models.json',
            reader: {
                type: 'json',
                root: 'parents.parent' // this works fine
            }
        }
    });

注意：我实际上不需要定义 ChildrenModel。我想我可以不定义它，因为 Sencha 必须自动进行类型转换。

【讨论】：