Recently I’m working on a project where I need to create an HTML form JSON data then first I thought Is there any jQuery or javascript plugin that I can use to create an HTML table based on JSON data?
I don’t want to define the table columns, the i just need the library that reads the keys in the JSON data and generates columns for the table. So I decided to write my own logic, we can do this task using multiple ways.

If you are a beginner in coding and currently you are trying to take the information from  JSON file and create a table in HTML and then don’t worry, we will do this job in this post.

How to convert JSON with html table tag using JavaScript

I have rewritten the below code -using vanilla js and using DOM methods to prevent HTML injection for security.

Using vanilla js and using DOM methods

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <div id="divcontent"></div>
    </div>

    <script type="text/javascript">
        var jsondata = [
            {
                "id": 84,
                "tourist_name": "Ammy",
                "tourist_email": "ammy123@gmail.com",
                "tourist_location": "USA",
                "createdat": "2020-06-02T05:08:58.672851"
            },
            {
                "id": 85,
                "tourist_name": "shreya",
                "tourist_email": "shreya.kumari4994@gmail.com",
                "tourist_location": "India",
                "createdat": "2020-06-02T05:14:40.7655781"
            },
            {
                "id": 86,
                "tourist_name": "Jenny",
                "tourist_email": "Jenny96@gmail.com",
                "tourist_location": "India",
                "createdat": "2020-06-02T05:18:22.7652253"
            },
            {
                "id": 87,
                "tourist_name": "Apolo",
                "tourist_email": "chandanjaishawal@gmail.com",
                "tourist_location": "India",
                "createdat": "2020-06-02T12:56:51.9287121"
            },
            {
                "id": 88,
                "tourist_name": "Ajay Nagar",
                "tourist_email": "aj222@gmail.com",
                "tourist_location": "India",
                "createdat": "2020-06-04T08:48:53.8471058"
            },
            {
                "id": 89,
                "tourist_name": "AP",
                "tourist_email": "ap.prak97@gmail.com",
                "tourist_location": "India",
                "createdat": "2020-06-08T15:58:26.3844855"
            },
            {
                "id": 90,
                "tourist_name": "Alexa uodate",
                "tourist_email": "alexathomas1975@gmail.com",
                "tourist_location": "10281 Mission Gorge Rd, Santee, CA 92071, USA",
                "createdat": "2020-06-09T14:04:12.9065286"
            },
            {
                "id": 91,
                "tourist_name": "Jennifer Mathis",
                "tourist_email": "jennifermathis.89904@gmail.com",
                "tourist_location": "USA",
                "createdat": "2020-06-10T17:12:53.4353615"
            },
            {
                "id": 92,
                "tourist_name": "_Anand_",
                "tourist_email": "ap.prak101@gmail.com",
                "tourist_location": "Canada",
                "createdat": "2020-06-11T05:55:13.7406625"
            },
            {
                "id": 93,
                "tourist_name": "Mark",
                "tourist_email": "Mark.prak102@gmail.com",
                "tourist_location": "France",
                "createdat": "2020-06-11T06:07:06.939638"
            }
        ]
        var tableElement = document.createElement('table');
        tableElement.classList.add("table");
        tableElement.classList.add("table-striped");

        var tbltr = document.createElement('tr');
        var tblth = document.createElement('th');
        var tbltd = document.createElement('td');

        // Builds the HTML Table out of myList json data from Ivy restful service.
        function CreateHtmlTableFromJson(JsonArray) {
            var table = tableElement.cloneNode(false),
                columns = CreateTableHeaders(JsonArray, table);
            for (var i = 0, maxi = JsonArray.length; i < maxi; ++i) {
                var tr = tbltr.cloneNode(false);
                for (var j = 0, maxj = columns.length; j < maxj; ++j) {
                    var td = tbltd.cloneNode(false);
                    cellValue = JsonArray[i][columns[j]];
                    td.appendChild(document.createTextNode(JsonArray[i][columns[j]] || ''));
                    tr.appendChild(td);
                }
                table.appendChild(tr);
            }
            return table;
        }

        // In below code we are Adding header row to the html table and returns the columns.
        function CreateTableHeaders(jsonarray, table) {
            var columnSet = [],
                tr = tbltr.cloneNode(false);
            for (var i = 0, l = jsonarray.length; i < l; i++) {
                for (var key in jsonarray[i]) {
                    if (jsonarray[i].hasOwnProperty(key) && columnSet.indexOf(key) === -1) {
                        columnSet.push(key);
                        var th = tblth.cloneNode(false);
                        th.appendChild(document.createTextNode(key));
                        tr.appendChild(th);
                    }
                }
            }
            table.appendChild(tr);
            return columnSet;
        }
        var datacontainer = document.getElementById("divcontent");
        datacontainer.innerHTML = "";
        datacontainer.appendChild(CreateHtmlTableFromJson(jsondata));
    </script>
</body>
</html>

Convert JSON data to HTML table using JavaScript

Method 2:Convert json data to a html table using Jquery

Here I’m using jquery loop through all the json data to make a table using jQuery.

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
    <div id="divresult"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
    <script type="text/javascript">
        var jsondata = [
            {
                "id": 84,
                "tourist_name": "Ammy",
                "tourist_email": "ammy123@gmail.com",
                "tourist_location": "USA",
                "createdat": "2020-06-02T05:08:58.672851"
            },
            {
                "id": 85,
                "tourist_name": "shreya",
                "tourist_email": "shreya.kumari4994@gmail.com",
                "tourist_location": "India",
                "createdat": "2020-06-02T05:14:40.7655781"
            },
            {
                "id": 86,
                "tourist_name": "Jenny",
                "tourist_email": "Jenny96@gmail.com",
                "tourist_location": "India",
                "createdat": "2020-06-02T05:18:22.7652253"
            },
            {
                "id": 87,
                "tourist_name": "Apolo",
                "tourist_email": "chandanjaishawal@gmail.com",
                "tourist_location": "India",
                "createdat": "2020-06-02T12:56:51.9287121"
            },
            {
                "id": 88,
                "tourist_name": "Ajay Nagar",
                "tourist_email": "aj222@gmail.com",
                "tourist_location": "India",
                "createdat": "2020-06-04T08:48:53.8471058"
            },
            {
                "id": 89,
                "tourist_name": "AP",
                "tourist_email": "ap.prak97@gmail.com",
                "tourist_location": "India",
                "createdat": "2020-06-08T15:58:26.3844855"
            },
            {
                "id": 90,
                "tourist_name": "Alexa uodate",
                "tourist_email": "alexathomas1975@gmail.com",
                "tourist_location": "10281 Mission Gorge Rd, Santee, CA 92071, USA",
                "createdat": "2020-06-09T14:04:12.9065286"
            },
            {
                "id": 91,
                "tourist_name": "Jennifer Mathis",
                "tourist_email": "jennifermathis.89904@gmail.com",
                "tourist_location": "USA",
                "createdat": "2020-06-10T17:12:53.4353615"
            },
            {
                "id": 92,
                "tourist_name": "_Anand_",
                "tourist_email": "ap.prak101@gmail.com",
                "tourist_location": "Canada",
                "createdat": "2020-06-11T05:55:13.7406625"
            },
            {
                "id": 93,
                "tourist_name": "Mark",
                "tourist_email": "Mark.prak102@gmail.com",
                "tourist_location": "France",
                "createdat": "2020-06-11T06:07:06.939638"
            }
        ]
        $(document).ready(function () {
            var html = '<table class="table table-striped">';
            html += '<tr>';
            debugger;
            //creating table header
            $.each(jsondata[0], function (index, item) {
                html += '<th>' + index + '</th>';
            });
            html += '</tr>';
            //creating table row and appending it in the table
            $.each(jsondata, function (index, item) {
                html += '<tr>';
                $.each(item, function (secondindex, seconditem) {
                    html += '<td>' + seconditem + '</td>';
                });
                html += '<tr>';
            });
            html += '</table>';
            //append html in html body
            $('body').html(html);
        });
    </script>
</body>
</html>

*Thank you so much if you have a question please comment

JSON is a simple text based open standard data interchange format. It is completely independent language and most of it can be used with modern programming languages.

While Ajax applications commonly use JSON, Ajax is technically “Asynchronous JavaScript and XML.”
The full form of JSON is “JavaScript Object Notation” and it is pronounced “Jason.” It is most commonly used to transfer data between web applications and web servers.
While Ajax applications commonly use JSON, Ajax is technically “Asynchronous JavaScript and XML.”
JSON is a text-based data interchange format that is designed for the transmitting of structured data.

The full form of JSON is “JavaScript Object Notation” and it is pronounced “Jason.” It is most commonly used to transfer data between web applications and web servers.

JSON has many advantages over XML although XML serves only one purpose.

JSON files are saved with .json extension. Internet Media Type of JSON “application/json”.

The post Convert JSON data to HTML table using JavaScript appeared first on Software Development | Programming Tutorials.



Read More Articles