title: Dynamic unordered list rendering from json with jQuery
body: <p>I am trying to build a dynamic unordered list with nested child ul list levels(actually 4+ sub levels), I am having hard time rendering the actual markup I need, so at a later stage I can make it more functional, I created at the following link <a href="http://jsfiddle.net/creativestudio/jk69je6t/" rel="nofollow noreferrer">jsfiddle</a>, the html markup looks like:</p>
  
  <pre><code>         &lt;ul class="nav nav-sidebar"&gt;
            &lt;li class="dropdown"&gt;
              &lt;a href="#"&gt;theatre_name: Americas &lt;i class="ion-chevron-down text-primary pull-right"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;ul class=""&gt;
                &lt;li class="dropdown"&gt;
                  &lt;a href="#"&gt;location_name: USA&lt;/a&gt;
                  &lt;ul class=""&gt;
                    &lt;li&gt;
                      &lt;a href="#"&gt;Living in USA&lt;/a&gt;
                      &lt;ul class=""&gt;
                        &lt;li&gt;&lt;a href="#"&gt;123 John Doe&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;534 John Doe&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;9728 John Doe&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;7668 John Doe&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                      &lt;a href="#"&gt;What to do in USA&lt;/a&gt;
                      &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Fishing&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Skiing&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Hicking&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Running&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                      &lt;a href="#"&gt;Visiting in USA&lt;/a&gt;
                      &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#"&gt;By Car&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;By Air&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;By Boat&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Walking&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt; &lt;!-- /.dropdown --&gt;
                &lt;li class="dropdown"&gt;
                  &lt;a href="#"&gt;location_name: Mexico&lt;/a&gt;
                  &lt;ul class=""&gt;
                    &lt;li&gt;
                      &lt;a href="#"&gt;Living in Mexico&lt;/a&gt;
                      &lt;ul class=""&gt;
                        &lt;li&gt;&lt;a href="#"&gt;123 Juan Lopez&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;534 Juan Lopez&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;9728 Juan Lopez&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;7668 Juan Lopez&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                      &lt;a href="#"&gt;What to do in Mexico&lt;/a&gt;
                      &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Fishing&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Skiing&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Hicking&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Running&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                      &lt;a href="#"&gt;Visiting in Mexico&lt;/a&gt;
                      &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Por Auto&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Por Avion&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Por Barco&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Caminando&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt; &lt;!-- /.dropdown --&gt;
              &lt;/ul&gt;
            &lt;/li&gt; &lt;!-- /.dropdown --&gt;
        &lt;/ul&gt; &lt;!-- ul --&gt;
  </code></pre>
  
  <p>After rendering, the markup should look like the following image:</p>
  
  <p><img src="https://i.stack.imgur.com/YBJhf.jpg" alt="enter image description here"></p>
  
  <p>This is the json data.</p>
  
  <pre><code>{
              "user_id": "01010101",
              "user_name": "John Doe",
              "super_user": true,
              "theatre": {
                  "theatre_name": "americas",
                  "locations": [
                      {
                          "location_name": "USA",
                          "events": [
                              {
                                  "event_name": "living in Palo Alto",
                                  "people": [
                                      "123 John Doe",
                                      "534 John Doe",
                                      "9728 John Doe",
                                      "7668 John Doe"
                                  ]
                              },
                              {
                                  "event_name": "What to do in Palo Alto",
                                  "people": [
                                      "Fishing",
                                      "Skying",
                                      "Hiking",
                                      "Running"
                                  ]
                              },
                              {
                                  "event_name": "Visiting in Palo Alto",
                                  "people": [
                                      "By Car",
                                      "By Air",
                                      "By Boat",
                                      "Walking"
                                  ]
                              }
                          ]
                      }
                  ],
                  "theatre_name": "Europa",
                  "locations": [
                      {
                          "location_name": "Spain",
                          "events": [
                              {
                                  "event_name": "living in Barcelona",
                                  "people": [
                                      "123 Juan Garza",
                                      "534 Juan Garza",
                                      "9728 Juan Garza",
                                      "7668 Juan Garza"
                                  ]
                              },
                              {
                                  "event_name": "What to do in Barcelona",
                                  "people": [
                                      "Fishing",
                                      "Skying",
                                      "Hiking",
                                      "Running"
                                  ]
                              },
                              {
                                  "event_name": "Visiting in Barcelona",
                                  "people": [
                                      "By Car",
                                      "By Air",
                                      "By Boat",
                                      "Walking"
                                  ]
                              }
                          ]
                      }
                  ],
                  "theatre_name": "Asia",
                  "locations": [
                      {
                          "location_name": "China",
                          "events": [
                              {
                                  "event_name": "living in Beijing",
                                  "people": [
                                      "123 Wei Zhang",
                                      "534 Wei Zhang",
                                      "9728 Wei Zhang",
                                      "7668 Wei Zhang"
                                  ]
                              },
                              {
                                  "event_name": "What to do in Beijing",
                                  "people": [
                                      "Fishing",
                                      "Skying",
                                      "Hiking",
                                      "Running"
                                  ]
                              },
                              {
                                  "event_name": "Visiting in Beijing",
                                  "people": [
                                      "By Car",
                                      "By Air",
                                      "By Boat",
                                      "Walking"
                                  ]
                              }
                          ]
                      }
                  ]
              }
          }
  </code></pre>
  
  <p>This is a JavaScript I found but need some work to make it functional, how do I loop through the json objects, pull the data and generate the needed markup?</p>
  
  <pre><code>$(function(){
              $.getJSON('./JSON/latest.json', function(data) {
                  var items = [];
                  $.each(data, function(i, item) {
                  items.push('&lt;li&gt;&lt;a href="' + link + '"&gt;' + pName + '&lt;/a&gt;&lt;span class="vTitle"&gt;' + vTitle + '&lt;/span&gt;' + shortDesc + '&lt;/li&gt;');
                  });
                  $('#latestList').append( items.join('') );
              });
          });
  </code></pre>