mike.younes Posted August 13, 2015 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 Link to comment Share on other sites More sharing options...
justsomeguy Posted August 13, 2015 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. Link to comment Share on other sites More sharing options...
mike.younes Posted August 14, 2015 Author 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 Link to comment Share on other sites More sharing options...
mike.younes Posted August 14, 2015 Author Share Posted August 14, 2015 the problem should be in the traverse function. its a logic problem Link to comment Share on other sites More sharing options...
mike.younes Posted August 14, 2015 Author Share Posted August 14, 2015 https://jsfiddle.net/mikeyounes/4ndtmaun/1/https://api.myjson.com/bins/5a9vo Link to comment Share on other sites More sharing options...
mike.younes Posted August 14, 2015 Author 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 Link to comment Share on other sites More sharing options...
justsomeguy Posted August 14, 2015 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted August 14, 2015 Share Posted August 14, 2015 Let's keep discussion about the same topic to 1 thread. Link to comment Share on other sites More sharing options...
mike.younes Posted August 17, 2015 Author 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) Link to comment Share on other sites More sharing options...
mike.younes Posted August 17, 2015 Author Share Posted August 17, 2015 issue fixed. now dealing with other ###### Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now