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

Question

我尝试动态构建HTML表格是徒劳的。 代码工作，但它不输出我所需要的。 只有2我的JSON输出中的属性：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 | 
+-------------------+---------------------+ 

代码显示了这一点（没有THEAD可见）：

[ 
{ 
" 
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); 
}