为什么不会运行Javascript代码?

时间:2016-09-02 15:31:39

标签: javascript json

我是javascript的新手。这是我第一次真正尝试做除跑步你好世界之外的事情。我试图从网址中检索信息并显示它。我检查了网址,它返回了json。 " Hello World"代码运行但是只要我添加在脚本标签内检索json的代码就没有任何反应。我没有语法错误。

<!DOCTYPE HTML>

<html>

<body>

  <p>Header...</p>

  <script>
    document.write("Hello World");

    var getJSON = function(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open("get", url, true);
    xhr.responseType = "json";
    xhr.onload = function() {
      var status = xhr.status;
      if (status == 200) {
        callback(null, xhr.response);
      } else {
        callback(status);
      }
    };
    xhr.send();

};

  getJSON("http://api.tvmaze.com/schedule?country=US&date=2016-08-31",
  function(err, data) {
  if (err != null) {
    alert("Something went wrong: " + err);
  } else {
    alert("Your query count: " + data.query.count);
  }
});

  </script>
  <p>...Footer</p>

</body>

</html>

2 个答案:

答案 0 :(得分:3)

我检查了你的html和js并快速查看控制台向我显示问题就在于此行

alert("Your query count: " + data.query.count);

将“data.query.count”更改为“data.length”

alert("Your query count: " + data.length);

解密代码是查找错误的最简单方法之一。 你可以在任何浏览器中点击F12来检查场景背后的东西

enter image description here

答案 1 :(得分:0)

如果您在浏览器上检查控制台,则会发现您的代码错误为Uncaught TypeError: Cannot read property 'count' of undefined

这是因为您试图通过data.query.count访问响应数组的长度,而实际上它应该是data.length

所以工作代码应该是这样的;

<!DOCTYPE HTML>

<html>

<body>

  <p>Header...</p>

  <script>
    document.write("Hello World");

    var getJSON = function(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open("get", url, true);
    xhr.responseType = "json";
    xhr.onload = function() {
      var status = xhr.status;
      if (status == 200) {
    callback(null, xhr.response);
      } else {
    callback(status);
      }
    };
    xhr.send();

};

  getJSON("http://api.tvmaze.com/schedule?country=US&date=2016-08-31",
  function(err, data) {
  if (err != null) {
    alert("Something went wrong: " + err);
  } else {
    alert("Your query count: " + data.length);
  }
});

  </script>
  <p>...Footer</p>

</body>

</html>