XMLHttpRequestを使用してJSONデータを収集してテーブルに入れる？

Question

私はajaxについて学んでいますが、なぜJSONデータがテーブルにhtmlに表示されないのか分かりません。私はコンソールエラーを取得していません。私はコンソールログを持っているので、オブジェクトをコンソールに表示しています。本質的には、各大統領情報をヘッダーのプロパティでリストされたテーブルに表示する必要があります。

<form> 
    <label for="name">Name:</label> 
    <input id="name" placeholder="President Name" type="text"> 
    <button type="button" onclick="loadPresidents()">Search for Presidents</button> 
    <button type="button">Clear</button> 

    <div id="presidentialTable"></div> 
</form> 

JS

function loadPresidents() { 
var xhttp = new XMLHttpRequest(); 
xhttp.onreadystatechange = function() { 
    if (this.readyState === 4 && this.status === 200) { 
     var data = this.responseText; 
     var jsonResponse = JSON.parse(data); 
     console.log(jsonResponse["presidents"]); 
     var table = document.createElement('table'); 
     table.setAttribute('class', 'history'); 
     var properties = ['number', 'name', 'birthday', 'took office', 'left office']; 
     var capitalize = function(s) { 
      return s.charAt(0).toUpperCase() + s.slice(1); 
     } 
     var tr = document.createElement('tr'); 
     for (var i = 0; i < properties.length; i++) { 
      var th = document.createElement('th'); 
      th.appendChild(document.createTextNode(capitalize(properties[i]))); 
      tr.appendChild(th); 
     } 
     table.appendChild(tr); 
     var tr, row; 
     for (var r = 0; r < jsonResponse["presidents"].length; r++) { 
      tr = document.createElement('tr'); 
      row = data[r]; 
      for (var i = 0; i < properties.length; i++) { 
       var td = document.createElement('td'); 
       td.appendChild(document.createTextNode(row[properties[i]])); 
       tr.appendChild(td); 
      } 
      table.appendChild(tr); 
     } 
     document.getElementById('presidentialTable').appendChild(table); 
    } 
}; 
xhttp.open("GET", "http://schwartzcomputer.com/ICT4570/Resources/USPresidents.json", true); 
xhttp.send(); 
} 

Answer 1

HTMLは、実際には非常に近かったです。ただ、いくつかのマイナーな編集を行なったし、ここでの結果である：

function loadPresidents() { 
     var xhttp = new XMLHttpRequest(); 
     xhttp.onreadystatechange = function() { 
      if (this.readyState === 4 && this.status === 200) { 
       var data = this.responseText; 
       var jsonResponse = JSON.parse(data); 
       console.log(jsonResponse["presidents"]); 
       var table = document.createElement('table'); 
       table.setAttribute('class', 'history'); 
       var properties = ['number', 'name', 'date', 'took_office', 'left_office']; // changed this 
       var capitalize = function(s) { 
        return s.charAt(0).toUpperCase() + s.slice(1); 
       } 
       var tr = document.createElement('tr'); 
       for (var i = 0; i < properties.length; i++) { 
        var th = document.createElement('th'); 
        th.appendChild(document.createTextNode(capitalize(properties[i]))); 
        tr.appendChild(th); 
       } 
       table.appendChild(tr); 
       var tr, row; 
       console.log("jsonResponse", jsonResponse); // changed this 
       for (var r = 0; r < jsonResponse["presidents"].president.length; r++) { // changed this 
        tr = document.createElement('tr'); 
        row = jsonResponse["presidents"].president[r]; // changed this 
        for (var i = 0; i < properties.length; i++) { 
         var td = document.createElement('td'); 
         td.appendChild(document.createTextNode(row[properties[i]])); 
         tr.appendChild(td); 
        } 
        table.appendChild(tr); 
       } 
       document.getElementById('presidentialTable').appendChild(table); 
      } 
     }; 
     xhttp.open("GET", "http://schwartzcomputer.com/ICT4570/Resources/USPresidents.json", true); 
     xhttp.send(); 
    } 

私はあなたが違いを参照してくださいと思います// changed thisとして私はいくつかのインラインコメントを追加しました。