javascript - XMLHttpRequest收集JSON数据制成表？

我正在学习有关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();
}

最佳答案

其实你很亲密。做了一些小的修改，结果如下：

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，我想您会看到不同之处。

关于javascript - XMLHttpRequest收集JSON数据制成表？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45577640/