如何使用来自 AJAX 调用的 JSON 数据构建 table？

Question

我尝试动态构建 HTML table 是徒劳的。代码有效，但它并没有完全输出我需要的。我的 JSON 输出中只有 2 个属性：location 和 completed_on 而不是得到这个：

+-------------------+---------------------+
|     Location      |    Completed on     |
+-------------------+---------------------+
| 10 Duskwood Dr.   | 2015-07-06 14:10:42 |
| 2 Booty Bay Blvd. | 2015-07-09 13:44:38 |
+-------------------+---------------------+

代码显示了这个（没有可见的广告）：

[
{
"
l
o
c
a
...
]
... prints the whole JSON character by character inside many <td> tags...

这是我必须处理的典型 JSON 数据的示例：

[{"location":"10 Duskwood Dr.","completed_on":"2015-07-06 14:10:42"},
{"location":"2 Booty Bay Blvd.","completed_on":"2015-07-09 13:44:38"}]

这是我硬编码到 HTML 中的 table 标记，并更新为 JSON:

<table id="completed_locations" class="table table-striped">
    <thead>
        <tr>
            <th>Location</th>
            <th>Completed on</th>
        </tr>
    </thead>
    <tbody>
        // JSON data goes here
    </tbody>
</table>

我使用此代码构建 <tr> 和 <td>:

// this is called within success of ajax to build table
var oldTable = document.getElementById('completed_locations'),
    newTable = oldTable.cloneNode();
for(var i = 0; i < output.length; i++){
    var tr = document.createElement('tr');
    for(var j = 0; j < output[i].length; j++){
        var td = document.createElement('td');
        td.appendChild(document.createTextNode(output[i][j]));
        tr.appendChild(td);
    }
    newTable.appendChild(tr);
}
oldTable.parentNode.replaceChild(newTable, oldTable);

Answer 1

我怀疑你的 output 变量仍然是 JSON 字符串格式。
这将导致 for 循环遍历字符串中的每个字母，而不是遍历数组中的每个条目。

尝试添加：

output = JSON.parse(output);

在你的 for 循环之前。

这不会引发任何错误的原因是因为外循环遍历了 JSON 字符串的整个长度，然后在内循环中，output[i].length 总是 1, 因为它是一个 1 个字符的字符串。内部循环将始终访问 output[i][0]，然后终止该循环。

现在，修复 table 的实际创建：

var output = '[{"location":"10 Duskwood Dr.","completed_on":"2015-07-06 14:10:42"},{"location":"2 Booty Bay Blvd.","completed_on":"2015-07-09 13:44:38"}]',
    oldTable = document.getElementById('completed_locations'),
    newTable = oldTable.cloneNode();

output = JSON.parse(output);

for(var i = 0; i < output.length; i++){
    var tr = document.createElement('tr');
    // No need to loop here with only 2 properties
    var td = document.createElement('td');
    td.appendChild(document.createTextNode(output[i].location));
    tr.appendChild(td);

    td = document.createElement('td');
    td.appendChild(document.createTextNode(output[i].completed_on));
    tr.appendChild(td);

    newTable.appendChild(tr);
}
oldTable.parentNode.replaceChild(newTable, oldTable);

<table id="completed_locations" class="table table-striped">
    <thead>
        <tr>
            <th>Location</th>
            <th>Completed on</th>
        </tr>
    </thead>
    <tbody>
        // JSON data goes here
    </tbody>
</table>

如果你有更多的列，你可以遍历它们，而不是：

var columns = ['location', 'completed_on'];
for(var i = 0; i < output.length; i++){
    var tr = document.createElement('tr'),
        td;

    for(var j = 0; j < columns.length; j++){
        td = document.createElement('td');
        td.appendChild(document.createTextNode(output[i][columns[j]]));
        tr.appendChild(td);
    }

    newTable.appendChild(tr);
}

如何使用来自 AJAX 调用的 JSON 数据构建 table？

How to build a table with JSON data that came from an AJAX call?

html

javascript

json

html-table