title: Extracting JSON data locally using .getJSON but data will not appear
body: <p>First off, I am trying to parse JSON and I'm using a file locally. </p>
  
  <p>When I run the following:</p>
  
  <pre><code>$.getJSON('/trivia_demos.json', function(data) {
     alert("It worked!); }); 
  </code></pre>
  
  <p>The alert box comes up and I can confirm I am calling the right file locally. Console.log works as well. So far, so good. </p>
  
  <p>I now want to pull several parts of the data and show them on the page. The <a href="http://jsfiddle.net/Lovxtrfh/" rel="nofollow">JSFiddle</a> is here, but the relevant code is the following: 
        </p>
  
  <pre><code>    $.getJSON('/trivia_demos.json', function(data) {
      var items = [] 
       $.each(data.reponse, function(item, i) {
          items.push('&lt;li id="' + i.order + '"&gt;' + i.question + ' - ' + i.answer + '&lt;/li&gt;');
          });
  
  $('&lt;ul/&gt;', {
      'class': 'my-new-list',
      html: items.join('')
   }).appendTo('#example');});
  </code></pre>
  
  <p> </p>
  
  <p>In effect, I want the order, question, and answer appended to my div "#example". When I load the page, nothing happens though. In light of my first point, I believe I am screwing up the construction of the JQuery to target those three pieces of data and display them. </p>
  
  <p>I believe something is missing between calling the json file and actually accessing the json object. </p>
  
  <p>Also, in the trivia_demos.json file, the following json is present. </p>
  
  <pre><code>[{"id":1,"order":1,"question":"Who was the only American President to 
  learn English as a second language? ","answer1":"John Quincy Adams",
  "answer2":"Martin van Buren","answer3":"William McKinley ",
  "answer4":"Andrew Jackson","correcta":"Martin van Buren",
  "published":"2014-11-04","url":"http://example.com/trivia_demos/1.json"}]
  </code></pre>