title: jQuery JSON looping through nested objects
body: <p>I currently have this:</p>
  
  <pre><code>    $.getJSON('test.json', function(data) {
        var items = [];
  
        $.each(data, function(key, val) {
          items.push('&lt;li id="' + key + '"&gt;' + val + '&lt;/li&gt;');
        });
  
        $('&lt;ul/&gt;', {
          'class': 'my-new-list',
          html: items.join('')
        }).appendTo('body');
      });
  </code></pre>
  
  <p>test.json looks like this:</p>
  
  <p><code>{"key1":{"key11":"value11","key12":"value12"},"key2":"value2","key3":"value3"}</code></p>
  
  <p>I'm getting:</p>
  
  <pre><code>[object Object]
  value2
  value3
  </code></pre>
  
  <p>How can I change it so it will loop through all the nested items regardless of how many nested values I have?</p>
  
  <p>So for the above example I will get</p>
  
  <pre><code>value1
      value11
      value12
  value2
  value3
  </code></pre>