title: How to convert array to Tree View with expand collapse functionality using jQuery?
body: <p>This is quiet tricky, but some nerd can answer my query as I failed on achieving.<br/>
  Let's say I have an array with below values.<br /></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>globalResFiltered = [];
      globalResFiltered.push({Category:"Fruit",Subcategory:"Orange",Value:"001"});
      globalResFiltered.push({Category:"Fruit",Subcategory:"Orange",Value:"012"});
      globalResFiltered.push({Category:"Fruit",Subcategory:"Orange",Value:"006"});
      globalResFiltered.push({Category:"Fruit",Subcategory:"Mango",Value:"011"});
      globalResFiltered.push({Category:"Fruit",Subcategory:"Apple",Value:"013"});
      globalResFiltered.push({Category:"Fruit",Subcategory:"Apple",Value:"004"});
      globalResFiltered.push({Category:"Fruit",Subcategory:"Apple",Value:"010"});
      
      globalResFiltered.push({Category:"Color",Subcategory:"Silver",Value:"014"});
      globalResFiltered.push({Category:"Color",Subcategory:"Silver",Value:"015"});
      globalResFiltered.push({Category:"Color",Subcategory:"Orange",Value:"005"});
      globalResFiltered.push({Category:"Color",Subcategory:"Orange",Value:"016"});
      globalResFiltered.push({Category:"Color",Subcategory:"Red",Value:"003"});
      globalResFiltered.push({Category:"Color",Subcategory:"Red",Value:"017"});
      globalResFiltered.push({Category:"Color",Subcategory:"Red",Value:"018"});
      
      globalResFiltered.push({Category:"Jewellery",Subcategory:"Bronze",Value:"019"});
      globalResFiltered.push({Category:"Jewellery",Subcategory:"Bronze",Value:"020"});
      globalResFiltered.push({Category:"Jewellery",Subcategory:"Silver",Value:"007"});
      globalResFiltered.push({Category:"Jewellery",Subcategory:"Gold",Value:"002"});
      globalResFiltered.push({Category:"Jewellery",Subcategory:"Gold",Value:"008"});
      globalResFiltered.push({Category:"Jewellery",Subcategory:"Platinum",Value:"009"});
      globalResFiltered.push({Category:"Jewellery",Subcategory:"Platinum",Value:"021"});
      
  console.log(globalResFiltered);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>(Please see console for array output)</code></pre>
  </div>
  </div>
  </p>
  <p>Perfect, now my array has 3 main categories:<br />
  <strong>Fruit<br />
  Color<br />
  Jewellery<br /></strong>
  <br />
  Each of them have Subcategories(can be repetetive):<br />
  <strong>Fruit - Orange, Mango &amp; Apple<br />
  Color - Silver, Orange &amp; Red<br />
  Jewellery - Bronze, Silver, Gold &amp; Platinum<br /></strong>
  And each of those subcategories hold some values(from 001 to 021)
  <br />
  <br />
  Now, the main part of the question. I want above array to be converted to tree view.<br />
  I already have HTML, JS &amp; CSS code on how the output should be.<br/>
  The values are hard coded.<br />
  Check below snippet<br/></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>$(function () {
      $('.vertical-tree ul').hide();
      $('.vertical-tree&gt;ul').show();
      $('.vertical-tree ul.active').show();
      $('.vertical-tree li').on('click', function (e) {
          var children = $(this).find('&gt; ul');
          if (children.is(":visible")) children.hide('fast').removeClass('active');
          else children.show('fast').addClass('active');
          e.stopPropagation();
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*-------------vertical-tree-view------------*/
  .vertical-tree{
      padding-top: 40px;
      padding-bottom: 40px;
  }
  .vertical-tree ul{
      padding-left: 30px;
  }
  .vertical-tree li {
      margin: 0px 0;
      list-style-type: none;
      position: relative;
      padding: 20px 5px 0px 5px;
  }
  .vertical-tree li::before{
      content: '';
      position: absolute; 
      top: 0;
      width: 1px; 
      height: 100%;
      right: auto; 
      left: -20px;
      border-left: 2px solid #ccc;
      bottom: 50px;
  }
  .vertical-tree li::after{
      content: '';
      position: absolute; 
      top: 34px; 
      width: 25px; 
      height: 20px;
      right: auto; 
      left: -20px;
      border-top: 2px solid #ccc;
  }
  .vertical-tree li a{
      display: inline-block;
      padding: 8px 30px;
      text-decoration: none;
      background-color: #e1eafc;
      color: #000000;
      border: 1px solid #5285eb;
      font-size: 13px;
      border-radius: 4px;
  }
  .vertical-tree &gt; ul &gt; li::before, 
  .vertical-tree &gt; ul &gt; li::after{
      border: 0;
  }
  .vertical-tree li:last-child::before{ 
          height: 34px;
  }
  .vertical-tree li a:hover, 
  .vertical-tree li a:hover+ul li a {
      background-color: #5a8dee;
      color: #fff;
      border: 1px solid #5a8dee;
  }
  .vertical-tree li a:hover+ul li::after, 
  .vertical-tree li a:hover+ul li::before, 
  .vertical-tree li a:hover+ul::before, 
  .vertical-tree li a:hover+ul ul::before{
      border-color:  #fbba00;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="mainDiv"&gt;
      &lt;div class="vertical-tree" style="display:block;"&gt;
      &lt;ul&gt;
          &lt;!--Fruit--&gt;
          &lt;li&gt;
              &lt;a href="javascript:void(0);"&gt;Fruit&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a href="javascript:void(0);"&gt;Orange&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;a href="javascript:void(0);"&gt;001&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="javascript:void(0);"&gt;012&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="javascript:void(0);"&gt;016&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="javascript:void(0);"&gt;Mango&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;a href="javascript:void(0);"&gt;011&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="javascript:void(0);"&gt;Apple&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;a href="javascript:void(0);"&gt;013&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="javascript:void(0);"&gt;004&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="javascript:void(0);"&gt;010&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;!--Color--&gt;
          &lt;li&gt;
              &lt;a href="javascript:void(0);"&gt;Color&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a href="javascript:void(0);"&gt;Silver&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;a href="javascript:void(0);"&gt;014&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="javascript:void(0);"&gt;015&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="javascript:void(0);"&gt;Orange&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;a href="javascript:void(0);"&gt;005&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="javascript:void(0);"&gt;016&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="javascript:void(0);"&gt;Red&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;a href="javascript:void(0);"&gt;003&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="javascript:void(0);"&gt;017&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="javascript:void(0);"&gt;018&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          
          &lt;!--Jewellery--&gt;
          &lt;li&gt;
              &lt;a href="javascript:void(0);"&gt;Jewellery&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a href="javascript:void(0);"&gt;Bronze&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;a href="javascript:void(0);"&gt;019&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="javascript:void(0);"&gt;020&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="javascript:void(0);"&gt;Silver&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;a href="javascript:void(0);"&gt;007&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="javascript:void(0);"&gt;Gold&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;a href="javascript:void(0);"&gt;002&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="javascript:void(0);"&gt;008&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="javascript:void(0);"&gt;Platinum&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;a href="javascript:void(0);"&gt;009&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="javascript:void(0);"&gt;021&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          
      &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <br />
  The above values are hard coded, I need something which would convert the output of array to above HTML.<br />
  This is what I have tried so far. It does not loop subcategories(Incorrect Output)<br />
  Also, not sure how to show values<br />
  <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>var globalResFiltered = [];
      globalResFiltered.push({Category:"Fruit",Subcategory:"Orange",Value:"001"});
      globalResFiltered.push({Category:"Fruit",Subcategory:"Orange",Value:"012"});
      globalResFiltered.push({Category:"Fruit",Subcategory:"Orange",Value:"006"});
      globalResFiltered.push({Category:"Fruit",Subcategory:"Mango",Value:"011"});
      globalResFiltered.push({Category:"Fruit",Subcategory:"Apple",Value:"013"});
      globalResFiltered.push({Category:"Fruit",Subcategory:"Apple",Value:"004"});
      globalResFiltered.push({Category:"Fruit",Subcategory:"Apple",Value:"010"});
      
      globalResFiltered.push({Category:"Color",Subcategory:"Silver",Value:"014"});
      globalResFiltered.push({Category:"Color",Subcategory:"Silver",Value:"015"});
      globalResFiltered.push({Category:"Color",Subcategory:"Orange",Value:"005"});
      globalResFiltered.push({Category:"Color",Subcategory:"Orange",Value:"016"});
      globalResFiltered.push({Category:"Color",Subcategory:"Red",Value:"003"});
      globalResFiltered.push({Category:"Color",Subcategory:"Red",Value:"017"});
      globalResFiltered.push({Category:"Color",Subcategory:"Red",Value:"018"});
      
      globalResFiltered.push({Category:"Jewellery",Subcategory:"Bronze",Value:"019"});
      globalResFiltered.push({Category:"Jewellery",Subcategory:"Bronze",Value:"020"});
      globalResFiltered.push({Category:"Jewellery",Subcategory:"Silver",Value:"007"});
      globalResFiltered.push({Category:"Jewellery",Subcategory:"Gold",Value:"002"});
      globalResFiltered.push({Category:"Jewellery",Subcategory:"Gold",Value:"008"});
      globalResFiltered.push({Category:"Jewellery",Subcategory:"Platinum",Value:"009"});
      globalResFiltered.push({Category:"Jewellery",Subcategory:"Platinum",Value:"021"});
      
      var tempCat = "";
      var tempSubCat = "";
      
      $(globalResFiltered).each(function(i,v){
                      
          if(i==0 || i==1 || i==2){debugger;}
          if(tempCat != v.Category)
          {
              $("#myTree").append("&lt;ul&gt;&lt;li&gt;&lt;a class='c_"+v.Category+"'&gt;"+v.Category+"&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;");
              $(".c_"+v.Category).after("&lt;ul&gt;&lt;li id='x_"+i+"_"+v.Category+"_"+v.Subcategory+"'&gt;&lt;a&gt;"+v.Subcategory+"&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;");
          }
          else
          {
              $("#x_0"+v.Category+"_"+v.Subcategory).after("&lt;li id='x_"+i+"_"+v.Category+"_"+v.Subcategory+"'&gt;&lt;a&gt;"+v.Subcategory+"&lt;/a&gt;&lt;/li&gt;");
          }
          tempCat = v.Category;
                      
                      
                      
      });
  
  
  
  
  
  
  $(function () {
      $('.vertical-tree ul').hide();
      $('.vertical-tree&gt;ul').show();
      $('.vertical-tree ul.active').show();
      $('.vertical-tree li').on('click', function (e) {
          var children = $(this).find('&gt; ul');
          if (children.is(":visible")) children.hide('fast').removeClass('active');
          else children.show('fast').addClass('active');
          e.stopPropagation();
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*-------------vertical-tree-view------------*/
  .vertical-tree{
      padding-top: 40px;
      padding-bottom: 40px;
  }
  .vertical-tree ul{
      padding-left: 30px;
  }
  .vertical-tree li {
      margin: 0px 0;
      list-style-type: none;
      position: relative;
      padding: 20px 5px 0px 5px;
  }
  .vertical-tree li::before{
      content: '';
      position: absolute; 
      top: 0;
      width: 1px; 
      height: 100%;
      right: auto; 
      left: -20px;
      border-left: 2px solid #ccc;
      bottom: 50px;
  }
  .vertical-tree li::after{
      content: '';
      position: absolute; 
      top: 34px; 
      width: 25px; 
      height: 20px;
      right: auto; 
      left: -20px;
      border-top: 2px solid #ccc;
  }
  .vertical-tree li a{
      display: inline-block;
      padding: 8px 30px;
      text-decoration: none;
      background-color: #e1eafc;
      color: #5a8dee;
      border: 1px solid #5285eb;
      font-size: 13px;
      border-radius: 4px;
  }
  .vertical-tree &gt; ul &gt; li::before, 
  .vertical-tree &gt; ul &gt; li::after{
      border: 0;
  }
  .vertical-tree li:last-child::before{ 
          height: 34px;
  }
  .vertical-tree li a:hover, 
  .vertical-tree li a:hover+ul li a {
      background-color: #5a8dee;
      color: #fff;
      border: 1px solid #5a8dee;
  }
  .vertical-tree li a:hover+ul li::after, 
  .vertical-tree li a:hover+ul li::before, 
  .vertical-tree li a:hover+ul::before, 
  .vertical-tree li a:hover+ul ul::before{
      border-color:  #fbba00;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  Incorrect, it only shows one subcategory
  &lt;div class="vertical-tree" id="myTree"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I have tried checking below reference, but in vain.<br />
  <a href="https://www.jqueryscript.net/table/jQuery-Plugin-For-Displaying-A-Tree-Of-Data-In-A-Table-treetable.html" rel="nofollow noreferrer">https://www.jqueryscript.net/table/jQuery-Plugin-For-Displaying-A-Tree-Of-Data-In-A-Table-treetable.html</a>
  <a href="https://www.jqueryscript.net/demo/simple-tree-table/" rel="nofollow noreferrer">https://www.jqueryscript.net/demo/simple-tree-table/</a></p>
  <br />
  Thanks in advance for your help '