javascript - How to generate parent/child nest on client side? -

i've searched through myriad parent/child array/object/whatever questions here , elsewhere , haven't been able solve issue. know bit long, wanted ensure i'm providing enough info guys.

here's want do:

1. i have number of <div>-delineated items on page parent/child relationships, generated via php database
2. i want use these items data source d3.js dendrogram (a node-link tree diagram http://mbostock.github.com/d3/ex/cluster.html)
3. i'm storing them left/right nested set values parentid values, can add id, parentid, rgt, lft , depth attributes <div> elements, should have available whatever's needed generate parent/child relationships on client side
4. for various reasons, instead of creating json file on server side use data source, need create on client side based on attributes in #3
5. i've had difficulty getting various suggested javascript functions work , d3 examples i've found use either preexisting json file or generated math-based file, not attributes of elements on page

here example of works me d3 dendrogram, it's not generated dynamically:

var tree3 =  {"sid": "1", "children": [     {"sid": "2", "children": [         {"sid": "5", "children": [             {"sid": "75"},             {"sid": "85", "children": [                 {"sid": "87"}, ... 

to give idea of these attributes in dom, tried below, of course doesn't generate hierarchy:

function tree() {     var tree=[];     $("article").each(function(){         tree.push({             sid:$(this).attr("sid"),              l:$(this).attr("l"),              r:$(this).attr("r"),             pid:$(this).attr("pid")         });     });     return tree; } 

i've been messing around unsuccessfully variants of below nested array:

function tree2() {    $("article").(function(d) {        return d.parent().attr("pid") === 0; }, function(parent, child) {     return parent.attr("pid") === child.parent().attr("sid"); }).toarray(); } 

so, i'm driving myself crazy trying create javascript array nested correctly, it's dawned on me may not need , d3's data selectors , methods sufficient. please me code to:

1. pull needed attributes generate parent/child relationship within d3 function ("sid" identifier) or, if isn't possible,
2. create needed array or array-like object in javascript use d3 (still "sid" identifier).

thanks in advance.

you need recursive! trick pass current parent in go, changes context , allows walk down tree.

update: working fiddle.

assuming html structure this:

<div sid="1" pid="">     <div sid="1.1" pid="1">         <div sid="1.1.1" pid="1.1">         </div>     </div> </div> 

you this:

var _json = {};  function addtreenode(div, parentobj) {      var childobj = {         sid: $(div).attr("sid"),         pid: $(div).attr("pid")     }      // add it's parent in json hierarchy     if (!parentobj.children) parentobj.children = [];     parentobj.children.push(childobj);      // keep adding children div's     $(div).find("div").each(function() {         addtreenode(this, childobj);     }); }  // start @ roots, magically work it's way out leaves $("body > div").each(function(){     addtreenode(this, _json); });  console.log(_json); 

note if tree big enough, will cause stack overflows, in ie. in case, you'll need switch on from recursion iteration. it's not pretty way, though.