Sort entire nested object by property in JavaScript

Question

I would like to loop through a deeply nested object, and sort each level based on a property. In this case its id

Here's my object (there will me more levels, I just added 3 levels here for readability):

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: []
      },
    ]
  }
]

Here's the desired output:

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: []
          }
        ]
      },
    ]
  }
]

And here's my attempt at sorting it:

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) => (a.orderindex > b.orderindex) ? 1 : ((b.orderindex > a.orderindex) ? -1 : 0));

  return obj;
}

function sortNestedObj(obj) {
  sortByOrderIndex(obj);

  for (let i = 0; i < obj.length; i++) {
    const t = obj[i];

    if (t.children.length !== 0) {
      sortNestedObj(t.children);
    } else {
      return;
    }
  }
}

console.log(sortByOrderIndex(myObj))

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.

Answer 1

You could recursively sort the array and it's object's children like this:

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 sortArray(array) {
  array.sort((a, b) => a.id - b.id);
  array.forEach(a => {
    if (a.children && a.children.length > 0)
      sortArray(a.children)
  })
  return array;
}

console.log(sortArray(myObj))