使用JavaScript將html與表標簽轉換為JSON

Question

我正在嘗試將SQL Query的輸出轉換為表格。 我已將表轉換為JSON。 現在，我正在將JSON轉換為HTML表，以便可以將其用於報告。

腳本如下

 var value = '{"root":{"row":[{"DatabaseID":"21","fileid":"1","databaseName":"AutomationPortal","FileLogicalName":"AutomationPortal","FileFullPath":"D:\\\\\\\\MSSQL13.MSSQLSERVER\\\\\\\\MSSQL\\\\\\\\DATA\\\\\\\\AutomationPortal.mdf","FileSizeMB":"100.00","SpaceUsedMB":"10.25","MaxfileSizeMB":"-0.01","SPaceOnVolumeMB":"95110.38","AutogrowSetting":"8192"},{"DatabaseID":"21","fileid":"3","databaseName":"AutomationPortal","FileLogicalName":"AutomatioPortal_01","FileFullPath":"D:\\\\\\\\MSSQL13.MSSQLSERVER\\\\\\\\MSSQL\\\\\\\\DATA\\\\\\\\AutomatioPortal_01.ndf","FileSizeMB":"100.00","SpaceUsedMB":"0.06","MaxfileSizeMB":"130.00","SPaceOnVolumeMB":"95110.38","AutogrowSetting":"8192"}]}}' var data = JSON.parse(value); var tablearray = []; tablearray.push("<table><tr>") var queryRow = data.root.row.length; var headerProperty = Object.keys(data.root.row[0]); for (i=0;i<headerProperty.length;i++){ tablearray.push("<th>"+headerProperty[i]+"</th>"); } tablearray.push("</tr>"); //console.log(tablearray); for (i=0;i<queryRow;i++){ tablearray.push("<tr>") for (j=0;j<headerProperty.length;j++){ // console.log(headerProperty[j]); // console.log(data.root.row[0].DatabaseID); // console.log(data.root.row[i].headerProperty[j]); tablearray.push("<td>"+data.root.row[i].headerProperty[j]+"</td>"); } tablearray.push("</tr>"); } tablearray.push("</table>"); tablearray.join(''); 

當我運行上面的腳本時，它給我以下錯誤，我無法解決此問題。

tablearray.push（“” + data.root.row [i] .headerProperty [j] +“”）; ^

TypeError：無法讀取對象上未定義的屬性“ 0”。 （C：\\ Users \\ convertjsontohtml.js：21：55）在Object.Module._extensions..js（internal / modules / cjs / loader）的Module._compile（internal / modules / cjs / loader.js：678：30） .js：689：10）位於Function.Module._load的tryModuleLoad（內部/模塊/cjs/loader.js:528:12）的Module.load（內部/模塊/cjs/loader.js:589:32）（內部/模塊/cjs/loader.js:520:3）在啟動時（內部/bootstrap/node.js:228:19）在Function.Module.runMain（內部/模塊/cjs/loader.js:719:10）在bootstrapNodeJSCore（內部/引導/node.js:575:3）

我期望的輸出像“”

Answer 1

您可以通過循環考慮每個值來構建表，如下所示：

 const input = '{"root":{"row":[{"DatabaseID":"21","fileid":"1","databaseName":"AutomationPortal","FileLogicalName":"AutomationPortal","FileFullPath":"D:\\\\\\\\MSSQL13.MSSQLSERVER\\\\\\\\MSSQL\\\\\\\\DATA\\\\\\\\AutomationPortal.mdf","FileSizeMB":"100.00","SpaceUsedMB":"10.25","MaxfileSizeMB":"-0.01","SPaceOnVolumeMB":"95110.38","AutogrowSetting":"8192"},{"DatabaseID":"21","fileid":"3","databaseName":"AutomationPortal","FileLogicalName":"AutomatioPortal_01","FileFullPath":"D:\\\\\\\\MSSQL13.MSSQLSERVER\\\\\\\\MSSQL\\\\\\\\DATA\\\\\\\\AutomatioPortal_01.ndf","FileSizeMB":"100.00","SpaceUsedMB":"0.06","MaxfileSizeMB":"130.00","SPaceOnVolumeMB":"95110.38","AutogrowSetting":"8192"}]}}'; // Parse given JSON const parsed = JSON.parse(input); // Get keys (=cells) of each items const keys = Object.keys(parsed.root.row[0]); // Build the table header const header = `<thead><tr>` + keys .map(key => `<th>${key}</th>`) .join('') + `</thead></tr>`; // Build the table body const body = `<tbody>` + parsed.root.row .map(row => `<tr>${Object.values(row) .map(cell => `<td>${cell}</td>`) .join('')}</tr>` ).join(''); // Build the final table const table = ` <table> ${header} ${body} </table> `; // Append the result into #root element document.getElementById('root').innerHTML = table; 

 <div id="root"></div> 

Answer 2

data.root.row [0]內部沒有headerProperty

Answer 3

您可能不希望使用字符串來使用document.createElement創建元素

 const value = '{"root":{"row":[{"DatabaseID":"21","fileid":"1","databaseName":"AutomationPortal","FileLogicalName":"AutomationPortal","FileFullPath":"D:\\\\\\\\MSSQL13.MSSQLSERVER\\\\\\\\MSSQL\\\\\\\\DATA\\\\\\\\AutomationPortal.mdf","FileSizeMB":"100.00","SpaceUsedMB":"10.25","MaxfileSizeMB":"-0.01","SPaceOnVolumeMB":"95110.38","AutogrowSetting":"8192"},{"DatabaseID":"21","fileid":"3","databaseName":"AutomationPortal","FileLogicalName":"AutomatioPortal_01","FileFullPath":"D:\\\\\\\\MSSQL13.MSSQLSERVER\\\\\\\\MSSQL\\\\\\\\DATA\\\\\\\\AutomatioPortal_01.ndf","FileSizeMB":"100.00","SpaceUsedMB":"0.06","MaxfileSizeMB":"130.00","SPaceOnVolumeMB":"95110.38","AutogrowSetting":"8192"}]}}' const data = JSON.parse(value); console.log(data); const $table = document.createElement('table'); const $head = document.createElement('thead'); const $body = document.createElement('tbody'); for (let i = 0; i < data.root.row.length; i++) { const $tr = document.createElement('tr'); Object.keys(data.root.row[0]).forEach((colName) => { if (i === 0) { const $th = document.createElement('th'); $th.innerText = colName; $head.appendChild($th); } const $td = document.createElement('td'); $td.innerText = data.root.row[0][colName]; $tr.appendChild($td); }); $body.appendChild($tr); } $table.appendChild($head); $table.appendChild($body); document.getElementById('table').appendChild($table); 

 <div id="table"></div> 

Answer 4

問題是您的row沒有名為“ headerProperty”的屬性。 我認為您想使用headerProperty[j]的值作為動態屬性名稱？

為此，您必須使用“括號表示法”編寫屬性訪問器-這允許您在運行時使用任何字符串值作為屬性名稱：

data.root.row[i][propertyHeader[j]]

有關更多信息，請參見https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors 。

演示-我希望現在可以輸出您期望的結果：

 var value = '{"root":{"row":[{"DatabaseID":"21","fileid":"1","databaseName":"AutomationPortal","FileLogicalName":"AutomationPortal","FileFullPath":"D:\\\\\\\\MSSQL13.MSSQLSERVER\\\\\\\\MSSQL\\\\\\\\DATA\\\\\\\\AutomationPortal.mdf","FileSizeMB":"100.00","SpaceUsedMB":"10.25","MaxfileSizeMB":"-0.01","SPaceOnVolumeMB":"95110.38","AutogrowSetting":"8192"},{"DatabaseID":"21","fileid":"3","databaseName":"AutomationPortal","FileLogicalName":"AutomatioPortal_01","FileFullPath":"D:\\\\\\\\MSSQL13.MSSQLSERVER\\\\\\\\MSSQL\\\\\\\\DATA\\\\\\\\AutomatioPortal_01.ndf","FileSizeMB":"100.00","SpaceUsedMB":"0.06","MaxfileSizeMB":"130.00","SPaceOnVolumeMB":"95110.38","AutogrowSetting":"8192"}]}}' var data = JSON.parse(value); var tablearray = []; tablearray.push("<table><tr>") var queryRow = data.root.row.length; var headerProperty = Object.keys(data.root.row[0]); for (i = 0; i < headerProperty.length; i++) { tablearray.push("<th>" + headerProperty[i] + "</th>"); } tablearray.push("</tr>"); //console.log(tablearray); for (i = 0; i < queryRow; i++) { tablearray.push("<tr>") for (j = 0; j < headerProperty.length; j++) { // console.log(headerProperty[j]); // console.log(data.root.row[0].DatabaseID); // console.log(data.root.row[i].headerProperty[j]); tablearray.push("<td>" + data.root.row[i][headerProperty[j]] + "</td>"); } tablearray.push("</tr>"); } tablearray.push("</table>"); document.write(tablearray.join(''));