title: How can I recursively create a UL/LI's from JSON data - multiple layers deep
body: <p>I am trying to use use the following JSON data to create the following similar structure in a recursive inner function with not much luck, really need some help and so if anyone can assist please do. Thank you in advance.</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;/li&gt;
      &lt;li&gt;
          &lt;a href=""&gt;&lt;/a&gt;
          &lt;div&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a href=""&gt;&lt;/a&gt;
                      &lt;div&gt;
                           ....etc
                      &lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>the JSON data I am using is as follows:</p>
  
  <pre><code>    var JSON = {
      menu: [
          {id: '0',sub: [
              {name: 'lorem ipsum 0-0',link: '0-0', sub: null},
              {name: 'lorem ipsum 0-1',link: '0-1', sub: null},
              {name: 'lorem ipsum 0-2',link: '0-2', sub: null}
              ]
          },
          {id: '1',sub: null},
          {id: '2',sub: [
              {name: 'lorem ipsum 2-0',link: '2-0', sub: null},
              {name: 'lorem ipsum 2-1',link: '2-1', sub: null},
              {name: 'lorem ipsum 2-2',link: '2-2', sub: [
                  {name: 'lorem ipsum 2-2-0',link: '2-2-0', sub: null},
                  {name: 'lorem ipsum 2-2-1',link: '2-2-1', sub: null},
                  {name: 'lorem ipsum 2-2-2',link: '2-2-2', sub: null},
                  {name: 'lorem ipsum 2-2-3',link: '2-2-3', sub: null},
                  {name: 'lorem ipsum 2-2-4',link: '2-2-4', sub: null},
                  {name: 'lorem ipsum 2-2-5',link: '2-2-5', sub: null},
                  {name: 'lorem ipsum 2-2-6',link: '2-2-6', sub: null}
              ]},
              {name: 'lorem ipsum 2-3',link: '2-3', sub: null},
              {name: 'lorem ipsum 2-4',link: '2-4', sub: null},
              {name: 'lorem ipsum 2-5',link: '2-5', sub: null}
              ]
          },
          {id: '3',sub: null}
      ]
  }
  </code></pre>
  
  <p>and the code I have created (incomplete, this is the brain teaser I need help on) is:</p>
  
  <pre><code>$(function(){
  
      $.fn.dropdown = function(settings){
          var that = this;
          var settings = $.extend({}, $.fn.dropdown.defaults, settings);
          var methods = {
              isArray: function(o){
                  return Object.prototype.toString.call(o) === '[object Array]';
              },
              createDropdownCode: function(arr){
                  var menu = arr.menu;
                  var html = null;
                  var menusort = function(menu){
                      html = that;
  
                      that.find("li").each(function(idx){
  
                          var menuList = menu[idx].sub;
                          var baseContainer = $(this);
                          var count = -1;
  
                          var subsort = (function(){
  
                              count += 1;
  
                              return function(submenu, pb){
  
                                  var subblock;
                                  subblock = $("&lt;div /&gt;").append('&lt;ul /&gt;');
  
                                  if(methods.isArray(submenu)){
  
                                      for(var i=0;i&lt;submenu.length;i++){
  
                                          var l = $("&lt;li /&gt;").append("&lt;a href='"+ submenu[i].link +"'&gt;"+ submenu[i].name +"&lt;/a&gt;");
  
                                          subblock.find('ul').append(l);
  
                                          if(pb !== undefined &amp;&amp; i == submenu.length-1){
                                              pb.append(subblock)
                                          }
  
                                          if(methods.isArray(submenu[i].sub)){
                                              subsort(submenu[i].sub, subblock.find('ul li').eq(i));
                                          }
  
                                      }
                                  }
                              }
                          })()
                          subsort(menuList)
                      })
                  }
                  menusort(menu);
                  return null; //html !== null ? html.html() : null;
              },
              init: function(){
  
                  // filter through json
                  // create the div=&gt;ul=&gt;li
                  if(settings.jsonData === undefined || settings.jsonData === null){
                      console.warn('No JSON Data passed')
                      return;
                  }else{
                      if(!methods.isArray(settings.jsonData.menu)){
                          console.warn('No JSON Data passed')
                          return; // error, no data!
                      }
                  }
  
  
                  //var html = methods.createBlock(settings.jsonData.menu[0].sub);
                  var html = methods.createDropdownCode(settings.jsonData);
                  //console.log(html) 
              }
          }
  
          methods.init();
  
          return that;
  
      }
  
      $.fn.dropdown.defaults = {
          jsonData: null
      }
  
  })
  
  $('#menu').dropdown({
      jsonData: JSON
  });
  </code></pre>
  
  <p>integrated code used, thanks to the individual that gave a close enough answer - Although will study the others.</p>
  
  <pre><code>$.fn.dropdown = function(settings){
  
      var that = this;
      var settings = $.extend({}, $.fn.dropdown.defaults, settings);
  
      var methods = {
          createDropDownCode: function(arr){
  
              // loop through li's of primary menu
              that.find("li").each(function(idx){
  
                  $(this).append( menusort(arr.menu[idx].sub) );
  
                  function menusort(data){
                      if(data !== null)   
                          var html = "&lt;div&gt;&lt;ul&gt;";
  
                      for(item in data){
                          html += "&lt;li&gt;";
                          if(typeof(data[item].sub) === 'object'){
                              html += "&lt;a href='" + data[item].link + "'&gt;" + data[item].name + "&lt;/a&gt;";
                              if($.isArray(data[item].sub))
                                  html += menusort(data[item].sub);
                          }
                          html += "&lt;/li&gt;"
                      }
                      if(data !== null)
                          html += "&lt;/ul&gt;&lt;/div&gt;";
                      return html;
                  }
              })
          },
          init: function(){
              var html = methods.createDropDownCode(settings.jsonData);
  
          }
      }
  
      methods.init();
  
  }
  </code></pre>