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

Question

我尝试动态构建 HTML 表格是徒劳的。 代码有效，但它并不能完全输出我需要的东西。 我的 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 中并使用 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]，然后终止该循环。

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

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