JSON Editor Using YUI TreeView

Hey Guys,

I have created a JSON Editor, using YUI TreeView.
Its very simple to Use!


All functionality is wrapped in jsonEditor.js , which is tiny JavaScript library,which can be used for making your own JSON editor.

This library is simple to use.  Here is what you need to do.

Create a div with some ID lets say treeView and then a create text-area with id as "textEdit".
Pass this 2 parameter in jsonEditor constructor, Thats it You are done!
Here is sample code

/*Do This on Dom ready*/
je=new jsonEditor('textEdit','treeView');
je.setJSON(sampleJson);
//console.log(je.getJSON());

This Uses YUI & jQuery so make sure you are including these libraries in your page.

Here are all dependencies, put these in head part of HTML:

<link rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/treeview/assets/skins/sam/treeview.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/treeview/treeview-min.js"></script>
<script type="text/javascript" src="http://www.purplegene.com/js/jsonEditor.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.2");
</script>


Here is screenshot

Note:  This is Only Tested in Firefox and chrome. Use at your own risk! Do not hotlink my js file.

7 comments:

  1. nice! any idea on how to get the field label and the field contents displayed in different styles in the tree?

    ReplyDelete
  2. There is function exposed getTree which will return th YUI TreeView Object , You can get everything from that.

    YUI TreeView documentation can be found here
    http://developer.yahoo.com/yui/docs/YAHOO.widget.TreeView.html

    ALl Nodes are TextNode (documentation here http://developer.yahoo.com/yui/docs/YAHOO.widget.TextNode.html)


    One point: Just the leaf node is represented as x:y format. Since all property will finally land to a basic Datatype of Number/String/Boolean.
    All complex object's property is in form of child to its node.

    ReplyDelete
  3. Tried to use your editor with a different treeview id and there is a bug in your code in the constructor of jsonEditor:

    treeViewId = treeViewId;

    Should be:

    treeViewId = treeView;

    ReplyDelete
  4. Thanks jeff I will fix it..
    Meanwhile you can download and fix it on your own :)

    ReplyDelete
  5. @jeff Code is fixed , thanks!

    ReplyDelete
  6. Also, inside of jsonToTree, you should probably ignore any functions with code such as:

    if (typeof(propVal) == 'function')
    continue;

    ReplyDelete
  7. @jeff I agree ! JSON should ignore function while serializing but i developed this to use in my feed reader !(http://www.purplegene.com/reader) I have plans to have functions body to remain in JSON as string.

    You can (& All other readers) can fork ur own copy do make these fixes!

    ReplyDelete

Your comment will inspire me, Please leave your comment