javascript - XMLHttpRequest 收集 JSON 数据以放入表中？

Question

我正在学习 ajax，但我不确定为什么我没有得到我的 JSON 数据没有通过表格显示到 html 中？我没有收到控制台错误。我正在将对象显示到控制台中，因为我放置了控制台日志。本质上只需将每个总统信息显示到标题中属性列出的表中即可。

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

其实你们已经很接近了。只是做了一些小的编辑，结果如下:

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

我添加了一些内联注释，因为//更改了此内容我想您会看到差异。