将 JSON 文件转换为 Javascript 对象答案

【问题标题】：Converting a JSON file to a Javascript Object将 JSON 文件转换为 Javascript 对象
【发布时间】：2020-02-21 06:16:47
【问题描述】：

我正在尝试将此 json 文件转换为 javascript 对象，然后以表格格式显示（不要担心表格目前的外观，一旦解决，我会修复它。 ) 我看不出我做错了什么无法检索 json 对象，因为它们在程序运行时打印在控制台中。对 statechangehandler 的两个回调有语法错误，但是在接下来的两个回调中，json 对象被打印出来，不太清楚为什么。任何帮助将不胜感激，在此先感谢。

问题2.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>

问题2.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"
  }
]
}
}

【问题讨论】：

你的序列化失败了吗？或者您无法访问 objVideo.title ？因为如果 json 似乎是有效的，那么 videoObj 只有一个属性： videoObj.result;您的视频在 videoObj.result.video[] 中。但 videoObj 不存在。
每当我尝试访问这些值时，它们都会打印为未定义。所以我试图找到一种方法来打印正确的值。
Donno，但我尝试使用您的 json，您的 html 除了在 displayVideo 函数中通过 videoObj.result.video 更改 videoObj.result 之外，它运行良好（当然，当 Cors 问题得到解决时）
所以你得到了表格输出？
绝对是的。一旦解决了 CORS 策略（我想你通过开发控制台控制它），在你的函数中更改了 videoObj.result 的两个引用，我得到了表格。

标签： javascript html json ajax

【解决方案1】：

statechangehandler 的两个回调有语法错误，但是在接下来的两个回调中，json 对象被打印出来，不太清楚为什么。

每次状态改变时都调用handleStatusSuccess ......甚至在它达到成功状态之前。

您可能应该改用load 事件处理程序。

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);
}

【讨论】：

我这样做是因为我总是得到状态代码“0”，但如果我绕过状态代码检查 200，其他程序仍然可以正常工作。我决定取消对 ' 的检查200' 状态码，以便程序继续前进。