title: Converting a JSON file to a Javascript Object
body: <p>I'm trying to convert this json file to a javascript object, and then display it in a table format (don't worry about how the table looks at the moment, I'll fix that once this is worked out.) I can't see what I've done wrong to not be able to retrieve the json objects, as they are printed in the console when the program is run. There is a syntax error for two callbacks to the statechangehandler, but then on the next two callbacks, the json objects are printed, not quite sure why. Any help would be appreciated, thanks in advance. </p>
  
  <p>Question2.html:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Question 2&lt;/title&gt;
    &lt;script&gt;
      function makeAjaxQueryVideo() {
  
        var xhttp = new XMLHttpRequest();
  
        xhttp.onreadystatechange = function() {
          readyStateChangeHandler(xhttp);
        };
  
        xhttp.open("GET", "Question2.json", true);
        xhttp.send();
      }
  
      function readyStateChangeHandler(xhttp) {
        console.log("Callback function readyStateChangeHandler is executed");
        console.log("readyState = " + xhttp.readyState);
        console.log("status = " + xhttp.status);
        console.log("responseText:");
        console.log(xhttp.responseText);
  
        handleStatusSuccess(xhttp);
      }
  
      function handleStatusFailure(xhttp) {
        var displayDiv = document.getElementById("display");
        displayDiv.innerHTML = "XMLHttpRequest failed: status " + xhttp.status;
      }
  
      function handleStatusSuccess(xhttp) {
        var jsonText = xhttp.responseText;
  
        var videoObj = JSON.parse(jsonText);
        console.log(videoObj);
        console.log("title is " + videoObj.title);
  
        displayVideo(videoObj);
      }
  
      function displayVideo(videoObj) {
  
        var html = "&lt;h2&gt;Stock Market Activity " + videoObj.queryTime + "&lt;/h2&gt;";
        html += "&lt;table border='1'&gt;";
        html += "&lt;tr&gt;&lt;th&gt;Stock&lt;/th&gt;&lt;th&gt;Value&lt;/th&gt;&lt;th&gt;Change&lt;/th&gt;&lt;th&gt;Net / %&lt;/th&gt;&lt;/tr&gt;";
        for (var i = 0; i &lt; videoObj.result.length; i++) {
          var videoObj1 = videoObj.result[i];
          html += "&lt;tr&gt;";
          html += "&lt;td&gt;&lt;b&gt;" + videoObj1.title + "&lt;/b&gt;&lt;/td&gt;";
          html += "&lt;td align='right'&gt;" + videoObj1.channel + "&lt;/td&gt;";
          html += "&lt;td style='color:green' align='right'&gt;";
          html += videoObj1.view;
          html += "&lt;img src='stockUp.png' /&gt;";
          html += "&lt;/td&gt;";
          html += "&lt;td align='right'&gt;" + videoObj1.link + "%&lt;/td&gt;";
          html += "&lt;/tr&gt;";
        }
        html += "&lt;/table&gt;";
  
        var displayDiv = document.getElementById("display");
        displayDiv.innerHTML = html;
      }
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;button onClick="makeAjaxQueryVideo()"&gt;Get Search Result&lt;/button&gt;
    &lt;div id="display"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Question2.json:</p>
  
  <pre><code>{
  "result": {
  "searchKeyword": "Mathematics",
  "video": [
    {
      "title": "Chaos Game",
      "channel": "Numberphile",
      "view": "428K",
      "link": "http://www.youtube.com/watch?v=kbKtFN71Lfs",
      "image": "http://i.ytimg.com/vi/kbKtFN71Lfs/0.jpg",
      "length": "8:38"
    },
    {
      "title": "Australian Story: Meet Eddie Woo, the maths teacher you wish 
   you'd had in high school",
      "channel": "ABC News (Australia)",
      "view": "223K",
      "link": "http://www.youtube.com/watch?v=SjIHB8WzJek",
      "image": "http://i.ytimg.com/vi/SjIHB8WzJek/0.jpg",
      "length": "28:08"
    },
    {
      "title": "Ham Sandwich Problem",
      "channel": "Numberphile",
      "view": "557K",
      "link": "http://www.youtube.com/watch?v=YCXmUi56rao",
      "image": "http://i.ytimg.com/vi/YCXmUi56rao/0.jpg",
      "length": "5:53"
    },
    {
      "title": "Magic Square Party Trick",
      "channel": "Numberphile",
      "view": "312K",
      "link": "http://www.youtube.com/watch?v=aQxCnmhqZko",
      "image": "http://i.ytimg.com/vi/aQxCnmhqZko/0.jpg",
      "length": "3:57"
    },
    {
      "title": "The 8 Queen Problem",
      "channel": "Numberphile",
      "view": "909K",
      "link": "http://www.youtube.com/watch?v=jPcBU0Z2Hj8",
      "image": "http://i.ytimg.com/vi/jPcBU0Z2Hj8/0.jpg",
      "length": "7:03"
    }
  ]
  }
  }
  </code></pre>