如何使用ExtJS读取一个嵌套的json文件
How to read a nested json file using ExtJS 4
我有以下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'
]
});
在a控制器中,我做了以下操作:
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'
}
}
});
在第二步我需要访问属性'features'作为根。
因为我有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"。作为根。但是我得到一个错误:
Uncaught TypeError: Cannot read property 'locations' of undefined
谁能帮帮我?我做错了什么?提前感谢
你的代码有很多问题
- 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"
}
}]
}
}]
}
相关文章:
- 如果类不是一个选项,如何在使用 jQuery 时控制(避免)嵌套 html 元素的样式
- 嵌套到另一个函数中的Fancybox函数;不起作用
- 我怎么能把一个类嵌套在另一个类中呢
- 在Twitter BootStrap嵌套下拉列表中托管一个选择列表(IE 9特定)
- 它在另一个函数中嵌套后不会输出文本
- 有没有一种方法可以在所有嵌套循环之后放置一个标签,以便在一步中将它们全部打断
- 从 angularjs 中的嵌套成功函数返回一个值
- 从另一个(初学者内部)访问嵌套的javascript函数
- 一个发布对另一个发布隐藏嵌套字段
- 嵌套另一个 Ajax 请求时,Ajax 响应处理中断
- Javascript OOP-从函数返回一个值;s在对象内部's方法(嵌套函数)
- 每行中都有一个嵌套表的数据表
- 转换嵌套'对于'循环成一个承诺,为了一个承诺?嵌套承诺
- 如果“上一个”为空,则清除下一个嵌套的选择标记
- 如何从jQuery中的另一个函数调用嵌套函数
- 将此(对象)传递到一个对象方法嵌套方法中
- 在JavaScript中,从一组数组递归地构建一个字典/嵌套对象
- 如何在 Javascript 中创建一个模拟 100 行和 10 列网格的嵌套循环
- 如何嵌套一个项目数组,将它们除以它们的第一个值
- 在lodash中嵌套一个父子关系,给定父id和子