Pages

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.
Posted by at
Labels:

7 comments:

  1. Autore del blogFebruary 16, 2011 3:29 AM

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

    ReplyDelete
  2. markandeyFebruary 16, 2011 3:37 AM

    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. Jeff B.March 16, 2011 9:21 AM

    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. markandeyMarch 16, 2011 9:34 AM

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

    ReplyDelete
  5. markandeyMarch 16, 2011 10:10 AM

    @jeff Code is fixed , thanks!

    ReplyDelete
  6. Jeff B.March 16, 2011 10:28 AM

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

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

    ReplyDelete
  7. markandeyMarch 16, 2011 11:11 AM

    @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

Subscribe to: Post Comments (Atom)