CODEWITHSUNDEEP
javascripthtmljsonajax
John DOe
John DOe

Reputation: 69

Converting a JSON file to a Javascript Object

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.

Question2.html:

<html>

<head>
  <title>Question 2</title>
  <script>
    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 = "<h2>Stock Market Activity " + videoObj.queryTime + "</h2>";
      html += "<table border='1'>";
      html += "<tr><th>Stock</th><th>Value</th><th>Change</th><th>Net / %</th></tr>";
      for (var i = 0; i < videoObj.result.length; i++) {
        var videoObj1 = videoObj.result[i];
        html += "<tr>";
        html += "<td><b>" + videoObj1.title + "</b></td>";
        html += "<td align='right'>" + videoObj1.channel + "</td>";
        html += "<td style='color:green' align='right'>";
        html += videoObj1.view;
        html += "<img src='stockUp.png' />";
        html += "</td>";
        html += "<td align='right'>" + videoObj1.link + "%</td>";
        html += "</tr>";
      }
      html += "</table>";

      var displayDiv = document.getElementById("display");
      displayDiv.innerHTML = html;
    }
  </script>
</head>

<body>
  <button onClick="makeAjaxQueryVideo()">Get Search Result</button>
  <div id="display"></div>
</body>

</html>

Question2.json:

{
"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"
  }
]
}
}

Upvotes: 2

Views: 125

Answers (1)

Quentin
Quentin

Reputation: 943207

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.

You call handleStatusSuccess every time the state changes … even before it reaches a successful state.

You should probably use a load event handler instead.

function makeAjaxQueryVideo() {
    var xhttp = new XMLHttpRequest();
    xhttp.addEventListener("load", handler)
    xhttp.open("GET", "Question2.json");
    xhttp.send();
}

function handler() {
    console.log("Callback function readyStateChangeHandler is executed");
    console.log("readyState = " + this.readyState);
    console.log("status = " + this.status);
    console.log("responseText:");
    console.log(this.responseText);
    handleStatusSuccess(this);
}

Upvotes: 4

Related Questions