title: Sort entire nested object by property in JavaScript
body: <p>I would like to loop through a deeply nested object, and sort each level based on a property. In this case its <code>id</code></p>
  
  <p>Here's my object (there will me more levels, I just added 3 levels here for readability):</p>
  
  <pre><code>const myObj = [
    {
      id: 15,
      children: [
        {
          id: 9,
          children: [
            {
              id: 4,
              children: []
            },
            {
              id: 1,
              children: []
            }
          ]
        },
        {
          id: 4,
          children: [
            {
              id: 35,
              children: [
                {
                  id: 12,
                  children: []
                },
                {
                  id: 8,
                  children: []
                }
              ]
            },
            {
              id: 30,
              children: [],
            }
          ]
        },
      ]
    },
    {
      id: 2,
      children: [
        {
          id: 9,
          children: []
        },
        {
          id: 3,
          children: []
        },
      ]
    }
  ]
  </code></pre>
  
  <p>Here's the desired output:</p>
  
  <pre><code>const myObj = [
    {
      id: 2,
      children: [
        {
          id: 3,
          children: []
        },
        {
          id: 9,
          children: []
        }
      ]
    },
    {
      id: 15,
      children: [
        {
          id: 4,
          children: [
            {
              id: 30,
              children: [],
            },
            {
              id: 35,
              children: [
                {
                  id: 8,
                  children: []
                },
                {
                  id: 12,
                  children: []
                }
              ]
            },
          ]
        },
        {
          id: 9,
          children: [
            {
              id: 1,
              children: []
            },
            {
              id: 4,
              children: []
            }
          ]
        },
      ]
    }
  ]
  </code></pre>
  
  <p>And here's my attempt at sorting it:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const myObj = [{id:15,children:[{id:9,children:[{id:4,children:[]},{id:1,children:[]}]},{id:4,children:[{id:35,children:[{id:12,children:[]},{id:8,children:[]}]},{id:30,children:[],}]},]},{id:2,children:[{id:9,children:[]},{id:3,children:[]},]}]
  
  function sortByOrderIndex(obj) {
    obj.sort((a, b) =&gt; (a.orderindex &gt; b.orderindex) ? 1 : ((b.orderindex &gt; a.orderindex) ? -1 : 0));
  
    return obj;
  }
  
  function sortNestedObj(obj) {
    sortByOrderIndex(obj);
  
    for (let i = 0; i &lt; obj.length; i++) {
      const t = obj[i];
  
      if (t.children.length !== 0) {
        sortNestedObj(t.children);
      } else {
        return;
      }
    }
  }
  
  console.log(sortByOrderIndex(myObj))</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've created a function that sorts an object, and then tried to create another object that loops through each object that has children and sort those children using the first function. And if those children have children, then sort those and so forth until a child has no children.</p>