如何将嵌套的JSON转换为表格的Ext JS模型

时间:2019-04-15 13:00:00

标签: javascript json extjs extjs6

我希望从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。我需要从“属性”中获取字段。

因此,经过一些Google搜索,我尝试了两种方法。 首先,它使用映射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 而且它只给我网格中的每一行,其中包括:[object Object] [object Object] [object Object]等。

2 个答案:

答案 0 :(得分:0)

您可以在商店阅读器中使用正确的 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'
        }
    }
}

答案 1 :(得分:0)

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