title: Create nested UL lists from data object
body: <p>I'm trying to create a nested UL from JSON. I am able to loop through and grab the data from the object, but I am having trouble building the nested UL. I figure the '.append' method is placed in the wrong spot. The resulting LIs are all grouped together. How do I create a loop (or another way is fine too) that will build the UL with the submenu LIs properly nested?  I've tried using other similar posts to solve my issue, but I can't seem to make it make sense with my data and code. A little braindead from this - I've tried a few methods to create this dynamic list and so far none has been successful. Any help would be appreciated :)</p>
  
  <p>My JSON data is nested 3 levels deep. I need to create a menu with submenus from it....</p>
  
  <p>The data:       </p>
  
  <pre><code>var menu = 
  [
      {
          title: "Best Known For",
          menuCaption: "Best Known For Caption",
          url: "/best-known-for",
          menu: [
                  {
                      title: "Acting",
                      menuCaption: "Acting",
                      url: "",
                      menu: [
                              {
                                  title: "Stage",
                                  url: "/"
                              },       
                              {
                                  title: "Screen",
                                  url: "/"
                              },       
                              {
                                  title: "Acting Three",
                                  url: "/"
                              },       
                              {
                                  title: "Acting Four",
                                  url: "/"
                              },       
                              {
                                  title: "Acting Five",
                                  url: "/"
                              },       
                              {
                                  title: "Acting Six",
                                  url: "/"
                              }       
                      ]
                  },
                  {
                      title: "Singing",
                      menuCaption: "Singing",
                      url: "",
                      menu: [
                              {
                                  title: "Jazz",
                                  url: "/"
                              },       
                              {
                                  title: "Pop",
                                  url: "/"
                              },       
                              {
                                  title: "Rock",
                                  url: "/"
                              },       
                              {
                                  title: "Latin",
                                  url: "/"
                              },       
                              {
                                  title: "Singing Five",
                                  url: "/"
                              },       
                              {
                                  title: "Singing Six",
                                  url: "/"
                              }       
                      ]
                  },
                  {
                      title: "Directing",
                      menuCaption: "Directing",
                      url: "",
                      menu: [
                              {
                                  title: "Television",
                                  url: "/"
                              },       
                              {
                                  title: "Stage",
                                  url: "/"
                              },       
                              {
                                  title: "Screen",
                                  url: "/"
                              },       
                              {
                                  title: "Award Winners",
                                  url: "/"
                              },       
                              {
                                  title: "Directing Five",
                                  url: "/"
                              },       
                              {
                                  title: "Directing Six",
                                  url: "/"
                              }       
                      ]
                  },
                  {
                      title: "Politics",
                      menuCaption: "Politics",
                      url: "",
                      menu: [
                              {
                                  title: "Presidents",
                                  url: "/"
                              },       
                              {
                                  title: "Senators",
                                  url: "/"
                              },       
                              {
                                  title: "House Of Representatives",
                                  url: "/"
                              },       
                              {
                                  title: "Governors",
                                  url: "/"
                              },       
                              {
                                  title: "Mayors",
                                  url: "/"
                              },       
                              {
                                  title: "Other Notables in Government",
                                  url: "/"
                              }       
                      ]
                  }
          ]
      },{
          title: "Life Events",
          menuCaption: "Choose a life Event",
          url: "/life-events",
          menu: [
                  {
                      title: "Arrested",
                      menuCaption: "Arrested",
                      url: "",
                      menu: [
                              {
                                  title: "Drug Possession",
                                  url: "/"
                              },       
                              {
                                  title: "Prostitution",
                                  url: "/"
                              },       
                              {
                                  title: "Tax Evasion",
                                  url: "/"
                              },       
                              {
                                  title: "Murder",
                                  url: "/"
                              },       
                              {
                                  title: "Rape",
                                  url: "/"
                              },       
                              {
                                  title: "Grand Theft",
                                  url: "/"
                              }       
                      ]
                  },
                  {
                      title: "Awards",
                      menuCaption: "Awards",
                      url: "",
                      menu: [
                              {
                                  title: "Academy Award",
                                  url: "/"
                              },       
                              {
                                  title: "Tony",
                                  url: "/"
                              },       
                              {
                                  title: "People's Choice",
                                  url: "/"
                              },       
                              {
                                  title: "Emmy",
                                  url: "/"
                              },       
                              {
                                  title: "Sag Award",
                                  url: "/"
                              },       
                              {
                                  title: "Lifetime Achievement",
                                  url: "/"
                              }       
                      ]
                  },
                  {
                      title: "Charity Work",
                      menuCaption: "Charity Work",
                      url: "",
                      menu: [
                              {
                                  title: "HIV/Aids",
                                  url: "/"
                              },       
                              {
                                  title: "Cerebral Palsy",
                                  url: "/"
                              },       
                              {
                                  title: "Spinal Cord Injury",
                                  url: "/"
                              },       
                              {
                                  title: "Breast Cancer",
                                  url: "/"
                              },       
                              {
                                  title: "Homelessness",
                                  url: "/"
                              },       
                              {
                                  title: "Orphans",
                                  url: "/"
                              }       
                      ]
                  },
                  {
                      title: "Crime Victim",
                      menuCaption: "Crime Victim",
                      url: "",
                      menu: [
                              {
                                  title: "Rape",
                                  url: "/"
                              },       
                              {
                                  title: "Murder",
                                  url: "/"
                              },       
                              {
                                  title: "Home Invasion",
                                  url: "/"
                              },       
                              {
                                  title: "Assault",
                                  url: "/"
                              },       
                              {
                                  title: "Identity Fraud",
                                  url: "/"
                              },       
                              {
                                  title: "Some Other Crime",
                                  url: "/"
                              }       
                      ]
                  },
                  {
                      title: "Death",
                      menuCaption: "Death",
                      url: "",
                      menu: [
                              {
                                  title: "Suicide",
                                  url: "/"
                              },       
                              {
                                  title: "Homocide",
                                  url: "/"
                              },       
                              {
                                  title: "Cancer",
                                  url: "/"
                              },       
                              {
                                  title: "Accident",
                                  url: "/"
                              },       
                              {
                                  title: "Heart Attack",
                                  url: "/"
                              },       
                              {
                                  title: "Stroke",
                                  url: "/"
                              }       
                      ]
                  },
                  {
                      title: "Disappeared",
                      menuCaption: "Disappeared",
                      url: "",
                      menu: [
                              {
                                  title: "Disappeared One",
                                  url: "/"
                              },       
                              {
                                  title: "Disappeared Two",
                                  url: "/"
                              },       
                              {
                                  title: "Disappeared Three",
                                  url: "/"
                              },       
                              {
                                  title: "Disappeared Four",
                                  url: "/"
                              },       
                              {
                                  title: "Disappeared Five",
                                  url: "/"
                              },       
                              {
                                  title: "Disappeared Six",
                                  url: "/"
                              }       
                      ]
                  },
                  {
                      title: "Discovery",
                      menuCaption: "Discovery",
                      url: "",
                      menu: [
                              {
                                  title: "New Land",
                                  url: "/"
                              },       
                              {
                                  title: "New Medicine",
                                  url: "/"
                              },       
                              {
                                  title: "New Species",
                                  url: "/"
                              },       
                              {
                                  title: "New Planet",
                                  url: "/"
                              },       
                              {
                                  title: "New Star",
                                  url: "/"
                              },       
                              {
                                  title: "New Something Else",
                                  url: "/"
                              }       
                      ]
                  },
                  {
                      title: "Divorced",
                      menuCaption: "Divorced",
                      url: "",
                      menu: [
                              {
                                  title: "Divorced One",
                                  url: "/"
                              },       
                              {
                                  title: "Divorced Two",
                                  url: "/"
                              },       
                              {
                                  title: "Divorced Three",
                                  url: "/"
                              },       
                              {
                                  title: "Divorced Four",
                                  url: "/"
                              },       
                              {
                                  title: "Divorced Five",
                                  url: "/"
                              },       
                              {
                                  title: "Divorced Six",
                                  url: "/"
                              }       
                      ]
                  },
                  {
                      title: "Fame",
                      menuCaption: "Fame",
                      url: "",
                      menu: [
                              {
                                  title: "Singing",
                                  url: "/"
                              },       
                              {
                                  title: "Dancing",
                                  url: "/"
                              },       
                              {
                                  title: "Acting",
                                  url: "/"
                              },       
                              {
                                  title: "Politics",
                                  url: "/"
                              },       
                              {
                                  title: "Activist",
                                  url: "/"
                              },       
                              {
                                  title: "Infamous",
                                  url: "/"
                              }       
                      ]
                  },
                  {
                      title: "Heroic Act",
                      menuCaption: "Heroic Act",
                      url: "",
                      menu: [
                              {
                                  title: "Heroic Act One",
                                  url: "/"
                              },       
                              {
                                  title: "Heroic Act Two",
                                  url: "/"
                              },       
                              {
                                  title: "Heroic Act Three",
                                  url: "/"
                              },       
                              {
                                  title: "Heroic Act Four",
                                  url: "/"
                              },       
                              {
                                  title: "Heroic Act Five",
                                  url: "/"
                              },       
                              {
                                  title: "Heroic Act Six",
                                  url: "/"
                              }       
                      ]
                  },
                  {
                      title: "Illness",
                      menuCaption: "Illness",
                      url: "",
                      menu: [
                              {
                                  title: "Cancer",
                                  url: "/"
                              },       
                              {
                                  title: "HIV/Aids",
                                  url: "/"
                              },       
                              {
                                  title: "Schizophrenia",
                                  url: "/"
                              },       
                              {
                                  title: "OCD",
                                  url: "/"
                              },       
                              {
                                  title: "Anorexia/Bulimia",
                                  url: "/"
                              },       
                              {
                                  title: "Multiple Sclerosis",
                                  url: "/"
                              }       
                      ]
                  },
                  {
                      title: "Incarcerated",
                      menuCaption: "Incarcerated",
                      url: "",
                      menu: [
                              {
                                  title: "Incarcerated One",
                                  url: "/"
                              },       
                              {
                                  title: "Incarcerated Two",
                                  url: "/"
                              },       
                              {
                                  title: "Incarcerated Three",
                                  url: "/"
                              },       
                              {
                                  title: "Incarcerated Four",
                                  url: "/"
                              },       
                              {
                                  title: "Incarcerated Five",
                                  url: "/"
                              },       
                              {
                                  title: "Incarcerated Six",
                                  url: "/"
                              }       
                      ]
                  },
                  {
                      title: "Killed",
                      menuCaption: "Killed",
                      url: "",
                      menu: [
                              {
                                  title: "Shot",
                                  url: "/"
                              },       
                              {
                                  title: "Stabbed",
                                  url: "/"
                              },       
                              {
                                  title: "Beaten",
                                  url: "/"
                              },       
                              {
                                  title: "Suicide",
                                  url: "/"
                              },       
                              {
                                  title: "Strangled",
                                  url: "/"
                              },       
                              {
                                  title: "Accident",
                                  url: "/"
                              }       
                      ]
                  },
                  {
                      title: "Kidnapped",
                      menuCaption: "Kidnapped",
                      url: "",
                      menu: [
                              {
                                  title: "Kidnapped One",
                                  url: "/"
                              },       
                              {
                                  title: "Kidnapped Two",
                                  url: "/"
                              },       
                              {
                                  title: "Kidnapped Three",
                                  url: "/"
                              },       
                              {
                                  title: "Kidnapped Four",
                                  url: "/"
                              },       
                              {
                                  title: "Kidnapped Five",
                                  url: "/"
                              },       
                              {
                                  title: "Kidnapped Six",
                                  url: "/"
                              }       
                      ]
                  },
                  {
                      title: "Military Service",
                      menuCaption: "Military Service",
                      url: "",
                      menu: [
                              {
                                  title: "Army",
                                  url: "/"
                              },       
                              {
                                  title: "Navy",
                                  url: "/"
                              },       
                              {
                                  title: "Air Force",
                                  url: "/"
                              },       
                              {
                                  title: "Marines",
                                  url: "/"
                              },       
                              {
                                  title: "National Guard",
                                  url: "/"
                              },       
                              {
                                  title: "Coast Guard",
                                  url: "/"
                              }       
                      ]
                  },
                  {
                      title: "Parenthood",
                      menuCaption: "Parenthood",
                      url: "",
                      menu: [
                              {
                                  title: "Adoption",
                                  url: "/"
                              },       
                              {
                                  title: "Surrogacy",
                                  url: "/"
                              },       
                              {
                                  title: "Multiples/Twins",
                                  url: "/"
                              },       
                              {
                                  title: "Mothers",
                                  url: "/"
                              },       
                              {
                                  title: "Fathers",
                                  url: "/"
                              },       
                              {
                                  title: "Odd Baby Names",
                                  url: "/"
                              }       
                      ]
                  },
                  {
                      title: "Product Launch",
                      menuCaption: "Product Launch",
                      url: "",
                      menu: [
                              {
                                  title: "Fashion",
                                  url: "/"
                              },       
                              {
                                  title: "Food",
                                  url: "/"
                              },       
                              {
                                  title: "Technology",
                                  url: "/"
                              },       
                              {
                                  title: "Automotive",
                                  url: "/"
                              },       
                              {
                                  title: "Architecture",
                                  url: "/"
                              },       
                              {
                                  title: "Product Launch Six",
                                  url: "/"
                              }       
                      ]
                  },
                  {
                      title: "Scandal",
                      menuCaption: "Scandal",
                      url: "",
                      menu: [
                              {
                                  title: "Sex Tape",
                                  url: "/"
                              },       
                              {
                                  title: "Domestic Violence",
                                  url: "/"
                              },       
                              {
                                  title: "Fraud",
                                  url: "/"
                              },       
                              {
                                  title: "Drug Abuse",
                                  url: "/"
                              },       
                              {
                                  title: "Adultery",
                                  url: "/"
                              },       
                              {
                                  title: "Arrested",
                                  url: "/"
                              }       
                      ]
                  },
                  {
                      title: "Wealth",
                      menuCaption: "Wealth",
                      url: "",
                      menu: [
                              {
                                  title: "Top 10 List",
                                  url: "/"
                              },       
                              {
                                  title: "Richest Women",
                                  url: "/"
                              },       
                              {
                                  title: "Richest Men",
                                  url: "/"
                              },       
                              {
                                  title: "Billionaires",
                                  url: "/"
                              },       
                              {
                                  title: "Self Made",
                                  url: "/"
                              },       
                              {
                                  title: "Lottery Winners",
                                  url: "/"
                              }       
                      ]
                  },
                  {
                      title: "World Record",
                      menuCaption: "World Record",
                      url: "",
                      menu: [
                              {
                                  title: "Tallest",
                                  url: "/"
                              },       
                              {
                                  title: "Shortest",
                                  url: "/"
                              },       
                              {
                                  title: "Oldest",
                                  url: "/"
                              },       
                              {
                                  title: "Fastest",
                                  url: "/"
                              },       
                              {
                                  title: "World Record Five",
                                  url: "/"
                              },       
                              {
                                  title: "World Record Six",
                                  url: "/"
                              }       
                      ]
                  }
          ]
      },
  
  
  
  
      {
          title: "Date",
          menuCaption: "Date",
          url: "/date",
          menu: []
      },
  
  
  
      {
          title: "Industry",
          menuCaption: "Industry",
          url: "/industry",
          menu: []
      },
  
  
  
      {
          title: "Nationality",
          menuCaption: "Nationality",
          url: "/nationality",
          menu: []
      }
  
  
  
  
  ];
  </code></pre>
  
  <p>I build the loop to access all of the nested menu data:</p>
  
  <pre><code>var mainMenu = $("#test ul.mainMenu");
  var subMenuL1 = $("#test ul.mainMenu ul.submenuLevel1");
  var subMenuL2 = $("#test ul.mainMenu ul.submenuLevel1 ul.submenuLevel2");
  var i, j, k, navItem, navItemLevel1, navItemLevel2;
  
  
  
  for(var i = 0; i &lt; menu.length; i++){
      var navItem = menu[i];
      mainMenu.append('&lt;li class="main"&gt;&lt;a href="' + navItem.url + '"&gt;' + navItem.title +' &lt;/a&gt;&lt;/li&gt;');
  
          for(var j = 0; j &lt; menu[i].menu.length; j++){
              var navItemLevel1 = navItem.menu[j];
              subMenuL1.append('&lt;li class="level1"&gt;&lt;a href="' + navItemLevel1.url + '"&gt;' + navItemLevel1.title +' &lt;/a&gt;&lt;/li&gt;');
  
                  for(var k = 0; k &lt; menu[i].menu[j].menu.length; k++){
                      var navItemLevel2 = navItemLevel1.menu[k];
                      subMenuL2.append('&lt;li class="level2"&gt;&lt;a href="' + navItemLevel2.url + '"&gt;' + navItemLevel2.title +' &lt;/a&gt;&lt;/li&gt;');
                  }
          }
  };
  </code></pre>
  
  <p>The HTML container:</p>
  
  <pre><code>&lt;div id="test"&gt;
      &lt;ul class="mainMenu"&gt;
          &lt;li&gt;
              &lt;ul class="submenuLevel1"&gt;
                  &lt;li&gt;
                      &lt;ul class="submenuLevel2"&gt;
                          &lt;li&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>