Bind JSON to HTML table using the Ignite UI data source in three simple steps

IgniteUI DataSorce or igDataSource is a component of the Ignite UI framework. It binds various UI components to the data of the various forms like JSON, XML etc.

Step 1: Creating the Data

Let us say you have a JSON data as shown in the listing below:

 var populationData = [
    { "CountryName": "China", "1995": 1216, "2005": 1297, "2015": 1361, "2025": 1394 },
    { "CountryName": "India", "1995": 920, "2005": 1090, "2015": 1251, "2025": 1396 },
    { "CountryName": "United States", "1995": 266, "2005": 295, "2015": 322, "2025": 351 },
    { "CountryName": "Indonesia", "1995": 197, "2005": 229, "2015": 256, "2025": 277 },
    { "CountryName": "Brazil", "1995": 161, "2005": 186, "2015": 204, "2025": 218 }
    ];

Data could be in the following form,

• Plain JavaScript array
• JSON object
• XML

In real projects data will be pulled in the system from the remote services. Remote service could be WCF, REST or Web API.

Step 2: Create the render function

Let us say we have a requirement to render the data in a HTML table. We have created a HTML table as shown in the listing below:

<table id="t1">
        <thead>
            <tr>
                <th>Name<th>
                <th>1995<th>
                <th>2005<th>
                <th>2015<th>
                <th>2025<th>
            <//tr>
        <thead>
        <tbody><tbody>
<//table>

Next to render the table we need to,

• Create template using the jQuery template. In the template we are using the column name from the key of the JSON data.
• Attach the template to HTML table
• Create data view on the data source and attach to the HTML table

Render table function can be written as shown in the listing below:

var renderTable = function (success, error) {
     
        var template = "${CountryName}${1995}${2005}${2015}${2025}";
        if (success) {
            $("#t1 tbody").empty();
            $($.ig.tmpl(template, ds.dataView())).appendTo("#t1 tbody");
        } else {
            alert(error);
        }
    } 

Step 3: Create the igDataSource

In the last step we need to create the data source from the JSON data. In Ignite UI, igDataSource connects the data and the view. igDataSource can be created as shown the listing below:

var ds = new $.ig.DataSource({
        type: "json",
        dataSource: populationData,
        callback: renderTable
    });
    ds.dataBind();

We need to set the value for the datasource and the callback properties. Datasource property is set to the JOSN array and callback property is set to the renderTable function. In the renderTable function we are creating the template and rendering the table.

Running the application

On running the application, we will get JSON data rendered in the HTML table using the igDataSource. Rendered table should look as shown in the image below:

I hope you find this post useful. Thanks for reading.