如何在不使用变量的情况下将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