title: How to create a tree array from a flat array of objects, then number each tree node's level and sort nodes at each level?
body: <p><strong>Note: Solution below!</strong> </p>
  
  <p><strong>The Problem:</strong>
  I needed code to turn a flat array of objects with id and parent values into a tree. The number of levels deep is unknown, since the flat array is generated dynamically.</p>
  
  <p>Also, once the items are in a tree, I needed nodes to be assigned a level property value, depending on what tree level they're on (root nodes = level 0, the root's immediate child nodes = level 1, children's children = level 2, etc). </p>
  
  <p>Finally, nodes at each tree level should be alpha sorted by their id. So root ids should be sorted, then the roots children, then the children's children, etc etc.</p>
  
  <p>I found some solutions that met at least two of my requirements, but none that met all three. </p>
  
  <p><strong>Solution:</strong> <a href="https://jsfiddle.net/DavidACondit/wtb40y1u/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <pre><code>var x = [
  {id: 10, parent: 0, children: []},
  {id: 20, parent: 10, children: []},
  {id: 30, parent: 10, children: []},
  {id: 40, parent: 30, children: []},
  {id: 50, parent: 30, children: []},
  {id: 60, parent: 30, children: []},
  {id: 70, parent: 20, children: []},
  {id: 80, parent: 20, children: []},
  {id: 90, parent: 40, children: []},
  {id: 100, parent: 40, children: []}, 
  {id: 95, parent: 40, children: []},
  {id: 110, parent: 50, children: []}, 
  {id: 120, parent: 60, children: []}, 
  {id: 130, parent: 0, children: []},
  {id: 140, parent: 130, children: []},
  {id: 150, parent: 140, children: []},
  {id: 160, parent: 140, children: []},
  {id: 170, parent: 140, children: []},
  {id: 180, parent: 160, children: []},
  {id: 190, parent: 160, children: []},
  {id: 200, parent: 190, children: []} 
  ];
  </code></pre>
  
  <p>Into this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;ul&gt;
          &lt;li&gt;10
              &lt;ul&gt;
                  &lt;li&gt;20
                      &lt;ul&gt;
                          &lt;li&gt;70&lt;/li&gt;
                          &lt;li&gt;80&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;30
                      &lt;ul&gt;
                          &lt;li&gt;40
                              &lt;ul&gt;
                                  &lt;li&gt;90&lt;/li&gt;
                                  &lt;li&gt;95&lt;/li&gt;
                                  &lt;li&gt;100&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;50
                              &lt;ul&gt;
                                  &lt;li&gt;110&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;60
                              &lt;ul&gt;
                                  &lt;li&gt;120&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;130
              &lt;ul&gt;
                  &lt;li&gt;140
                      &lt;ul&gt;
                          &lt;li&gt;150&lt;/li&gt;
                          &lt;li&gt;160
                              &lt;ul&gt;
                                  &lt;li&gt;180&lt;/li&gt;
                                  &lt;li&gt;190
                                      &lt;ul&gt;
                                          &lt;li&gt;200&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;170&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>