如何将嵌套的 JSON 获取到网格的 Ext JS 模型答案

【问题标题】：How to GET nested JSON to Ext JS model for grid如何将嵌套的 JSON 获取到网格的 Ext JS 模型
【发布时间】：2019-04-15 13:00:00
【问题描述】：

我希望从 Django API 获取 JSON 来为我的 ext js 网格建模。有 JSON 伪代码：

        "type": "FeatureCollection",
        "features": [
            {
                "id": 31,
                "type": "Feature",
                "geometry": {
                    "coordinates": [
                        [
                            [
                                [],
                                [],
                                [],
                                [],
                                []
                            ]
                        ]
                    ],
                    "type": "MultiPolygon"
                },
                "properties": {
                    "subject": null,
                    "num_of_agree": 16,
                    "uroch": "",
                    "num_allot": null,
                    "num_fca": "prob-01",
                    "ar_fca": "34.80",
                    "expl_ar": 32.2,
                    "cel_nazn": 3,
                    "cat_zas": 3,
                    "video_cat": "D:/work/"
                }
            },

可以看到有嵌套的 JSON。我需要从“属性”中获取字段。

所以在谷歌搜索后，我尝试了 2 种方法。首先是使用映射配置。型号：

    extend:'Ext.data.Model',
    config:'features' ,
    fields: [{
        name: 'subject',
        mapping:features.properties.subject

    },{
        name:'num_of_agree',
        mapping:properties.num_of_agree


    },{
        name:'uroch',
        mapping: properties.uroch

    },{...}```
there is grid code:

Ext.define('Foresto.view.cutworkpanel.CutareaGrid', {
extend:'Ext.grid.Grid',
xtype: 'cut-area-grid',
id: 'cut-area-grid',

requires: [
    'Ext.grid.plugin.Editable',
    on',
    'Ext.grid.plugin.RowExpander',
    'Foresto.view.cutworkpanel.CutareaModel', 
],

title: 'List',



width: '100%',
height: '90%',

hideHeaders: false,
autoScroll: true,

tools: [{
    type:'help'
}],

store: {
    model:'Foresto.view.cutworkpanel.CutareaModel', 
    autoLoad: true,
    pageSize:0,
    proxy: {
        type:'ajax',
        url:'/api/cutarea-fca/',
        reader:{
            type:'json',
            rootProperty: 'results'
                var requestURL = '/api/cutarea-fca/'
    }
}
},

plugins: [{
    type: 'grideditable',
    triggerEvent: 'doubletap',
    enableDeleteButton: true,
    formConfig: null, // See more below
    renderTo: 'map-panel',

    defaultFormConfig: {
        xtype: 'formpanel',
        title:'EDIT',
        scrollable: true,
        items: {
            xtype: 'fieldset'
        }
    },


columns: [{
    text: 'subject',
    flex: 1,
    minWidth: 200,
    dataIndex: 'subject',
    editable:true

},{
    text:'agreement',
    dataIndex:'num_of_agree',
    minWidth: 200,
    editable:true

},{
    text:'сфоткай',
    dataIndex:'num_fca',
    minWidth: 220,
    editable:true
}



and another variant of mod:

``` Ext.define('Foresto.view.cutworkpanel.CutareaModel',{
    extend:'Ext.data.Model',
    config:'features' ,
    fields: [{
        name: 'subject',
        mapping:function(properties){
            return properties.subject;
        }
    },{
        name:'num_of_agree',
        mapping:function(properties){
            return properties.num_of_agree;
        }

    },{
        name:'uroch',
        mapping:function(properties){
            return properties.uroch;
        }

这两种方法都不适合我。请告诉我如何修复以及使用什么。

UPD 我使用答案信息。我使用了这种方法（在商店中定义记录配置）：rootProperty: 'results', record: 'features' //in Store。并配置：'propetries' //in the CutareaModel.js 它在网格中只给了我 1 行：[object Object] [object Object] [object Object] 等，用于我所有的字段数

【问题讨论】：

你用的是什么数据库？
@I'mOnlyVueman django 像一个后端，postgresql 10 像一个 DB

标签： javascript json extjs extjs6

【解决方案1】：

您可以在商店阅读器中使用正确的 rootProperty 和 record 配置，如下所示

store: {
    model:'Foresto.view.cutworkpanel.CutareaModel', 
    autoLoad: true,
    pageSize:0,
    proxy: {
        type:'ajax',
        url:'/api/cutarea-fca/',
        reader:{
            type:'json',
            rootProperty: 'features',
            record: 'properties'
        }
    }
}

【讨论】：

我使用了这个方法，但是像这样：rootProperty: 'results', record: 'features' //in Store.并配置：'propetries' //在 CutareaModel.js 中
它只给了我 1 行网格中的 [object Object] [object Object] [object Object] 等，用于我所有的字段数

【解决方案2】：

rootProperty:'results.features[0].properties'，因为我的 JSON 中的功能已经到达。所以：

store: {
    model:'Foresto.view.cutworkpanel.CutareaModel', 
    proxy: {
        type:'ajax',
        url:'/api/',
        reader:{
            type:'json',
            rootProperty:'results.features[0].properties',
    }
}
}

【讨论】：