title: Build a nested list using JSON
body: <p>I have the following JSON that creates a menu:</p>
  
  <pre><code>{
      "menu": {
          "id": "organisation-201",
          "class": "list",
          "content": {
              "menuitem": [{
                  "text": "New Journal Entry",
                  "title": "New Journal Entry",
                  "href": "/Organisations/201/NewJournalEntry",
                  "liClass": "",
                  "icon": "icon test"
              }, {
                  "text": "View People",
                  "title": "View People",
                  "href": "/Organisations/201/People",
                  "liClass": "",
                  "icon": "icon test"
              }, {
                  "text": "Edit",
                  "title": "Edit",
                  "href": "/Organisations/201/Edit",
                  "liClass": "sep",
                  "icon": "icon test"
              }]
          }
      }
  }
  </code></pre>
  
  <p>And then using jQuery we build it like: (Note: I call the json using <code>$.ajax</code> but not shown it here!)</p>
  
  <pre><code>// Build the menu
  var ul = $("&lt;ul/&gt;").attr("id", data.menu.id).addClass(data.menu.class);
  
  // For each menu item
  $.each(data.menu.content.menuitem, function () {
      var li = $("&lt;li/&gt;").appendTo(ul).addClass(this.liClass);
      var anchor = $("&lt;a/&gt;").appendTo(li).attr("href", this.href).attr("title", this.title);
  
      var span = $("&lt;span/&gt;").appendTo(anchor).addClass(this.icon).html(this.text)
  });
  </code></pre>
  
  <p>Okay so what I'm trying to do is build a nested menu structure so for example I could have mark-up like:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;Link 1&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="#"&gt;Link 2&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Link 2.1&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#"&gt;Link 2.2&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>What would the best way to do this be? Baring in mind that they're might not always be a submenu... I've thought about putting extra parameters in the menuitem but the nested menus could be 2-3 levels deep so it needs to be flexible. Any ideas suggestions and code examples would be much appreciated. Thanks.</p>