Bind JSON to HTML Table Using the Ignite UI Data Source in 3 Simple Steps

DZone 's Guide to

Bind JSON to HTML Table Using the Ignite UI Data Source in 3 Simple Steps

People always ask: Can you show me the data? This makes it a little easier.

· Web Dev Zone ·
Free Resource

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's 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 services could be WCF, REST, or Web API.

Step 2: Create the Render Function

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

<table id="t1">

Next, to render the table, we need to:

  • Create a 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 it to the HTML table.

The render table function can be written as shown 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 {

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 below:

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

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

Running the Application

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

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

html, igniteui, javascript, json

Published at DZone with permission of Dhananjay Kumar . See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}