im trying to output a json file to an expandable tree using html and jquery. its working, but the nesting and nodes within the tree are misplaced. any idea what that is? for example. mainstation 2 is coming out as a child of mainstation 1, while they should be siblings. it should be a logic error
html code:<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $.ajax({ url: "converted39.json", dataType: 'json', success: function(tree) { traverse($('#treeView'), tree) $('#treeView li:has(li)').addClass("Max").click(function(e) { $(this).toggleClass("Max Min"); $(this).children("ul").toggle(); e.stopPropagation(); }) $("[href]").addClass("Blue").click(function(e){ $(this).toggleClass("Purple"); e.stopPropagation(); window.location.href = $(this).attr("href") }) $('#treeView li').click(function(g) { var mytree2 = $(this); mytree2.children('li').toggle(); g.stopPropagation(); }) } }) }); function traverse(node, o) { for (var i in o) { if(i == "__text" || i == "_href" ) continue; if (o !== null && typeof(o)=="object") { if(o.__text){ var ul = $("<ul>").appendTo(node) var node=$('<li>').appendTo(ul) if(o._href){ var n = $("<span>").appendTo(node) $(n).text(o.__text).attr("href", o._href) } else{ $(node).text(o.__text) } } } traverse(node,o); } else{ var ul = $("<ul>").appendTo(node) if(o.__text){ var li = $('<li>' + o._text + '</li>').appendTo(ul) if(o._href){ var n = $("<span>").appendTo(node) $(n).text(o.__text).attr("href", o._href) } }else{ $('<li>' + o + '</li>').appendTo(ul) } } } } </script>
JSON CODE:{ "MAIN": { "MainStation": [ { "Substation": [ { "Control": "Control1n", "ControlExpandable": { "MiniControl": [ "MiniControl1", "MiniControl2" ], "__text": "Control2" }, "PushButton": { "__text": "PushButton1", "_attr": "successnDatffffffffffffffffffffffffffffffffffffffffffffffffffffffffe:17july" }, "_href": "http://google.com", "__text": " Substation1nnnnnnn" }, { "ControlExpandable": { "MiniControl": [ "MiniControl1", "MiniControl2" ], "__text": "Control1", "_attr": "Control1 woohoo" }, "Control": "Control2", "PushButton": "PushButton1", "__text": " Substation2nnnnnnn" }, { "Control": [ "Control1", "Control2", "Control3", "Control4" ], "__text": " Substation3nnnnnnnnn" }, { "PushButton": [ "PushButton1", "PushButton2" ], "__text": " Substation4nnnnn" } ], "__text": " Mainstation1nnnnnnnnn" }, { "Substation": [ { "Control": [ "Control1", "Control2" ], "PushButton": "PushButton1", "__text": " Substation1nnnnnnn" }, { "ControlExpandable": { "MiniControl": [ "MiniControl1", "MiniControl2" ], "__text": "Control1" }, "Control": "Control2", "PushButtonExpandable": { "MiniPushButton": [ "MiniPushButton1", "MiniPushButton2" ], "__text": "PushButton1" }, "__text": " Substation2nnnnnnn" } ], "__text": " Mainstation2nnnnn" } ], "ElectricStation": { "Substation": [ { "Control": [ "Control1", "Control2" ], "PushButton": "PushButton1", "__text": " Substation1nnnnnnn" }, { "ControlExpandable": { "MiniControl": [ "MiniControl1", "MiniControl2" ], "__text": "Control1" }, "Control": "Control2", "PushButtonExpandable": { "MiniPushButton": [ "MiniPushButton1", "MiniPushButton2" ], "__text": "PushButton1" }, "__text": " Substation2nnnnnnn" } ], "__text": " ElectricStation1nnnnn" }, "__text": " MAINnnnnnnn" }}