本文介绍了extjs在模板中解析嵌套json的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
尝试（不成功）显示嵌套json中的数据。
JSON可能看起来像：
{
联系人：[
{
id：1，
client_id：135468714603，
地址：[
{
id：1，
contact_id：1，
address_id：16，
地址：{
0 ：{
id：16，
address：123 Some Rd，
address2：，
city：Toen ，
state：VS，
zip_code：11111，
country：USA
}
}
}，
{
id：6，
contact_id：1，
address_id：26，
地址：{
0：{
id：26，
地址 ，
address2：，
city：Twn，
state：BD，
zip_code：11112，
country：USA
}
}
}
]
}，
{
id： 10，
client_id：null，
地址：[
{
id：8，
contact_id：10 ，
address_id：28，
address：{
0：{
id：28，
address ：5 4路，
address2：，
city：TWND，
state：TT，
zip_code：11113 ，
country：USA
}
}
}，
{
id：9，
contact_id：10，
address_id：29，
is_mailing_address：0，
is_primary_address：0，
display_priority ：0，
地址：{
0：{
id：29，
地址：6路，
address2：，
city：TOEOEOWN，
state：PY，
zip_code：11116，
country：USA
}
}
}，
{
id：10 ，
contact_id：10，
address_id：30，
address：{
0：{
id ：30，
地址：PO Box 9，
address2：，
city：TOYN，
state ：GF，
zip_code：11118，
country：USA
}
}
}
]
{
id：11，
client_id：null，
contact_id：11，
：[
{
id：11，
contact_id：11，
address_id：33，
is_mailing_address：0 b $ bis_primary_address：0，
display_priority：0，
地址：{
0：{
id 33，
address：4 Street，
address2：，
city：TEOIN，
state ，
zip_code：11119，
country：USA
}
}
}
]
}
]
}
我已经尝试将模型字段映射到我需要的例如联系人模型>地址字段>映射：地址），但这不起作用，因为我需要映射到地址[0] .address [0]来获取显然丢弃其他地址的数据。
我也试过玩过协会，但这似乎是单独的模特和商店。这里的想法是不要单独请求联系人，然后他们的地址。
我也尝试在模板中直接进入json（这似乎是最直截了当的方式） {addresses.address.city}不起作用。
思维很简单：抓住一些json，并在应用的不同部分显示所述json的不同部分。
经验非常糟糕。
有人可以解释如何映射这些嵌套的json项目，以便可以从模板访问？
模板：
{
xtype：'container'，
flex：1，
id： 'mainPanel'，
items：[
{
xtype：'dataview'，
hidden：false，
id：'clientsContacts'，
minHeight： 200，
itemSelector：'div'，
itemTpl：[
'{id} | {last_name} | {first_name} | {关系} | {address}'
]，
store：'Contacts'
}
]
}
商店：
Ext.define（'MyApp.store.Contacts' ，{
extends：'Ext.data.Store'，
要求：[
'MyApp.model.Contacts'
]，
constructor：function（cfg）{
var me = this;
cfg = cfg || {};
me.callParent（[Ext.apply（{
autoLoad：
storeId：'Contacts'，
model：'MyApp.model.Contacts'，
proxy：{
type：'ajax'，
extraParams：{
id：''，
格式：'json'
}，
url：'/ api / contacts /'，// json
reader：{
type：'json'，
root：'contacts'
}
}，
listeners：{
load：{
// fn：me.onJsonstoreLoad，
// scope：me
}
}
}，cfg）]）;
}，
}）;
型号：
Ext.define 'MyApp.model.Contacts'，{
extends：'Ext.data.Model'，
使用：
//'MyApp.model.Client'，
//'MyApp.model.contactAddressModel'
]，
fields：[
{
名称：'client_id'
}，
{
名称：'id'
}，
{
名称：'地址'，
mapping：'addresses'// does not work
// mapping：'addresses [0] .address [0]'// works，but only for the first address duh
}
]，
}）;
通过Sencha Architect使用extjs 4.1
任何帮助将不胜感激。
谢谢。
解决方案
我想我得到了（希望是正确）。
因此，为每个嵌套的数据组创建一个字段。所以我有一个联系人模型。在该模型中有以下这些字段：
id
client_id
地址//映射到地址
地址//映射到addresses.address
然后在模板中：
< br>
< tpl for =地址>
id：{id}< br>
addy id：{address_id}< br>
< tpl for =address>
{city} {state}，{zip}< br>
< / tpl>
< / tpl>
这是整个事情的样子： / p>
查看
Ext.define（'MyApp.view.MyView' ，{
extends：'Ext.view.View'，
height：250，
width：400，
itemSelector：'div'，
存储：'MyJsonStore'，
initComponent：function（）{
var me = this;
Ext.applyIf（me，{
itemTpl： [
'< br>'，
'< tpl for =地址>'，
'id：{id}< br>'，
' addy id：{address_id}< br>'，
'< b>'，
'< tpl for =address>'，
'{city} {state }，$ {
'< / b>< / TPL>，
‘’，
‘< HR>’，
‘’
]
}）;
me.callParent（arguments）;
}
}）;
商店
Ext.define（'MyApp.store.MyJsonStore'，{
extends：'Ext.data.Store'，
要求：[
'MyApp.model .contacts'
]，
构造函数：function（cfg）{
var me = this;
cfg = cfg || {};
我.callParent（[Ext.apply（{
storeId：'MyJsonStore'，
model：'MyApp.model.Contacts'，
data：{
contacts：[
{
id：'1'，
client_id：'135468714603'，
地址：[
{
id：'1'，
contact_id： '1'，
address_id：'16'，
地址：{
'0'：{
id：'16'，
address：'123 Some Rd'，
address2：''，
city：'Toen'，
state：'VS' ，
zip_code：'11111'，
country：'USA'
}
}
}，
{
id：'6' ，
contact_id：'1'，
address_id：'26'，
地址：{
id：'26'，
地址：'1 Other Road'
address2：' '，
city：'Twn'，
state：'BD'，
zip_code：'11112'，
country：'USA'
}
]
{
id：'10'，
client_id：null，
地址：[
{
id：'8'，
contact_id：'10'，
address_id：'28'，
地址：{
id：'28'，
地址： '54 Road'，
address2：''，
城市：'TWND'，
状态：'TT'，
zip_code：'11113'，
国家：'美国'
}
}，
{
id：'9'，
contact_id：'10'，
address_id：'29'，
is_mailing_address：'0'，
is_primary_address：'0' ，
display_priority：'0'，
地址：{
id：'29'，
地址：'6 Road'，
address2：''，
city：'TOEOEOWN'，
状态：'PY'，
zip_code：'11116'，
国家：'美国'
}
}，
{
id：'10' ，
contact_id：'10'，
address_id：'30'，
地址：{
id：'30'，
地址：'PO Box 9'
address2：''，
city：'TOYN'，
state：'GF'，
zip_code：'11118'，
country：'USA'
}
}
]
}，
{
id：'11'，
client_id：null，
contact_id：'11'，
地址：[
{
id：'11'，
contact_id：'11'，
address_id：'33'，
is_mailing_address：'0'，
is_primary_address：'0 '，
display_priority：'0'，
地址：{
id：'33'，
地址：'4 Street'，
address2：''，
city：'TEOIN'，
state：'TG'，
zip_code：'11119'，
国家：'美国'
}
}
]
}
]
}，
代理：{
type：'memory'，
reader：{
type：'json'，
root：'contacts'
}
}
}，cfg）]）;
}
}）;
模型
Ext.define（'MyApp.model.Contacts'，{
extends：'Ext.data.Model'，
fields：[
{
名称：'id'
}，
{
名称：'client_id'
}，
{
名称：'地址'，
映射：'地址'
}，
{
名称：'地址'，
映射：'地址'
}
]
}）;
Trying (unsuccessfully) to display data from nested json.
JSON might look something like:
{
"contacts": [
{
"id": "1",
"client_id": "135468714603",
"addresses": [
{
"id": "1",
"contact_id": "1",
"address_id": "16",
"address": {
"0": {
"id": "16",
"address": "123 Some Rd",
"address2": "",
"city": "Toen",
"state": "VS",
"zip_code": "11111",
"country": "USA"
}
}
},
{
"id": "6",
"contact_id": "1",
"address_id": "26",
"address": {
"0": {
"id": "26",
"address": "1 Other Road",
"address2": "",
"city": "Twn",
"state": "BD",
"zip_code": "11112",
"country": "USA"
}
}
}
]
},
{
"id": "10",
"client_id": null,
"addresses": [
{
"id": "8",
"contact_id": "10",
"address_id": "28",
"address": {
"0": {
"id": "28",
"address": "54 Road",
"address2": "",
"city": "TWND",
"state": "TT",
"zip_code": "11113",
"country": "USA"
}
}
},
{
"id": "9",
"contact_id": "10",
"address_id": "29",
"is_mailing_address": "0",
"is_primary_address": "0",
"display_priority": "0",
"address": {
"0": {
"id": "29",
"address": "6 Road",
"address2": "",
"city": "TOEOEOWN",
"state": "PY",
"zip_code": "11116",
"country": "USA"
}
}
},
{
"id": "10",
"contact_id": "10",
"address_id": "30",
"address": {
"0": {
"id": "30",
"address": "PO Box 9",
"address2": "",
"city": "TOYN",
"state": "GF",
"zip_code": "11118",
"country": "USA"
}
}
}
]
},
{
"id": "11",
"client_id": null,
"contact_id": "11",
"addresses": [
{
"id": "11",
"contact_id": "11",
"address_id": "33",
"is_mailing_address": "0",
"is_primary_address": "0",
"display_priority": "0",
"address": {
"0": {
"id": "33",
"address": "4 Street",
"address2": "",
"city": "TEOIN",
"state": "TG",
"zip_code": "11119",
"country": "USA"
}
}
}
]
}
]
}
I've tried mapping model fields to what I need (e.g. contacts model > addresses field > mapping: addresses), but this doesn't work because I'd need to map to addresses[0].address[0] to get the data which obviously discards the other addresses.
I've also tried playing around with associations, but this appears to be separate models and stores. The idea here is to not make a separate request for the contacts and then their addresses.
I've also tried digging into the json straight in the template (which seemed to be the most straightforward way) e.g. {addresses.address.city} which doesn't work.
The thinking is simple: grab some json, and display different parts of said json in different parts of the app.
The experience has been dreadful.
Can someone explain how to map these nested json items so that they are accessible from a template?
Template:
{
xtype: 'container',
flex: 1,
id: 'mainPanel',
items: [
{
xtype: 'dataview',
hidden: false,
id: 'clientsContacts',
minHeight: 200,
itemSelector: 'div',
itemTpl: [
'{id} | {last_name} | {first_name} | {relationship} | {addresses}'
],
store: 'Contacts'
}
]
}
Store:
Ext.define('MyApp.store.Contacts', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.Contacts'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: false,
storeId: 'Contacts',
model: 'MyApp.model.Contacts',
proxy: {
type: 'ajax',
extraParams: {
id: '',
format: 'json'
},
url: '/api/contacts/', //the json
reader: {
type: 'json',
root: 'contacts'
}
},
listeners: {
load: {
//fn: me.onJsonstoreLoad,
//scope: me
}
}
}, cfg)]);
},
});
Model:
Ext.define('MyApp.model.Contacts', { extend: 'Ext.data.Model',
uses: [
//'MyApp.model.Client',
//'MyApp.model.contactAddressModel'
],
fields: [
{
name: 'client_id'
},
{
name: 'id'
},
{
name: 'addresses',
mapping: 'addresses'//doesn't work
//mapping: 'addresses[0].address[0]' //works, but only for the first address duh
}
],
});
Using extjs 4.1 via Sencha Architect.
Any help would be greatly appreciated.
Thanks.
解决方案
I think I got it (hopefully it's correct).
So, create a field for each nested group of data you need. So I have a Contacts model. In that model there are these fields:
id
client_id
addresses //mapped to addresses
address //mapped to addresses.address
then in the template:
<br>
<tpl for="addresses">
id: {id}<br>
addy id: {address_id}<br>
<tpl for="address">
{city} {state}, {zip}<br>
</tpl>
</tpl>
This is what the whole thing looks like:
View
Ext.define('MyApp.view.MyView', {
extend: 'Ext.view.View',
height: 250,
width: 400,
itemSelector: 'div',
store: 'MyJsonStore',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
itemTpl: [
'<br>',
'<tpl for="addresses">',
' id: {id}<br>',
' addy id: {address_id}<br>',
' <b>',
' <tpl for="address">',
' {city} {state}, {zip}<br><br>',
' </tpl>',
' </b>',
'',
'</tpl>',
'',
'<hr>',
''
]
});
me.callParent(arguments);
}
});
Store
Ext.define('MyApp.store.MyJsonStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.Contacts'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'MyJsonStore',
model: 'MyApp.model.Contacts',
data: {
contacts: [
{
id: '1',
client_id: '135468714603',
addresses: [
{
id: '1',
contact_id: '1',
address_id: '16',
address: {
'0': {
id: '16',
address: '123 Some Rd',
address2: '',
city: 'Toen',
state: 'VS',
zip_code: '11111',
country: 'USA'
}
}
},
{
id: '6',
contact_id: '1',
address_id: '26',
address: {
id: '26',
address: '1 Other Road',
address2: '',
city: 'Twn',
state: 'BD',
zip_code: '11112',
country: 'USA'
}
}
]
},
{
id: '10',
client_id: null,
addresses: [
{
id: '8',
contact_id: '10',
address_id: '28',
address: {
id: '28',
address: '54 Road',
address2: '',
city: 'TWND',
state: 'TT',
zip_code: '11113',
country: 'USA'
}
},
{
id: '9',
contact_id: '10',
address_id: '29',
is_mailing_address: '0',
is_primary_address: '0',
display_priority: '0',
address: {
id: '29',
address: '6 Road',
address2: '',
city: 'TOEOEOWN',
state: 'PY',
zip_code: '11116',
country: 'USA'
}
},
{
id: '10',
contact_id: '10',
address_id: '30',
address: {
id: '30',
address: 'PO Box 9',
address2: '',
city: 'TOYN',
state: 'GF',
zip_code: '11118',
country: 'USA'
}
}
]
},
{
id: '11',
client_id: null,
contact_id: '11',
addresses: [
{
id: '11',
contact_id: '11',
address_id: '33',
is_mailing_address: '0',
is_primary_address: '0',
display_priority: '0',
address: {
id: '33',
address: '4 Street',
address2: '',
city: 'TEOIN',
state: 'TG',
zip_code: '11119',
country: 'USA'
}
}
]
}
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'contacts'
}
}
}, cfg)]);
}
});
Model
Ext.define('MyApp.model.Contacts', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id'
},
{
name: 'client_id'
},
{
name: 'addresses',
mapping: 'addresses'
},
{
name: 'address',
mapping: 'address'
}
]
});
这篇关于extjs在模板中解析嵌套json的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！