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

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

1 个答案: