Populate HTML Table with Json Data from Json File

Written by Amos Lai

Download the sample project – 342 kb


Hands
Amos Lai
17 May 2018

Populate HTML Table with Json Data from Json File

Simply display the Json data using HTML Table. It looks like simple Gridview dislpaying the data. The project will show you how to using $.getJson to read and retrieve data from Json file. As well as it shows you how to fix/space the wordings of the column's header if the header's wordings are sticked together without space and with Camel Case for instant : "HellowWorld" "Hello World".


Step 1

Create an empty website project (ASP.NET).

Step 2

We need to install JQuery to massage the Json data and display them in the Gridview. You can go to 'http://jquery.com/' and look for the version you and download it. If your Internet Explorer version 6 or 7, download JQuery version 1.x. Or else you can just download the latest version. after that, create a 'script' folder in your solution and place the Jquery file into this folder.

Hands

Step 3

In this demonstration, we will populate the Gridview with Json data from the json file. Create a folder called 'appdata' then add in a json file called 'students.json' into this folder as shown below.

Hands

Step 4

We need some data sample for this demonstration. Let's open the 'students.json' file and then copy the code below and paste it into this file. And save it.

                                
[
  {
    "Stid": 0,
    "Name": "James",
    "Gender": "Male",
    "LocalStudent": true
  },
  {
    "Stid": 1,
    "Name": "Jennifer",
    "Gender": "Female",
    "LocalStudent": false
  },
  {
    "Stid": 2,
    "Name": "Daniel",
    "Gender": "Male",
    "LocalStudent": false
  },
  {
    "Stid": 3,
    "Name": "Sabina",
    "Gender": "Female",
    "LocalStudent": true
  },
  {
    "Stid": 4,
    "Name": "Bryan",
    "Gender": "Male",
    "LocalStudent": true
  },
  {
    "Stid": 5,
    "Name": "Leah",
    "Gender": "Female",
    "LocalStudent": false
  }
]
                                
                            

Step 5

Create a 'Default.html' file in your solution. HTML file is good enough for this demonstration. We do not have to write anything at code-behind. This is just solely HTML and Javascript coding.

Step 6

Reference the JQuery you added just now in the <head> tag and add some style to decorate the table later.

                                
<head>
    <meta charset="utf-8" />

    <!--Referencing JQuery-->
    <script type="text/javascript" src="scripts/jquery-3.3.1.js"></script>

    <!--Create some styles to decorate the table-->
    <style>
    .TableStyle {
        border-collapse: collapse;
    }
    .TableStyle th, .TableStyle td {
        border: 1px solid black;
        padding: 5px;
    }
    .TableStyle th {
        background-color: silver;
    }
    </style>
</head>
                                
                            

Step 7

In the <body> tag, add an 'onload' attribute and call the function named 'PopulateTable()'. Besides that, create a table with an ID called 'gvStudent' and a class called 'TableStyle'.

                                
<body onload="PopulateTable()">

    <p>Populate HTML Table with Json data from Json file.</p>

    <!--Add Table tag with an ID called 'gvStudent'-->
    <table id="gvStudent" class="TableStyle">
    </table>

</body>
                                
                            

Step 8

Create a <script> tag and add in a method/function that will populate the table.

                                
<script type="text/javascript">

        //Create PopulateTable method to populate the table we created just now
        function PopulateTable() {

            //Retrieve the data from students.json file.
            $.getJSON('appdata/students.json', function (data) {

                //Get Columns Name from the 1st row of Json data.
                var firstrow = data[0];
                $('#gvStudent').append('<tbody><tr></tr></tbody>');
                for (var colName in firstrow) {
                    //Create header in HTML Table and fix the header wordings.
                    $('#gvStudent tr').append('<th>' + AutoFixHeaderSpace(colName) + '</th>');
                };

                //Loop through every row in Json data.
                for (var i = 0; i < data.length - 1; i++) {
                    $('#gvStudent tbody').append('<tr></tr>');
                    var row = data[i];
                    var lastTableRowIndex = $('#gvStudent tr').length - 1;
                    //Loop through every column in each row and insert the data into the table.
                    for (var colName in row) {
                        $('#gvStudent tr').eq(lastTableRowIndex).append('<td>' + row[colName] + '</td>');
                    }
                }
            });
        }

</script>
                                
                            

Step 9

Create method/function in the <script> tag called 'AutoFixHeaderSpace' with a parameter that accept any wordings. This method/function helps to space the header wordings that sticked with each other and with Camel Case (e.g: "HelloWorld" "Hello World").

                                
function AutoFixHeaderSpace(colName) {
    var result = "";
    if (colName.length > 0) {
        for (var i = colName.length - 1; i >= 0; i--) {
            result = colName.charAt(i) + result;
            if (colName.charAt(i) == colName.charAt(i).toUpperCase() && i !== 0) {
                result = " " + result;
            };
        }
    }
    return result;
}
                                
                            

Alright, let's try it out. Enjoy.

Author(s) Shoutout

Written by Amos Lai

Hi everyone, if you have any question, feel free to message me. If you like this article or would like me to extend more on the subject you can email me. Feedback is always appreciated. I will write more. If I get a two thumbs up. =)

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL).