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

Posted 2023-03-05

【中文标题】如何使用来自 AJAX 调用的 JSON 数据构建表？

【英文标题】：How to build a table with JSON data that came from an AJAX call?

【发布时间】：2015-09-29 08:39:12

【问题描述】：

我尝试动态构建 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);

【问题讨论】：

Cerbrus 已经指出了您的第一个问题（您有一个 JSON 字符串，您需要解析它以获取实际的 javascript 数组）。接下来您需要解决的是创建 <td> 元素，如果您有一个对象数组，而不是数组数组，这看起来是错误的。

【参考方案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);

【讨论】：

这使我的alert(output) 显示[object Object],[object Object]，现在表格中没有任何显示。

很好，这意味着output 现在是一个实际的对象，只是一个 JSON 字符串。现在我们只需要迭代它。

终于，我真的明白了。谢谢。