title: Output nested JSON into <ul> with sub-list items
body: <p>I have a JSON and am having trouble formatting it into a list with sub-list items. I have it somewhat working, but could just be missing something simple, which I hope you guys can help me with.</p>
  
  <p>My JSON looks like this:</p>
  
  <pre><code>var json = {
      "siteMap": [
          {
              "title": "Red",
              "link": "red.html",
              "subPageArray": [
                  { "subTitle": "SubLink1", "link": "test1.html" },
                  { "subTitle": "SubLink2", "link": "test2.html" }
              ]
          },
          {
              "title": "Blue",
              "link": "blue.html",
              "subPageArray": [
                  { "subTitle": "SubLink1", "link": "test1.html" },
                  { "subTitle": "SubLink2", "link": "test2.html" }
              ]
          },
          {
              "title": "Green",
              "link": "green.html"
          },
          {
              "title": "Yellow",
              "link": "yellow.html",
              "subPageArray": [
                  { "subTitle": "SubLink1", "link": "test1.html" },
                  { "subTitle": "SubLink2", "link": "test2.html" }
              ]
          }
      ]
  }
  </code></pre>
  
  <p>If an object does not have a 'subPageArray', I would like there to NOT be a sub-list under that item.</p>
  
  <p>My jQuery looks like this:</p>
  
  <pre><code>$.each(json.siteMap, function (i, val) {
      var i = 0,
          a = i++,
          data = "&lt;li class='topLevel'&gt;&lt;a href='/" + this.link + "'&gt;" + this.title + "&lt;/a&gt;&lt;ul&gt;&lt;li class='subLevel'&gt;&lt;a href='/" + this.subPageArray[i].link + "'&gt;" + this.subPageArray[a].subTitle + "&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;";
          i++;    
          $(data).appendTo(".siteMapContent ul");
  });
  </code></pre>
  
  <p>And my HTML looks like this:</p>
  
  <pre><code>&lt;div class="siteMapContent"&gt;
      &lt;ul&gt;&lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>I am hoping that the end result will look like this:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;a href="red.html"&gt;Red&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="test1.html"&gt;SubLink1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="test2.html"&gt;SubLink2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="blue.html"&gt;Blue&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="test1.html"&gt;SubLink1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="test2.html"&gt;SubLink2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="green.html"&gt;Green&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="yellow.html"&gt;Yellow&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="test1.html"&gt;SubLink1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="test2.html"&gt;SubLink2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>