如何在不使用變量的情況下將json文件數據轉換為html表？

Question

我的 json 文件現在以這種格式存儲來自 html 表單的數據。 此數據將隨着新人填寫 html 表單而更新。

{
"name": "donald",
"age": "34",
"gender": "male",
"email": "e@m.l",
 }

我試圖調用它以將其形成為 html 表，但我不知道如何調用它。 就我用谷歌搜索而言，幾乎所有網站都提供了開頭帶有“var member =”的硬編碼json文件，例如。

Answer 1

如果你有一個 json 文件，你可以使用$.getJSON來獲取它並將對象附加到表中。 這是一個非常簡單的例子供您參考：

 $.getJSON('https://jsonplaceholder.typicode.com/users', function(data) { data.forEach(function (r) { var html = '<tr>' + '<td>'+r.id+'</td>' + '<td>'+r.name+'</td>' + '<td>'+r.username+'</td>' + '<td>'+r.email+'</td>' + '</tr>'; $('table tbody').append(html); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <thead> <tr> <th>UID</th> <th>Name</th> <th>Username</th> <th>Email</th> </tr> </thead> <tbody></tbody> </table>

Answer 2

試試這個代碼。 您必須使用 Loop 將JSON 數據推送到HTML中

 for (var i = 0; i < col.length; i++) {
                var th = document.createElement("th");      // TABLE HEADER.
                th.innerHTML = col[i];
                tr.appendChild(th);
            }

col已經有 json 數據。 所以我可以將數據附加到表中

 <!DOCTYPE html> <html> <head> <title>Convert JSON Data to HTML Table</title> <style> table, th, td { margin:10px 0; border:solid 1px #333; padding:2px 4px; font:15px Verdana; } th { font-weight:bold; } </style> </head> <body> <input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" /> <div id="showData"></div> </body> <script> function CreateTableFromJSON() { var myBooks = [ { "Book ID": "1", "Book Name": "Computer Architecture", "Category": "Computers", "Price": "125.60" }, { "Book ID": "2", "Book Name": "Asp.Net 4 Blue Book", "Category": "Programming", "Price": "56.00" }, { "Book ID": "3", "Book Name": "Popular Science", "Category": "Science", "Price": "210.40" } ] // EXTRACT VALUE FOR HTML HEADER. // ('Book ID', 'Book Name', 'Category' and 'Price') var col = []; for (var i = 0; i < myBooks.length; i++) { for (var key in myBooks[i]) { if (col.indexOf(key) === -1) { col.push(key); } } } // CREATE DYNAMIC TABLE. var table = document.createElement("table"); // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE. var tr = table.insertRow(-1); // TABLE ROW. for (var i = 0; i < col.length; i++) { var th = document.createElement("th"); // TABLE HEADER. th.innerHTML = col[i]; tr.appendChild(th); } // ADD JSON DATA TO THE TABLE AS ROWS. for (var i = 0; i < myBooks.length; i++) { tr = table.insertRow(-1); for (var j = 0; j < col.length; j++) { var tabCell = tr.insertCell(-1); tabCell.innerHTML = myBooks[i][col[j]]; } } // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER. var divContainer = document.getElementById("showData"); divContainer.innerHTML = ""; divContainer.appendChild(table); } </script> </html>

如何在不使用變量的情況下將json文件數據轉換為html表？

問題描述

2 個解決方案

解決方案1
1 已采納 2018-09-17 03:51:18

解決方案2
0 2018-09-17 03:54:55

如何在不使用變量的情況下將json文件數據轉換為html表？

問題描述

2 個解決方案

解決方案1 1 已采納 2018-09-17 03:51:18

解決方案2 0 2018-09-17 03:54:55

解決方案1
1 已采納 2018-09-17 03:51:18

解決方案2
0 2018-09-17 03:54:55