PDA

View Full Version : How to convert JSON data so that it can be used in treepanel?



shekhar.kotekar
7 Feb 2012, 9:39 PM
Hi,

I am getting JSON in the following format :



{
"queryInfo":{"totalRows":"100"},

"resultset":[
["India","India","India",63],
["India",""," Tirupati ",1],
["India",""," UTTARPARA ",1],
["India","Andhra Pradesh",null,61],
["India","Andhra Pradesh"," Chittoor ",1],
["India","Andhra Pradesh"," Guntur ",2],
["India","Andhra Pradesh"," Hyderabad ",58]
],
"metadata":[
{"colIndex":0,"colType":"String","colName":"Country"},
{"colIndex":1,"colType":"String","colName":"State"},
{"colIndex":2,"colType":"String","colName":"City"},
{"colIndex":3,"colType":"Integer","colName":"customer_count"}
]
}


I do not have any control on the way I get it and I want JSON in following format in order to display it in Tree Panel :



"resultset": [
countries: [
{
name: "India",
customer_count: 63
states: [
{
name: "Andhra Pradesh",
customer_count: 61,
cities: [
{
name: "Tirupati",
customer_count: 1,
leaf: true },
{
name: "UTTARPARA",
customer_count: 1,
leaf: true
},
{
name: "Chittoor",
customer_count: 1,
leaf: true
},

{
name: "Guntur",
customer_count: 2,
leaf: true
},
{
name: "Hydrabad",
customer_count: 58,
leaf: true
}
]
}
]


Can anyone please tell me how to convert this JSON object?

rushi2440
7 Feb 2012, 9:45 PM
which server side technology you are using ?? JAVA, PHP, .net



Yogendra Singh

Sr. Programmer

Kintudesigns.com

shekhar.kotekar
7 Feb 2012, 9:52 PM
I am getting this JSON data from Pentaho CDA.

friend
8 Feb 2012, 6:14 AM
Here's a tree/menu example and the proper format of the JSON which populates the tree. Note that the children[] array on the leaf nodes isn't necessary. This is an artifact of my generic/server-side code which models tree nodes:

31488



[
{
"text": "Admin",
"id": "menu.admin",
"iconCls": "folder",
"leaf": false,
"expanded": true,
"children": [
{
"text": "Active Sessions",
"id": "admin.activeSessions",
"iconCls": "iconActiveUsers",
"leaf": true,
"expanded": false,
"children": []
},{
"text": "Users & Roles",
"id": "admin.users",
"iconCls": "iconUsers",
"leaf": true,
"expanded": false,
"children": []
}
]
},
{
"text": "Maintenance",
"id": "menu.maint",
"iconCls": "folder",
"leaf": false,
"expanded": true,
"children": [
{
"text": "Cities",
"id": "maint.city",
"iconCls": "iconCities",
"leaf": true,
"expanded": false,
"children": []
},
{
"text": "Facilities",
"id": "maint.facility",
"iconCls": "iconFacility",
"leaf": true,
"expanded": false,
"children": []
},
{
"text": "Services",
"id": "maint.services",
"iconCls": "iconService",
"leaf": true,
"expanded": false,
"children": []
}
]
},
{
"text": "Utilities",
"id": "menu.util",
"iconCls": "folder",
"leaf": false,
"expanded": true,
"children": [
{
"text": "Email Users",
"id": "util.email",
"iconCls": "iconEmail",
"leaf": true,
"expanded": false,
"children": []
},
{
"text": "Links",
"id": "util.links",
"iconCls": "iconLinks",
"leaf": true,
"expanded": false,
"children": []
},
{
"text": "User Profile",
"id": "util.userProfile",
"iconCls": "iconUser",
"leaf": true,
"expanded": false,
"children": []
}
]
}
]

shekhar.kotekar
8 Feb 2012, 7:07 AM
Hi,

I do not have any control over JSON string I am getting. Actually, the JSON string which I receive is the result of executing MDX query on Pentaho BI server. So, do I need to put some intermediate code/module which will convert this JSON string to the format expected by TreeStore?

Thanks for help !


Here's a tree/menu example and the proper format of the JSON which populates the tree. Note that the children[] array on the leaf nodes isn't necessary. This is an artifact of my generic/server-side code which models tree nodes:

31488



[
{
"text": "Admin",
"id": "menu.admin",
"iconCls": "folder",
"leaf": false,
"expanded": true,
"children": [
{
"text": "Active Sessions",
"id": "admin.activeSessions",
"iconCls": "iconActiveUsers",
"leaf": true,
"expanded": false,
"children": []
},{
"text": "Users & Roles",
"id": "admin.users",
"iconCls": "iconUsers",
"leaf": true,
"expanded": false,
"children": []
}
]
},
{
"text": "Maintenance",
"id": "menu.maint",
"iconCls": "folder",
"leaf": false,
"expanded": true,
"children": [
{
"text": "Cities",
"id": "maint.city",
"iconCls": "iconCities",
"leaf": true,
"expanded": false,
"children": []
},
{
"text": "Facilities",
"id": "maint.facility",
"iconCls": "iconFacility",
"leaf": true,
"expanded": false,
"children": []
},
{
"text": "Services",
"id": "maint.services",
"iconCls": "iconService",
"leaf": true,
"expanded": false,
"children": []
}
]
},
{
"text": "Utilities",
"id": "menu.util",
"iconCls": "folder",
"leaf": false,
"expanded": true,
"children": [
{
"text": "Email Users",
"id": "util.email",
"iconCls": "iconEmail",
"leaf": true,
"expanded": false,
"children": []
},
{
"text": "Links",
"id": "util.links",
"iconCls": "iconLinks",
"leaf": true,
"expanded": false,
"children": []
},
{
"text": "User Profile",
"id": "util.userProfile",
"iconCls": "iconUser",
"leaf": true,
"expanded": false,
"children": []
}
]
}
]

shekhar.kotekar
8 Feb 2012, 7:08 AM
Hi friend,

Thanks for reply. I do not have any control over JSON string I am getting. Actually, the JSON string which I receive is the result of executing MDX query on Pentaho BI server. So, do I need to put some intermediate code/module which will convert this JSON string to the format expected by TreeStore?

Thanks for help !


Here's a tree/menu example and the proper format of the JSON which populates the tree. Note that the <strong>children[] </strong>array on the leaf nodes isn't necessary. This is an artifact of my generic/server-side code which models tree nodes:<br>
<br>
<img src="http://www.sencha.com/forum/attachment.php?attachmentid=31488&amp;stc=1" attachmentid="31488" alt="" id="vbattach_31488" class="previewthumb"><br>
<br>

<br>
[<br>
&nbsp;&nbsp; &nbsp;{<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"text": "Admin",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"id": "menu.admin",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"iconCls": "folder",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"leaf": false,<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"expanded": true,<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"children": [<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"text": "Active Sessions",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"id": "admin.activeSessions",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"iconCls": "iconActiveUsers",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"leaf": true,<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"expanded": false,<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"children": []<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},{<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"text": "Users &amp;amp; Roles",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"id": "admin.users",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"iconCls": "iconUsers",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"leaf": true,<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"expanded": false,<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"children": []<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;]<br>
&nbsp;&nbsp; &nbsp;},<br>
&nbsp;&nbsp; &nbsp;{<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"text": "Maintenance",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"id": "menu.maint",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"iconCls": "folder",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"leaf": false,<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"expanded": true,<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"children": [<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"text": "Cities",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"id": "maint.city",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"iconCls": "iconCities",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"leaf": true,<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"expanded": false,<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"children": []<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"text": "Facilities",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"id": "maint.facility",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"iconCls": "iconFacility",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"leaf": true,<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"expanded": false,<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"children": []<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"text": "Services",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"id": "maint.services",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"iconCls": "iconService",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"leaf": true,<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"expanded": false,<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"children": []<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;]<br>
&nbsp;&nbsp; &nbsp;},<br>
&nbsp;&nbsp; &nbsp;{<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"text": "Utilities",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"id": "menu.util",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"iconCls": "folder",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"leaf": false,<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"expanded": true,<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;"children": [<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"text": "Email Users",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"id": "util.email",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"iconCls": "iconEmail",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"leaf": true,<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"expanded": false,<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"children": []<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"text": "Links",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"id": "util.links",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"iconCls": "iconLinks",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"leaf": true,<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"expanded": false,<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"children": []<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"text": "User Profile",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"id": "util.userProfile",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"iconCls": "iconUser",<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"leaf": true,<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"expanded": false,<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"children": []<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}<br>
&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;]<br>
&nbsp;&nbsp; &nbsp;}<br>
]<br>

friend
9 Feb 2012, 7:04 AM
There's no native/simple way to transcode the JSON you're receiving into a Tree Panel compatible format. You'll have to write the code to do that.

sskow200
9 Feb 2012, 9:10 AM
You can attach a listener to your store 'load' event and manually recreate the data to fit your requirement.



var myStore = Ext.create('Ext.data.Store', {//configuration ommitted});
myStore.on('load', function(store, records, success) {
if(success && records.length > 0){
var newData = [];
Ext.each(records, function(record, index){
//do some organizing of each record and add to your list
newData.push(newRecord);
});

store.loadData(newData);
}
});

shekhar.kotekar
9 Feb 2012, 10:22 PM
@sskow200,

Thanks a ton ! I was looking for something like 'load' listener only. I am trying to use it now in my code but I am facing some problems.

1) I was under impression that 'success' parameter to 'load' listener method tells us whether operation was successful or not, but 'success' parameter contains one array. I dont know what do that array contains but after invoking 'success.length' property I found out that it contains actual number of rows which my server side code had sent as a response. So I think 'success' property actually contains my data, but I am not sure about it.

2) If I use Ext.each() method on 'records' or 'success' parameter, I am not able to see actual data loaded. How to see the actual data?

Code for store looks as follows :



Ext.define('myCompany.store.customerDistribution', {
extend: 'Ext.data.TreeStore',
autoLoad: true,

proxy: {
type: 'ajax',
url: 'data/customerDistribution/customerCount.json',
reader: {
type: 'array',
root: 'resultset'
}
},
listeners: {
load: function(store, records, success) {
/*console.log('store - ' + store +
', typeof(store) - ' + typeof(store) +
', records - ' + records +
', records data - ' + records.data +
', success - ' + success +
', type of success - ' + typeof(success)+
', success length - ' + success.length);
if(records == true) {
console.log('records is data property...');
}
if(store == true) {
console.log('store is a data property...');
}
for(r in records) {
console.log(r + '\ttypeof(r) -> ' + typeof(r));
} */
if(success && records.length > 0) {
var allCountries = [];
var previousCountry = undefined;

var countryIndex = 0;
var stateIndex = 1;
var cityIndex = 2;
var customerCountIndex = 3;

Ext.each(records, function(record, index){
console.log('record - ' + record[0] + ', ' + record[1]);
});
}
}
}
});


Thanks again for your idea.

friend
10 Feb 2012, 4:56 AM
The reader in your store's proxy should probably be configured like this:



reader: {
type: 'json',
root: 'resultset'
}

sskow200
10 Feb 2012, 6:42 AM
In your 'load' function, you should do console.log(arguments); to see what you're getting back. It's possible that your function params are incorrect. The success param should be a boolean value not necessarily indicating you got data back but that the request to the server did not fail.