title: Displaying json arrays with jQuery .each
body: <p>I have a json file that I want to pull data from. When the json file is not in an array than everything works just fine. I guess the problem is that I do not know how to select the correct data in my .each function. Here is the example json file:</p>
  
  <pre><code>{
     "chapter1": [
        {
           "title":"This is the title",
           "chapter":"1",
           "verse":"1",
           "text":"text goes here"
        },
        {
           "verse":"4",
           "text":"text goes here"
        },
        {
           "verse":"6",
           "text":"text goes here"
        }
     ],
  
     "chapter2": [
        {
           "title":"This is the title",
           "chapter":"2",
           "verse":"1",
           "text":"text goes here"
        },
        {
           "verse":"4",
           "text":"text goes here"
        },
        {
           "verse":"6",
           "text":"text goes here"
        }
     ]
  }
  </code></pre>
  
  <p>Here is my loop to display the data:</p>
  
  <pre><code>$.getJSON(passages, function(data) {
      $.each(data, function() {
          $('#chapter1 h2').append(this.title);
          $('#chapter1 h3').append(this.chapter);
          $('#verses').append('&lt;li&gt;&lt;p&gt;' + this.verse + this.text + '&lt;/p&gt;&lt;/li&gt;');    
      });
  });
  </code></pre>
  
  <p>When I remove the "chapter2" data from the json file, than everything works just fine. I would like to display the "chapter1" contents and the "chapter2" contents. </p>