How to GET nested JSON to Ext JS model for grid

Question

I wish to GET JSON from Django API to model for my ext js Grid. There is JSON pseudo code :

        "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/"
                }
            },

You can see that there is nested JSON. I need to GET fields from "properties".

So after some google searching, I tried 2 ways. First it is using of mapping congig. model:

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

Both approaches aren't working for me. Please tell me how to fix and what to use.

UPD I use an answer information. I used this method (define record config in store) like that: rootProperty: 'results', record: 'features' //in Store. And config: 'propetries' //in the CutareaModel.js And it give me only 1 row in grid with: [object Object] [object Object] [object Object] etc. for all of my nubers of fields

Answer 1

You can use the proper rootProperty and record config in the store reader as below

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', cause features in my JSON is arrive. so:

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