mike.younes 0 Posted August 13, 2015 Report Share Posted August 13, 2015 (edited) 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" }} Edited August 14, 2015 by mike.younes Quote Link to post Share on other sites
justsomeguy 1,135 Posted August 13, 2015 Report Share Posted August 13, 2015 Is it in an error in the data or code? Are you checking for Javascript errors? That code isn't all that helpful without the JSON data also. Quote Link to post Share on other sites
mike.younes 0 Posted August 14, 2015 Author Report Share Posted August 14, 2015 thanks for the reply. the code is working. im getting a tree as output. the problem is that the branches within the tree are not where they are supposed to be. for example, mainstations are supposed to be siblings, but im getting mainstation 2 as a child of mainstation 1. ill post the json Quote Link to post Share on other sites
mike.younes 0 Posted August 14, 2015 Author Report Share Posted August 14, 2015 the problem should be in the traverse function. its a logic problem Quote Link to post Share on other sites
mike.younes 0 Posted August 14, 2015 Author Report Share Posted August 14, 2015 https://jsfiddle.net/mikeyounes/4ndtmaun/1/https://api.myjson.com/bins/5a9vo Quote Link to post Share on other sites
mike.younes 0 Posted August 14, 2015 Author Report Share Posted August 14, 2015 i have a json file (2nd link) and im using a code to get the objects of the json file and output them as a tree. however the nodes are coming out misplaced. for example Mainstation 2 should be a sibling to Mainstation1, however it is coming out as a child of it. the problem should be in the traverse function.https://jsfiddle.net/mikeyounes/4ndtmaun/1/https://api.myjson.com/bins/5a9vo Quote Link to post Share on other sites
justsomeguy 1,135 Posted August 14, 2015 Report Share Posted August 14, 2015 I don't see anything obvious, I guess the first step would be to use some breakpoints to step through that code to see what it's doing and what objects it passes when it does the recursive call. Quote Link to post Share on other sites
justsomeguy 1,135 Posted August 14, 2015 Report Share Posted August 14, 2015 Let's keep discussion about the same topic to 1 thread. Quote Link to post Share on other sites
mike.younes 0 Posted August 17, 2015 Author Report Share Posted August 17, 2015 oki removed the var ul = $("<ul>").appendTo(node) and put it before the for loop it fixed the first few branches places, but not after that (for example control2 is still a child of control1 in sub2 of main1) Quote Link to post Share on other sites
mike.younes 0 Posted August 17, 2015 Author Report Share Posted August 17, 2015 issue fixed. now dealing with other ###### Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.