如何在不使用变量的情况下将json文件数据转换为html表？
[英]How to convert json file data to html table without using the variable?
问题描述
My json file now stores data from html form in this format.
我的 json 文件现在以这种格式存储来自 html 表单的数据。 this data will update as a new person fills the html form.此数据将随着新人填写 html 表单而更新。
{
"name": "donald",
"age": "34",
"gender": "male",
"email": "e@m.l",
}
im trying to call it to form it into html table but i dont know how to call it.我试图调用它以将其形成为 html 表，但我不知道如何调用它。 As far as ive googled, almost all the website gives hardcoded json file with 'var member = ' at the beginning, for example.就我用谷歌搜索而言，几乎所有网站都提供了开头带有“var member =”的硬编码json文件，例如。
2 个解决方案
解决方案1
1 已采纳 2018-09-17 03:51:18
If you have a json file, you may use $.getJSON to get this and append the object to table.如果你有一个 json 文件，你可以使用$.getJSON来获取它并将对象附加到表中。 This is a very simple example for your reference:这是一个非常简单的例子供您参考：
$.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>
解决方案2
0 2018-09-17 03:54:55
Try this Code.试试这个代码。 You Must push the JSON data into the HTML using Loop您必须使用 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 already have json data. col已经有 json 数据。 So i can append the data into the table所以我可以将数据附加到表中
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.