How to fetch data from JSON file and display in HTML table using jQuery ?

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <title>GFG User Details</title>
  
    <!-- INCLUDING JQUERY-->
    <script src=
    </script>
  
    <!-- CSS FOR STYLING THE PAGE -->
    <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 CONSTRUCTION-->
        <table id='table'>
            <!-- HEADING FORMATION -->
            <tr>
                <th>GFG UserHandle</th>
                <th>Practice Problems</th>
                <th>Coding Score</th>
                <th>GFG Articles</th>
            </tr>
  
            <script>
                $(document).ready(function () {
  
                    // FETCHING DATA FROM JSON FILE
                    $.getJSON("gfgdetails.json", 
                            function (data) {
                        var student = '';
  
                        // ITERATING THROUGH OBJECTS
                        $.each(data, function (key, value) {
  
                            //CONSTRUCTION OF ROWS HAVING
                            // DATA FROM JSON OBJECT
                            student += '<tr>';
                            student += '<td>' + 
                                value.GFGUserName + '</td>';
  
                            student += '<td>' + 
                                value.NoOfProblems + '</td>';
  
                            student += '<td>' + 
                                value.TotalScore + '</td>';
  
                            student += '<td>' + 
                                value.Articles + '</td>';
  
                            student += '</tr>';
                        });
                          
                        //INSERTING ROWS INTO TABLE 
                        $('#table').append(student);
                    });
                });
            </script>
    </section>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.