Question

我有以下JSON文件（存储为＆＃34; jobInfo.json＆＃34;）：

{
  "job": {
     "id": 1,
     "name": "Job 1",
     "description": "bla bla bla",
     "locations": {
        "type": "FeatureCollection",
        "features": [{
           "id": 1,
           "type": "Feature",
           "geometry": {
              "type": "Point",
              "coordinates": [9.523853, 47.671412]
           },
           "properties": {
              "name": "poi 1"
           }
        }, {
           "id": 2,
           "type": "Feature",
           "geometry": {
              "type": "Point",
              "coordinates": [9.484092, 47.650899]  
           },
           "properties": {
              "name": "poi 2"
           }
        }]
     }
  }
}

我需要从ExtJS 4中读取此文件。在第一步中，它会获取作业属性＆＃39; name＆＃39;和＆＃39; description＆＃39;。我试过使用以下模型：

Ext.define('VZ.model.Job', {
   extend: 'Ext.data.Model',
   alias: 'widget.jobmodel',
   idProperty: 'id',
   fields: [
      {
          name: 'id',
          type: 'integer'
      }, {
          name: 'name',
          type: 'string'
      }, {
          name: 'description',
          type: 'string'                            
      },
     'locations'
   ]
});

在控制器中，我执行以下操作：

var jobfile = "data/jobs/jobInfo.json"
var jobInfo = Ext.create('Ext.data.Store', {
        model: 'VZ.model.Job',
        proxy: {
           type: 'ajax',
           url: jobfile,
           reader: {
              type: 'json'
              root: 'job'
           }
        }
});

但这不起作用。

在第二步中，我需要访问该属性＆＃39;功能＆＃39;作为根。

因为我有json文件（＆＃34; data / jobs / job.json＆＃34;）只有功能......

{
"type": "FeatureCollection",
"features": [{
    "id": 472
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [9.523853, 47.671412]
    },
    "properties": {
        "name": "Flughafen"
    },
}, {
    "id": 458
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [9.484092, 47.650899]
    },
    "properties": {
        "name": "Hafen"
    },

}]
}

......以下代码运作良好：

var jobfile = "data/jobs/job.json"
var jobStore = Ext.create('GeoExt.data.FeatureStore', {
    fields: [
        {name: 'name', type: 'string'}
    ],
    autoLoad: true,
    proxy: Ext.create('GeoExt.data.proxy.Protocol', {
        reader: Ext.create('GeoExt.data.reader.Feature', {**root: 'features'**}),
        protocol: new OpenLayers.Protocol.HTTP({
            url: jobfile
            format: new OpenLayers.Format.GeoJSON({
                internalProjection: new OpenLayers.Projection('EPSG:900913'),
                externalProjection: new OpenLayers.Projection('EPSG:4326')
            })
        })
    })
});

所以，我可以在openlayers上使用info作为图层。

但现在，当我使用＆＃34; jobInfo.json＆＃34;时，我尝试使用＆＃39; job.locations.features＆＃39;作为根。但是我收到了一个错误：

Uncaught TypeError: Cannot read property 'locations' of undefined

有人可以帮助我吗？我做错了什么？

提前谢谢

Answer 1

您的代码存在很多问题

- url should be passed to proxy instead of store
- make use of associations when reading nested data

代码

下面的第一期

工作示例：https://fiddle.sencha.com/#fiddle/uno

Ext.define('VZ.model.Feature', {
   extend: 'Ext.data.Model',
   alias: 'widget.featuremodel',
   idProperty: 'id',
   fields: [
      {
          name: 'id',
          type: 'integer'
      }, {
          name: 'type',
          type: 'string'
      }, {
          name: 'geometry_type',
          type: 'string',
          mapping: 'geometry.type'
      }
   ]
});

Ext.define('VZ.model.Job', {
   extend: 'Ext.data.Model',
   alias: 'widget.jobmodel',
   idProperty: 'id',
   fields: [
      {
          name: 'id',
          type: 'integer'
      }, {
          name: 'name',
          type: 'string'
      }, {
          name: 'description',
          type: 'string'                            
      }
   ],
    associations: [{
        type: 'hasMany',
        model: 'VZ.model.Feature',
        name: 'features',
        associationKey: 'locations.features' // read child data from nested.child_groups
    }]
});


Ext.application({
    name : 'Fiddle',

    launch : function() {
        //Ext.Msg.alert('Fiddle', 'Welcome to Sencha Fiddle!');

        Ext.create('Ext.data.Store', {
            storeId: 'check',
            model: 'VZ.model.Job',
            proxy: {
                type: 'ajax',
                reader: {
                    type: 'json',
                    root: 'job'
                },
                url: 'jobinfo.json'
            },
            autoLoad: true
        });

        // give some time to load data
        setTimeout(function() {
            var store = Ext.getStore('check');
            var rec = store.getAt(0);
            var astRec = rec.featuresStore.getAt(0);

            alert('Job Record ' + rec.get('description'));
            alert('Feature Record ' + astRec.get('geometry_type'));
        }, 1000);

    }
});

Json文件也需要一次更改

{
  "job": [{
     "id": 1,
     "name": "Job 1",
     "description": "bla bla bla",
     "locations": {
        "type": "FeatureCollection",
        "features": [{
           "id": 1,
           "type": "Feature",
           "geometry": {
              "type": "Point",
              "coordinates": [9.523853, 47.671412]
           },
           "properties": {
              "name": "poi 1"
           }
        }, {
           "id": 2,
           "type": "Feature",
           "geometry": {
              "type": "Point",
              "coordinates": [9.484092, 47.650899]  
           },
           "properties": {
              "name": "poi 2"
           }
        }]
     }
  }]
}

如何使用ExtJS 4读取嵌套的json文件

1 个答案: