How to convert json file data to html table without using the variable?

454 views php
6

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.

answered question

So what you want to do is put the json file to the html table?

yes. and my json file will always update so i need to call it using 'name', 'age', 'gender' and so on.

How does the data update? I assume that you're simply querying a database or something from PHP? And when do you want to display the updated data? Is a page reload good enough? In that case you can do it server-side in PHP with a simple echo $json. If you need it to update as soon as the data updates, you'll need to poll it, and make use of AJAX.

2 Answers

0

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>

posted this
8

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>

posted this

Have an answer?

JD

Please login first before posting an answer.