重新格式化JSON数据以适合树存储 [英] Re formatting JSON data to fit into tree store
问题描述
我想使用服务器提供的数据制作购物类别的嵌套列表，如下所示:
I want to make Nested list of shopping categories using data provided by server which looks something like this:
{
"status":{"statusCode":15001},
"data":[
{"itemId":1, "name":"Men", "subCategories":[
{"itemId":2, "name":"Clothes", "subCategories":[
{"itemId":3, "name":"Formals", "leaf":true,"subCategories":[]},
{"itemId":4, "name":"Casual", "leaf":true,"subCategories":[]},
{"itemId":5, "name":"Sports", "leaf":true,"subCategories":[]}
]},
{"itemId":6, "name":"Accessories", "subCategories":[
{"itemId":7, "name":"Formals", "leaf":true,"subCategories":[]},
{"itemId":8, "name":"Casual", "leaf":true,"subCategories":[]},
{"itemId":9, "name":"Sports", "leaf":true,"subCategories":[]}
]}
]},
{"itemId":10, "name":"Women", "subCategories":[
{"itemId":11, "name":"Clothes", "subCategories":[
{"itemId":12, "name":"Formals", "leaf":true,"subCategories":[]},
{"itemId":13, "name":"Casual", "leaf":true,"subCategories":[]},
{"itemId":14, "name":"Ethnic", "leaf":true,"subCategories":[]}
]},
{"itemId":15, "name":"Shoes", "subCategories":[
{"itemId":16, "name":"Hells", "leaf":true,"subCategories":[]},
{"itemId":17, "name":"Wedges", "leaf":true,"subCategories":[]},
{"itemId":18, "name":"Sports", "leaf":true,"subCategories":[]}
]}
]}
]
}
由于树结构包装在data元素中，子级包装在与data不同的subCategories标记中，所以我想对此数据进行预处理，以便可以由Nested List直接使用做出这样的回应:
Since tree structure is wrapped in data element and children are wrapped in subCategories tag which is different from data so I wanted to pre-process this data such that it can be used by Nested List directly by making response like this:
{
"categories":[
{"itemId":1, "name":"Men", "categories":[
{"itemId":2, "name":"Clothes", "categories":[
{"itemId":3, "name":"Formals", "leaf":true,"categories":[]},
{"itemId":4, "name":"Casual", "leaf":true,"categories":[]},
{"itemId":5, "name":"Sports", "leaf":true,"categories":[]}
]},
{"itemId":6, "name":"Accessories", "categories":[
{"itemId":7, "name":"Formals", "leaf":true,"categories":[]},
{"itemId":8, "name":"Casual", "leaf":true,"categories":[]},
{"itemId":9, "name":"Sports", "leaf":true,"categories":[]}
]}
]},
{"itemId":10, "name":"Women", "categories":[
{"itemId":11, "name":"Clothes", "categories":[
{"itemId":12, "name":"Formals", "leaf":true,"categories":[]},
{"itemId":13, "name":"Casual", "leaf":true,"categories":[]},
{"itemId":14, "name":"Ethnic", "leaf":true,"categories":[]}
]},
{"itemId":15, "name":"Shoes", "categories":[
{"itemId":16, "name":"Hells", "leaf":true,"categories":[]},
{"itemId":17, "name":"Wedges", "leaf":true,"categories":[]},
{"itemId":18, "name":"Sports", "leaf":true,"categories":[]}
]}
]}
]
}
为此，我重写了Reader的getResponseData，但是从未调用此方法，并且未在存储中加载任何记录.我究竟做错了什么?
For this I was overriding getResponseData of reader but this method never gets called and no records are loaded in store. What am I doing wrong?
这是我的商店:
Ext.define('MyTabApp.store.CategoriesStore',{
extend:'Ext.data.TreeStore',
config:{
model : 'MyTabApp.model.Category',
autoLoad: false,
storeId : 'categoriesStore',
proxy: {
type: 'ajax',
url: Properties.CONFIG_SERVICE_BASE_URL+'topnav/getall',
reader: {
type: 'json',
getResponseData: function(response) {
console.log("in getResponseData"); // Never logged in console
var rText = response.responseText;
var processed = Helper.replaceAll("data","categories",rText);
processed = Helper.replaceAll("subCategories","categories",processed);
var respObj = Ext.JSON.decode(processed);
return respObj.categories;
}
}
},
listeners:{
load: function( me, records, successful, operation, eOpts ){
console.log("categories tree loaded");
console.log(records); // This prints blank array
}
}
}
});
这是模型:
Ext.define('MyTabApp.model.Category', {
extend : 'Ext.data.Model',
config : {
idProperty : 'itemId',
fields : [
{name : 'itemId',type : 'int'},
{name : 'name',type : 'string'}
]
}
});
这是列表:
Ext.define('MyTabApp.view.CategoriesList', {
extend: 'Ext.dataview.NestedList',
alias : 'widget.categorieslist',
config: {
height : '100%',
title : 'Categories',
displayField : 'name',
useTitleAsBackText : true,
style : 'background-color:#999 !important; font-size:75%',
styleHtmlContent : true,
listConfig: {
itemHeight: 47,
itemTpl : '<div class="nestedlist-item"><div style="position:absolute; left:10px; top:10px; color:#222; font-size:130%">{name}</div></div>',
height : "100%"
}
},
initialize : function() {
this.callParent();
var me = this;
var catStore = Ext.create('MyTabApp.store.CategoriesStore');
catStore.load();
me.setStore(catStore);
}
});
处理&的最佳做法是什么?如果接收的数据格式不是我们想要的格式，并且我们无法控制服务，那么该格式会被格式化吗?
What is best practice to process & format received data if it is not in the format we want and we don't have control over services?
推荐答案
我不认为您可以将getResponseData附加到读者的配置中.过去，我使用以下方法.
I dont think you can attach getResponseData to reader's configuration. In past I have used the following approach.
-
创建Ext.data.reader.Json的替代，如下所示.但是不利的是，使用json reader的所有代理都将调用此代理.然后在应用程序的"Requires"部分中添加YourApp.override.data.reader.Json.
Create an override of Ext.data.reader.Json like below. But the downside is that this will be called for all your proxies using json reader. and then add YourApp.override.data.reader.Json in the requires section of your application.
Ext.define('YourApp.override.data.reader.Json', {
override: 'Ext.data.reader.Json',
'getResponseData': function(response) {
// your implementation here
}
Ext.define('YourApp.override.data.reader.Json', {
override: 'Ext.data.reader.Json',
'getResponseData': function(response) {
// your implementation here
}
或者，您可以执行Ext.Ajax.request，然后在成功处理程序上以所需的方式解析数据，然后在商店中设置数据.您还可以在商店的"refresh"事件或"beforeload"事件中编写此代码，并返回false以取消操作
Alternatively you can make a Ext.Ajax.request and on success handler parse the data the way you want and then set the data in your store. You can also write this code in the "refresh" event or "beforeload" event of the store and return false to cancel the action
这篇关于重新格式化JSON数据以适合树存储的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
