title: How to generate parent/child nest on client side?
body: <p>I've searched through the myriad parent/child array/object/whatever questions here and elsewhere and haven't been able to solve my issue. I know this is a bit long, but I wanted to ensure I'm providing enough info to you guys.</p>
  
  <p>Here's what I want to do:</p>
  
  <ol>
  <li>I have a number of <code>&lt;div&gt;</code>-delineated items on the page with parent/child relationships, generated via php from my database</li>
  <li>I want to use these items as the data source for a D3.js Dendrogram (a node-link tree diagram <a href="http://mbostock.github.com/d3/ex/cluster.html" rel="nofollow">http://mbostock.github.com/d3/ex/cluster.html</a>)</li>
  <li>I'm storing them with left/right nested set values but also parentID values, so I can add ID, parentID, rgt, lft and depth attributes to the <code>&lt;div&gt;</code> elements, so I should have available whatever's needed to generate the parent/child relationships on the client side</li>
  <li>For various reasons, instead of creating a JSON file on the server side to use as the data source, I need to create it on the client side based on the attributes in #3</li>
  <li>I've had difficulty getting various suggested javascript functions to work and all the D3 examples I've found use either a preexisting JSON file or generated math-based file, not attributes of elements already on the page</li>
  </ol>
  
  <p>Here is an example of what already works for me with the D3 Dendrogram, but it's not generated dynamically:</p>
  
  <pre><code>var tree3 = 
  {"sid": "1", "children": [
      {"sid": "2", "children": [
          {"sid": "5", "children": [
              {"sid": "75"},
              {"sid": "85", "children": [
                  {"sid": "87"}, ...
  </code></pre>
  
  <p>To give you an idea of where these attributes are in the DOM, I originally tried the below, but of course it doesn't generate any hierarchy:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>I've been messing around unsuccessfully with variants of the below to get a nested array:</p>
  
  <pre><code>function tree2() {
     $("article").(function(d) {
         return d.parent().attr("pid") === 0;
  }, function(parent, child) {
      return parent.attr("pid") === child.parent().attr("sid");
  }).toArray();
  }
  </code></pre>
  
  <p>So, I'm driving myself crazy trying to create the javascript array nested correctly, but it's dawned on me that I may not need to and that D3's data selectors and methods could be sufficient.  Could you please help me with the code to:</p>
  
  <ol>
  <li>Pull the needed attributes to generate the parent/child relationship within a D3 function ("sid" is the identifier) or, if this isn't possible,</li>
  <li>Create the needed array or array-like object in javascript for use by D3 (still with "sid" as the identifier).</li>
  </ol>
  
  <p>Thanks in advance.</p>