How to Display JSON Data in an HTML Table Using jQuery?

Last Updated : 05 Jul, 2025

The task is to fetch data from the given JSON file and convert data into an HTML table.

Approach:

We have a JSON file containing data in the form of an array of objects. In our code, we are using jQuery to complete our task. The jQuery code uses getJSON() method to fetch the data from the file's location using an AJAX HTTP GET request. It takes two arguments. One is the location of the JSON file and the other is the function containing the JSON data.

The each() function is used to iterate through all the objects in the array. It also takes two arguments. One is the data and the other one is the function containing the index and the element. An empty string is used to construct rows that contain the data from the JSON objects. The append() method is used to append the string containing rows in the table.

JSON file:

Example: Create a basic HTML structure and include jQuery, then load the JSON from the file

HTML

<html>
<head>
    <script src=
"https://code.jquery.com/jquery-3.5.1.js">
    </script>
    <style>
        table {
            margin: 0 auto;
            font-size: large;
            border: 1px solid black;
        }

        h1 {
            text-align: center;
            color: #006600;
            font-size: xx-large;
            font-family: 'Gill Sans', 
                'Gill Sans MT', ' Calibri', 
                'Trebuchet MS', 'sans-serif';
        }

        td {
            background-color: #E4F5D4;
            border: 1px solid black;
        }

        th,
        td {
            font-weight: bold;
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }

        td {
            font-weight: lighter;
        }
    </style>
</head>

<body>
    <section>
        <h1>GeeksForGeeks</h1>
        <table id='table'>
            <tr>
                <th>GFG UserHandle</th>
                <th>Practice Problems</th>
                <th>Coding Score</th>
                <th>GFG Articles</th>
            </tr>

            <script>
                $(document).ready(function () {
                    $.getJSON("gfgdetails.json", 
                            function (data) {
                        var student = '';
                        $.each(data, function (key, value) {
                            student += '<tr>';
                            student += '<td>' + 
                                value.GFGUserName + '</td>';

                            student += '<td>' + 
                                value.NoOfProblems + '</td>';

                            student += '<td>' + 
                                value.TotalScore + '</td>';

                            student += '<td>' + 
                                value.Articles + '</td>';

                            student += '</tr>';
                        });
                        
                        $('#table').append(student);
                    });
                });
            </script>
    </section>
</body>
</html>

Output:

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it's philosophy of “Write less, do more".
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.

How create table without using

How to Display JSON Data in an HTML Table Using jQuery?

Similar Reads

Thank You!

What kind of Experience do you want to share?