PDA

View Full Version : ArrayList to JSON, then to Tree



cyk
20 Jan 2009, 6:33 AM
Hi

I have an List list = ArrayList<File>() at the controller side (Spring MVC framework). However, I realised that JSONArray jsonObj = JSONArray.fromObject(list) does not work.
Any idea of how I can convert this without errors? So far, it seems that the online examples are for those ArrayList without <File>.

Anyway, I am returning this JSON object to the client side. Since this JSON object is for the tree, should I construct the JSON format at the controller side? If yes, how do I manually construct a JSON format (tree format) that I wanted? And how can I read this JSON object at the client side?

Thanks :)

Animal
20 Jan 2009, 6:44 AM
Obviously, you can't serialize a java.io.File object.

What do you want, the file names? Just loop through the ArrayList adding the name into a JSONArray.

cyk
21 Jan 2009, 4:57 AM
Obviously, you can't serialize a java.io.File object.

What do you want, the file names? Just loop through the ArrayList adding the name into a JSONArray.

Hi Animal. Thanks for your reply. As a test, I have added some JSONObjects into a list and create a new JSONArray object at the servlet side.

However, I am not able to access the test data via the JSONStore at the client side. I suspect it is the problem with id and root. I am not sure what to indicate for that. Does anyone has a simple example on that? (return a JSONArray and access it via JSONStore)

I am adding the content of JSONStore to a tree. Thanks.

Animal
21 Jan 2009, 5:07 AM
Post the JSON and your Reader and Storee creation code.

cyk
21 Jan 2009, 10:29 PM
Servlet

public class FileBrowserController implements Controller{

public ModelAndView handleRequest(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException{

ModelAndView mav = new ModelAndView("WEB-INF/jsp/file-browser.jsp");

List list = new ArrayList();
JSONObject obj = new JSONObject();
obj.put("text", "Absolute");
obj.put("id", "absolute");
list.add(obj);
JSONArray jsonList = JSONArray.fromObject(list);

return mav.addObject("jsonList", jsonList);
}

}JavaScript


// Some other code here

var treePanel=new Ext.tree.TreePanel({
id: 'tree-panel',
title: 'Folders',
region: 'north',
split: true,
height:538,
minSize: 150,
autoScroll: true,

rootVisible: false,
lines: false,
singleExpand: true,
useArrows: true,

loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.TreeNode({})
});

treePanel.setRootNode(treePanel.root);

var json = new Ext.data.JsonStore({
url: 'FileBrowserController',
fields: [
{name: 'text'},
{name: 'id'}
],

baseParams:{
method:'handleRequest',
returnFormat: 'JSON',
}
root: 'text',
id: 'id'

});

for(var i=0; len=json.length; i<len; i++)
treePanel.root.appendChild(treePanel.getLoader().createNode(json[i]));

Animal
22 Jan 2009, 12:54 AM
I can't read it. Use code tags.

cyk
22 Jan 2009, 4:36 AM
Hi Animal. I have edited the code above. Is that what you mean by code tag? If not, how do I do it? Thanks!

Animal
22 Jan 2009, 5:02 AM
yes and what does the json look like?

cyk
22 Jan 2009, 5:57 AM
yes and what does the json look like?

I don't quite understand this statement. Do you mean where is the code? Or what values am I expecting for the Json?

I am returning a JsonArray via the servlet to the JavaScript. Then I try to retrieve the Json via a Jsonstore. Is that the correct method?

Animal
22 Jan 2009, 6:33 AM
JSON is a string. It gets sent to the browser. What does it look like?

cyk
22 Jan 2009, 5:47 PM
JSON is a string. It gets sent to the browser. What does it look like?

I supposed that you are asking the contents of the JsonArray. I have an Java application (for testing purposes), printing out the contents of the array.

This is the output:

[{"text":"Absolute","id":"absolute"}]

Animal
23 Jan 2009, 2:40 AM
That packet as it arrives at the browser.

You DO test this don't you? You debug in the browser?

BernieM
23 Jan 2009, 9:14 AM
This:



var json = new Ext.data.JsonStore({
url: 'FileBrowserController',
fields: [
{name: 'text'},
{name: 'id'}
],

baseParams:{
method:'handleRequest',
returnFormat: 'JSON',
}
root: 'text',
id: 'id'

});


does not match this JSON:


[{"text":"Absolute","id":"absolute"}]


The root is supposed to reference a property that is set to the Javascript/JSON array that contains your records. The array you are showing contains a single record, but it is not parseable by the store. What we need to see is the object that the store is actually receiving. If you're just passing it an array, that's your problem. You should be passing something like this (based on your store specification):



{ "text": [{"text":"Absolute","id":"absolute"}] }


Can you please post the actual response that Firebug is showing?

Animal
23 Jan 2009, 9:19 AM
I've been trying to get this with no luck so far!

cyk
3 Feb 2009, 4:29 AM
Sorry for the late reply. It was festival season during this period of the time. Hence, I was busy for sometime.

Animal was right. I need to check the value that I sent. Previously, I am unable to use firebug to check because the Ext JavaScript was in an another file (If it is possible to debug an external JS file with Firebug, please enlightened me. Thanks :)).) After integrating with the HTML code, I am now able to check the value being passed over.

The problem was with my Spring MVC structure. The servlet was not responding. I managed to solve that problem.

However, I am no longer using Json Store but chose to get the value via response.getAttribute and response.setAttribute.

Anyway, BernieM and Animal, thanks :)

Animal
3 Feb 2009, 4:44 AM
You can debug any <script> file with Firebug. Just select it from the dropdown in the Script tab, and it will show it for you to set breakpoints.

And debugging the received data is easy using the Net tab or the Console tab.