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

时间:2015-09-29 10:47:55

标签: javascript json extjs extjs4 openlayers

我有以下JSON文件(存储为" jobInfo.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中读取此文件。在第一步中,它会获取作业属性' name'和' description'。我试过使用以下模型:

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

但这不起作用。

第二步中,我需要访问该属性'功能'作为根。

因为我有json文件(" data / jobs / job.json")只有功能......

{
"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作为图层。

但现在,当我使用" jobInfo.json"时,我尝试使用' job.locations.features'作为根。但是我收到了一个错误:

Uncaught TypeError: Cannot read property 'locations' of undefined

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

提前谢谢

1 个答案:

答案 0 :(得分: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"
           }
        }]
     }
  }]
}