为什么我的JavaScript代码在此json数据上读取null属性？

Question

编辑：抱歉，代码中有错误。 现在改变它

我一直在尝试从github链接中提取一些JSON数据以将其放入html文件中，但是每次我尝试这样做（使用下面的代码）时，都会收到Uncaught TypeError：无法读取null的属性“值”。 即使“值”（在Json文件中）当然也不为空。

这是怎么了？

谢谢

您可以检出我放在github https://github.com/BearsAreFriendly/PolitiekeHelderheid/blob/master/kamerleden.json上的json文件。 我非常确定已经定义了“值”

  var section = document.querySelector("section");
  var requestURL = 'https://github.com/BearsAreFriendly/PolitiekeHelderheid/blob/master/kamerleden.json';
  var request = new XMLHttpRequest();
  request.open('GET', requestURL);
  request.responseType = 'json';
  request.send();

  request.onload = function(){
    var phdata = request.response;
    showKamerleden(phdata);
  }
  function showKamerleden(jsonObj) {
  var kamerleden = jsonObj["value"];
  for (var i = 0; i < kamerleden.length; i++) {
      var myPara1 = document.createElement('p');
      myPara1.textContent = kamerleden[i].Id;
      section.appendChild(myPara1);
  }
  }

这应该打印出的ID。 相反，我得到了我提到的错误代码

Answer 1

尝试这个

var kamerledens = jsonObj.value;

代替

var kamerledens = jsonObj["value"];

而且您还应该使用循环遍历所有ID

function showKamerleden(jsonObj) {
var kamerledens = jsonObj.value;
for (var i = 0; i < kamerledens.length; i++) {
    var myPara1 = document.createElement('p');
    myPara1.textContent = kamerledens[i].Id;
    section.appendChild(myPara1);
}
}

编辑：

尝试移动

  request.send();

在onload函数之后

Answer 2

我相信您实际上可能不是从GitHub接收任何JSON数据，而是HTML。 当我的浏览器请求GitHub页面时，响应内容类型为Content-Type: text/html 。 您的请求网址应使用JSON响应，以使其可用。 当您请求GitHub URL时，您可能会得到其他内容（例如HTML），而不是JSON。

例如，此URL仅提供JSON数据： https : //my-json-server.typicode.com/typicode/demo/posts

当我在网络部分下的开发工具中检查页面时，它具有Content-Type: application/json

修改您的代码以添加下面的网址非常有效。

 var section = document.querySelector("section"); var requestURL = 'https://my-json-server.typicode.com/typicode/demo/posts'; var request = new XMLHttpRequest(); request.open('GET', requestURL); request.responseType = 'json'; request.send(); request.onload = function(){ var phdata = request.response; /* showKamerleden(phdata); */ document.write(JSON.stringify(phdata) ) } 

Answer 3

它不是“值”为null， jsonObj为null 。

因此，错误“不能读取属性‘值’空的 ”

我建议您在回调中输出并分析请求

console.log(request)