title: Sorting an array of categories and subcategories
body: <p>Suppose we have and array of objects where each object represents a category or a subcategory, like this one:</p>
  
  <pre><code>var data = [
      {type: "parent-category", order: 1, categoryId: 1},
      {type: "parent-category", order: 2, categoryId: 2},
      {type: "child-category", order: 1, categoryId: 3, parentCategoryId: 1},
      {type: "child-category", order: 2, categoryId: 4, parentCategoryId: 1},
      {type: "child-category", order: 2, categoryId: 5, parentCategoryId: 2},
      {type: "child-category", order: 1, categoryId: 6, parentCategoryId: 2}
  ];
  </code></pre>
  
  <p>This array represent an example with two categories, where each one of they also have two subcategories.</p>
  
  <p>Now, I'm facing with the problem of sort this array on some custom way. As you can note, the <code>order</code> attribute inside each object is related to the position (or ordering) of the object inside his level of hierarchy. And the relation between categories and subcategories is defined by the atributte <code>parentCategoryId</code>.</p>
  
  <p>The expected sorting I need using as example the previous array of data should be this one:</p>
  
  <pre><code>var data = [
      {type: "parent-category", order: 1, categoryId: 1},
      {type: "child-category", order: 1, categoryId: 3, parentCategoryId: 1},
      {type: "child-category", order: 2, categoryId: 4, parentCategoryId: 1},
      {type: "parent-category", order: 2, categoryId: 2},
      {type: "child-category", order: 1, categoryId: 6, parentCategoryId: 2},
      {type: "child-category", order: 2, categoryId: 5, parentCategoryId: 2}   
  ];
  </code></pre>
  
  <p>My current approach to solve this problem is based on creating a map to numbers, analyzing the values of the attributes with the following conditions:</p>
  
  <ul>
  <li>For an object that has the type <strong>parent-category</strong> we assign the value of <code>categoryId * 1000</code>.</li>
  <li>For an object that has the class <strong>child-category</strong> we assign the value of <code>(parentCategoryId * 1000) + order</code></li>
  </ul>
  
  <p>This logic is shown on the next sort implementation:</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>let data = [
      {type: "parent-category", order: 1, categoryId: 1},
      {type: "parent-category", order: 2, categoryId: 2},
      {type: "child-category", order: 1, categoryId: 3, parentCategoryId: 1},
      {type: "child-category", order: 2, categoryId: 4, parentCategoryId: 1},
      {type: "child-category", order: 2, categoryId: 5, parentCategoryId: 2},
      {type: "child-category", order: 1, categoryId: 6, parentCategoryId: 2}
  ];
  
  let orderedData = data.sort((a, b) =&gt;
  {
      var aCat = (a.type == "parent-category") ? a.categoryId : a.parentCategoryId;
      var aOrder = (a.type == "parent-category") ? 0 : a.order;
      var bCat = (b.type == "parent-category") ? b.categoryId : b.parentCategoryId;
      var bOrder = (b.type == "parent-category") ? 0 : b.order;
  
      return (aCat * 1000 + aOrder) - (bCat * 1000 + bOrder);
  });
  
  console.log(orderedData);</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, and ignoring the fact that the previous implementation works, my question is if there exists a better approach or alternative to solve this problem. I don't like the idea of depend on the mapping to numbers, because, for example, the previous implementation introduces a limitation on the numbers of subcategories (<code>999</code> in this case) I can sort correctly under each category. Thanks!</p>