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 (https://github.com/in2rd/ObjectBrowser), you can see it on my blog (http://www.in2rd.com/post/8379172936/), 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.