如何使用來自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); 
}