How to convert json file data to html table without using the variable?
Question
My json file now stores data from html form in this format. this data will update as a new person fills the html form.
{
"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. As far as ive googled, almost all the website gives hardcoded json file with 'var member = ' at the beginning, for example.
2 answers
solution1
1 ACCPTED 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. 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>
solution2
0 2018-09-17 03:54:55
Try this Code. You Must push the JSON data into the HTML using Loop
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. 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.