How to Populate JSON results in Html table

Introduction:

In this article I am going to explain how to populate JSON data to table using Javascript.

Description:

Here we are going to use a Bootstrap Table plugin to load the data from Json to table. This is an easy option to load the data because parsing of Json is handled internally.

Prerequisites:

You need to add the necessary JQuery and bootstrap files to your page prior to use this plugin. In this example I have used the online JQuery and Bootstrap CDN files available. If you don’t want to use the online available cdn file then you can manually add the jquery and Bootstrap files to your solution.

Implementation:

First we will design the table according to the column in Json. Main point to note is to set the data-toggle attribute properly.

 <table id="table">
            <thead>
                <tr>
                    <th data-field="id">ID</th>
                    <th data-field="Name">Name</th>
                    <th data-field="Address">Address</th>
                </tr>
            </thead>
        </table>

Now you can use the below code to assign the  Json data to a table.

  $('#table').bootstrapTable({
                //Assigning data to table
                data: jsondata
            });

Complete Code

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function () {
            //Sample Json data
            var jsondata = [
                {
                    "id": "1",
                    "Name": "Name1",
                    "Address": "Address1"
                },
                {
                    "id": "2",
                    "Name": "Name2",
                    "Address": "Address2"
                },
                {
                    "id": "3",
                    "Name": "Name3",
                    "Address": "Address3"
                },
                {
                    "id": "4",
                    "Name": "Name4",
                    "Address": "Address4"
                },
                {
                    "id": "5",
                    "Name": "Name5",
                    "Address": "Address5"
                }];

            $('#table').bootstrapTable({
                //Assigning data to table
                data: jsondata
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <table id="table">
            <thead>
                <tr>
                    <th data-field="id">ID</th>
                    <th data-field="Name">Name</th>
                    <th data-field="Address">Address</th>
                </tr>
            </thead>
        </table>
    </form>
</body>
</html>

Advertisements

, , , , ,

  1. #1 by Gluta Lachel Original on February 22, 2017 - 10:38 pm

    I go to see day-to-day a few web sites and blogs to read
    articles, however this weblog presents feature based content.

    Liked by 1 person

    • #2 by A2H on February 23, 2017 - 2:05 am

      Thank you for your kind words

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: