javascript - How to create nested li-ul-li elements -

javascript - How to create nested li-ul-li elements -

i looking take next json:

{ "comments":[ { "id":3, "comment":"asdasdasdasdsadsaasd", "author":"adam", "post_id":126, "ancestry":null, "created_at":"2014-06-18t00:25:04.421z", "updated_at":"2014-06-18t00:25:04.421z", "children":[ { "id":4, "comment":"asdasdasdasdsadsaasd", "author":"adam", "post_id":126, "ancestry":"3", "created_at":"2014-06-18t00:25:57.913z", "updated_at":"2014-06-18t00:25:57.913z", "children":[ { "id":7, "comment":"asdasdasdasdsadsaasd", "author":"adam", "post_id":126, "ancestry":"3/4", "created_at":"2014-06-18t00:57:36.277z", "updated_at":"2014-06-18t00:57:36.277z", "children":[ ] }, { "id":5, "comment":"asdasdasdasdsadsaasd", "author":"adam", "post_id":126, "ancestry":"3/4", "created_at":"2014-06-18t00:26:12.017z", "updated_at":"2014-06-18t00:26:12.017z", "children":[ ] } ] } ] } ] }

which have many more children or comments nested see , write recursive function 2 things:

walks through each of comments blogs looking children, there walk through - repeating till dead end (the function should recursive - see have far below)

for each kid in children , associated kid , on , forth, elements should have class of nested allows me like:

.nested .nested .nested .nested { /* css rules here 4 levels of nesting */}

essentially should able replicate form of nesting via ul's , li's

what have?

i have built react component mixin following:

/** * helps abstracting certian logic comments component. */ var commentsmixins = { commentelements: [], /** * recursive fucntion help nested comments. * * keeps order of nested comments , renders react component * single comment. */ rendercomments: function(comments) { (var key in comments) { if (key === 'children' && key.length !== 0) { var nestedcomments = comments[key] (var = 0; < nestedcomments.length; i++) { this.commentelements.push('<li id="comment-'+nestedcomments[i].id+'" class="indented"> <h1>'+nestedcomments[i].author+' <small>said ... </small></h1> <p>'+nestedcomments[i].comment+'</p></li>'); this.rendercomments(nestedcomments[i]); } } }, getcommentelements: function() { homecoming this.commentelements; } }

this in turn spit out:

<ul> <li> ... </li> <!-- id: 3 --> <li> ... </li> <!-- id: 4 --> <li> ... </li> <!-- id: 7 --> <li> ... </li> <!-- id: 5 --> ... </ul>

when should like:

<ul> <li> <!-- id: 3 --> <ul> <li> ... </li> <!-- id: 4 --> </ul> </li> ... <ul>

what have alter in recursive function type of layout? (note: can assume parent ul done rendered. li's , children , grandchildren , on , forth rendered within outer <ul></ul>)

just build tree recursively - don't output flat array!

consider next uses jquery because makes dom manipulation easier. if not using jquery, create element tree using other dom manipulation such represent desired output structure. (ymmv; theory sound approach, may contain bugs written.)

the comments parameter array represents current level of of comments process (this response.comments top-level , comment.children descendants). unlike original approach there one loop within function uses recursion walk json tree , convert dom tree, 1 level/branch @ time.

buildcomments: function(comments) { // homecoming undefined if there no comments process; // alternatively, /may/ appropriate homecoming empty ul. if (!comments || !comments.length) { return; } // create container ul comments in level. var list = $('<ul>'); (var = 0; < comments.length; i++) { // don't utilize for..in arrays var comment = comments[i]; // create li each comment , add together container var item = $('<li>') .attr('id', "comment-" + comment.id); // add together li ul parent list.append(item); // add together appropriate content item li item.append($('<h1>').text(comment.author)); item.append($('<p>').text(comment.comment)); // , same each kid level of comments.. var childrenlist = this.buildcomments(comment.children); if (childrenlist) { // ..adding children (ul) container current item (li) item.append(childrenlist); } } // homecoming container used caller homecoming list; },

and utilize so

var commentlist = helper.buildcomments(result.comments) if (commentlist) { $('#commentlocation').append(commentlist); }

if top-level ul exists, may desired append immediate (li) children of resulting (ul) element.. however, such left adaptation.

javascript recursion nested-lists