Javascript/JSON Object Browser

[in2rd]

I've recently created a component which renders a Javascript or JSON object as a hierarchal tree, recursively building the TreeStore from said object. I needed a way to explain data structures to some friends, and this was the easiest way to do so.

I still need to add some functions to reload the TreeStore with new objects, find objects, and otherwise interact with the component, but I figured it was in a good enough state to push out.

The code is available for use on GitHub, you can see it on my blog, so take a look, feel free to clone it and play around.

[loiane]

Nice!
Thanks for sharing!

[timothy]

Hi,

Firstly, thanks for this extension. It is quite timely as I've just needed it for a project I'm working on.

That being said however, I cannot seem to get it to work!

A couple of things:

When I try to load it into the browser, I get this error:

uncaught exception: [Exception... "Cannot modify properties of a WrappedNative" nsresult: "0x80570034 (NS_ERROR_XPC_CANT_MODIFY_PROP_ON_WN)" location: "JS frame :: http://connect.dev.lan/js/thirdparty/extjs/ext-all-debug-w-comments.js :: <TOP_LEVEL> :: line 6035" data: no]

Then when I try to use the widget, I get this error:

c is not a constructor
[Break On This Error] this.instantiators[len...'return new c('+args.join(',')+')');
ext-al...ents.js (line 6456)

This is the code block that I am using:

function(response)
{
	mask.hide();
	var win=Ext.widget('devResWin');
	win.add
	(
		Ext.widget
		(
			'objectbrowser',
			{
				data: response	
			}
		)
	);
}

Any ideas?

Thanks in advance!

[ykey]

D'oh! I just wrote one of these over the weekend. Interested in seeing it?

[in2rd]

I'm definitely interested in seeing how you did this. Timothy, I'll take a look when I get a chance this week and figure out why you're getting that error.

[ykey]

Here ya go. Not fully tested yet but should give you the idea. I wanted it to match the json object viewer in the chrome debug panel as closely as possible.

http://helpmetestthat.com/jsontree/

[in2rd]

ykey:

To be honest, I like your style quite a bit more. It's very clean, much easier to read and look through than what I have.

Nice job!

[ykey]

Thanks feel free to use it if you want, I just haven't tested it very much. It was only meant for json data so functions are not supported but shouldn't be too difficult to add.

[timothy]

Ah, that is very nice.

I can't wait to see what the two of you come up with when you combine these two extensions.

Please keep us updated.