Javascript Recursion JSON into HTML -
can please me creating following json following html?
i bad @ recursion it's not funny. can't find on assist me how need, you'll see jsfiddle how off am!
i'm trying turn this:
var data = [ { "node_id":1, "children":[] }, { "node_id":2, "children":[] }, { "node_id":3, "children":[ { "node_id":4, "children":[] }, { "node_id":5, "children":[ { "node_id":6, "children":[] }, { "node_id":7, "children":[] } ] } ] } ]; into this:
<ul> <li>1 <ul> <li>2 <ul> <li>3 <ul> <li>4</li> <li>5 <ul> <li>6</li> <li>7</li> </ul> </li> </ul> </li> </ul> </ul> </li> </ul> this best attempt (see jsfiddle) after running through questions. i'm confused recursion:
update: i'm getting closer complex. seems if did document.createelement , appended children might work better?
function recursion(data, is_child, first_call) { if (is_child != true) { var output = '<ul id="org">\n'; } else if (is_child == true && first_call == true) { var output = '<ul>\n'; } var len = data.length; (var = 0; < len; i++) { if (is_child == true && first_call == true) { output += '<li>'+ data[i].node_id +'</li>\n'; } else { output += '<li>'+ data[i].node_id +'\n'; } if (data[i].children.length > 0) { if (is_child == true && first_call != true) { first_call = true } else { first_call = false } output += recursion(data[i].children, true, first_call); } else { if (is_child == true && first_call != true) { output += '</li>'; } if (typeof data[i+1] != 'undefined') { output += '<ul>\n'; } else { // close items not closed (var j = 0; j < i; j++) { output += '</li></ul>\n' } output += '</li>\n' } } } output += '</ul>\n'; return output; } update:thee way node handled if has children seems have different behavior. have image show renders correctly plugin jorgchart: 
i able figure out, had mind in many places. here answer:
recursion = function(data, is_child) { var output = ''; if (typeof is_child == 'undefined') { is_child = false; } // start:ul (only 1 of these) if (is_child == false) { output += '<ul id="org">\n'; } // end:ul var len = data.length; (var = 0; < len; i++) { // if child loop, , first iteration, // has special case: // <ul> // <li>first</li> // <li>second<ul> var first_child_item = false; if (is_child == true && == 0) { first_child_item = true; } // open:main wrapper if (first_child_item == true) { output += '<ul class="first_child_item">\n'; output += '<li>' + data[i].node_id + '</li>\n'; continue; } else { if (is_child) { // when there child beside output += '<li>' + data[i].node_id; } else { // main low level call output += '<ul class="low_level">\n'; output += '<li>' + data[i].node_id; } } // open:children seek if (data[i].children.length > 0) { output += recursion(data[i].children, true); } // close pending tags if (typeof data[i+1] == 'undefined') { (var j = 0; j < i; j++) { output += '</li>\n'; output += '</ul>\n'; } } } // end main:ul (only 1 of these) output += '</ul>\n'; return output; } 
Comments
Post a Comment