title: How to parse json into nested html list strucuture
body: <p>I tried this with xml, but the behavior was odd from firefox to IE.
  I haven't worked with json before, so any help would be appreciated.</p>
  
  <p>here's my json:</p>
  
  <pre><code>{
     "storeList":{
        "state":[
           {
              "stateName":"Maine",
              "store":[
                 {
                    "storeName":"Store 1",
                    "storeID":"store1",
                    "storeURL":"http:\/\/www.sitename.com"
                 },
                 {
                    "storeName":"Store 2",
                    "storeID":"store2",
                    "storeURL":"http:\/\/www.sitename.com"
                 },
                 {
                    "storeName":"Store 3",
                    "storeID":"store3",
                    "storeURL":"http:\/\/www.sitename.com"
                 }
              ]
           },
           {
              "stateName":"Connecticut",
              "store":[
                 {
                    "storeName":"Store 1",
                    "storeID":"store1",
                    "storeURL":"http:\/\/www.sitename.com"
                 }
              ]
           }
        ]
     }
  }
  </code></pre>
  
  <p>and the structure I'm going for - </p>
  
  <pre><code>&lt;div id="storeList"&gt;
      &lt;ul&gt;
         &lt;li&gt;
            &lt;h3&gt;State Name 1&lt;/h3&gt;
            &lt;a href="storeurl" id="storeid"&gt;storename&lt;/a&gt;
            &lt;a href="storeurl" id="storeid"&gt;storename&lt;/a&gt;
         &lt;/li&gt;
         &lt;li&gt;
            &lt;h3&gt;State Name 2&lt;/h3&gt;
            &lt;a href="storeurl" id="storeid"&gt;storename&lt;/a&gt;
         &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em><strong>update</em></strong></p>
  
  <p>tried a solution below, loading the json from an external file, but I get an error that object is not defined:</p>
  
  <pre><code>$(document).ready(function() {
                      var object;
                      $.getJSON('xml/storeList.json', function(json) {
                        object = json;
                      });
  
  
                      $('#storeList').append('&lt;ul/&gt;')
                      $.each(object.storeList.state, function() {
                          var list = $('#storeList ul'),
                          listItem = $('&lt;li/&gt;'),
                          html = listItem.append($('&lt;h3/&gt;').text(this.stateName));
  
                          $.each(this.store, function() {
                          listItem.append($('&lt;a /&gt;').attr('href', this.storeURL).text(this.storeName));
                          });
  
                          list.append(html)
                      });
                      });
  </code></pre>