如何將嵌套的JSON GET轉換為網格的Ext JS模型

Question

我希望從Django API中獲取JSON來為我的ext js Grid建模。 有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。 我需要從“屬性”中獲取字段。

所以在谷歌搜索之后，我嘗試了兩種方法。 首先是使用映射congig。 模型：

    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配置： 'propetries' //in the CutareaModel.js它在網格中只給出了一行：[object Object] [object Object] [object Object]等我所有的字段nubers

Answer 1

您可以在商店閱讀器中使用正確的rootProperty和記錄配置，如下所示

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

Answer 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',
    }
}
}