從javascript中的json數組動態生成表格

Question

我有一個JSON數據，如下所示。我需要使用JavaScript從這個JSON生成一個表格。對我來說最難的部分是將每個元素顯示爲一列。請幫我解決它。

JSON：

[ 
{ 
    "Header": "Column1", 
    "Values": [ 
    "75", 
    "79", 
    "83" 
    ] 
}, 
{ 
    "Header": "Column2", 
    "Values": [ 
    "77", 
    "81", 
    "86", 
    "90" 
    ] 
}, 
{ 
    "Header": "Column3", 
    "Values": [ 
    "98", 
    "117" 
    ] 
} 
] 

我要顯示在下面的表格式

|Column1|Column2|Column3| 
------------------------- 
| 75 | 77 | 98 | 
| 79 | 81 | 117 | 
| 83 | 86 |  | 
| | 90 |  | 

會是怎樣實現它的最佳方式這個數據？

Answer 1

您可以首先獲取表格的標題，並在迭代列名稱時，可以收集每個數據數組的長度並獲取其最大長度，以便稍後迭代td元素。

var data = [{ Header: "Column1", Values: ["75", "79", "83"] }, { Header: "Column2", Values: ["77", "81", "86", "90"] }, { Header: "Column3", Values: ["98", "117"] }], 
 
    table = document.createElement('table'), 
 
    tr = document.createElement('tr'), 
 
    rows = [], 
 
    max = 0, 
 
    i; 
 

 
table.appendChild(tr); 
 
data.forEach(function (o) { 
 
    var th = document.createElement('th'); 
 
    th.appendChild(document.createTextNode(o.Header)); 
 
    tr.appendChild(th); 
 
    max = Math.max(max, o.Values.length); 
 
}); 
 
for (i = 0; i < max; i++) { 
 
    tr = document.createElement('tr'),   
 
    table.appendChild(tr); 
 
    data.forEach(function (o) { 
 
     var td = document.createElement('td'); 
 
     tr.appendChild(td); 
 
     td.appendChild(document.createTextNode(i in o.Values ? o.Values[i] : '')); 
 
    }); 
 
} 
 
document.body.appendChild(table);

Answer 2

循環遍歷對象數組以創建表的第一行（標題）。

然後再次爲您的表的每一行循環，並且每次只訪問每個值的第一個元素數組。您可以使用var nb = theArray.shift()來實現該目標。這將刪除數組的第一個元素。所以，如果它返回的東西，這是你想添加到你的表格行，否則什麼都沒有。當所有的數組都是空的，你就完成了。

但請記住shift()將從數組中刪除值（您稱爲JSON）。所以你可能想先執行一個拷貝（見slice()）。

Answer 3

你將不得不使用DOM方法和嵌套for循環來實現這一點。

var tableJSON = [ 
 
{ 
 
    "Header": "Column1", 
 
    "Values": [ 
 
    "75", 
 
    "79", 
 
    "83" 
 
    ] 
 
}, 
 
{ 
 
    "Header": "Column2", 
 
    "Values": [ 
 
    "77", 
 
    "81", 
 
    "86", 
 
    "90" 
 
    ] 
 
}, 
 
{ 
 
    "Header": "Column3", 
 
    "Values": [ 
 
    "98", 
 
    "117" 
 
    ] 
 
} 
 
]; 
 

 
var tableDiv = document.createElement("table"); 
 
var trElement = document.createElement("tr"); 
 
tableDiv.appendChild(trElement); 
 

 
var prDiv = document.getElementById("pr"); 
 
tableJSON.forEach(function(a_column, index){ 
 
if(a_column.Header) 
 
\t { 
 
    var tdElement = document.createElement("td"); 
 
    tdElement.innerHTML = "<b>" + a_column.Header + "</b>"; 
 
    trElement.appendChild(tdElement); 
 
    } 
 
    if(a_column.Values){ 
 
    var allRows = tableDiv.childNodes; 
 
    
 
    for(var i=0 ;i< a_column.Values.length; i++) 
 
    { 
 
    var rowWanted = allRows[i+1]; 
 
    if(!rowWanted) 
 
    { 
 
    \t rowWanted = document.createElement("tr"); 
 
    \t tableDiv.appendChild(rowWanted); 
 
    } 
 
    if(rowWanted.childNodes.length==0) 
 
    \t for(var j=0; j< tableJSON.length; j++){ 
 
    rowWanted.appendChild(document.createElement("td")); 
 
    } 
 
    
 
    rowWanted.childNodes[ index ].innerHTML = a_column.Values[i]; 
 
    } 
 
} 
 
}); 
 
prDiv.appendChild(tableDiv);

<div id="pr"> 
 

 

 
</div>

Answer 4

試試這個代碼！這將幫助您生成您需要的輸出。

<div id="tables"> 

</div> 
<script type="application/javascript"> 

    var jsonStr = '[{"Header": "Column1","Values": ["75","79","83"]},{"Header": "Column2","Values": ["77","81","86","90"]},{"Header": "Column3","Values": ["98","117"]}]'; 
    var parsJson = JSON.parse(jsonStr); 
    var output = ''; 
    for (var i = 0; i < parsJson.length; i++) { 
     output += '<table border="1" style="float:left"><tr><td>' + parsJson[i]['Header'] + '</td></tr>'; 
     for (var j = 0; j < parsJson[i]['Values'].length; j++) { 
      output += '<tr><td>' + parsJson[i]['Values'][j] + '</td></tr>'; 
     } 
     output += '</table>'; 
     console.log(output); 
     document.getElementById('tables').innerHTML = output; 
    } 
</script> 

Answer 5

這是你可以啓動它。 1.遍歷數據並收集標題， 在這裏爲th製作HTML。

2.遍歷數據並收集行條目，使這裏的HTML爲tr。

代碼：

var data = [{ 
     "Header": "Column1", 
     "Values": [ 
      "75", 
      "79", 
      "83" 
     ] 
    }, { 
     "Header": "Column2", 
     "Values": [ 
      "77", 
      "81", 
      "86", 
      "90" 
     ] 
    }, { 
     "Header": "Column3", 
     "Values": [ 
      "98", 
      "117" 
     ] 
    }]; 

    var table_headers = "<tr>"; 
    for(var i=0;i<data.length;i++){ 
     table_headers = table_headers + "<td>" + data[i].Header + "</td>"; 
    } 
    trs = trs + "</tr>"; 

    var table = document.createElement('table'); 
    table.innerHTML = table_headers; 

現在你已經準備好類似的迭代，並收集數據和整個表追加到HTML的身體頭。

這是我能想到的一種方式。看看這是否有幫助。

注意：在發佈之前搜索一下類似的問題，可能會有一些想法可以將您帶入您的解決方案。 :)