Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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

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

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.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
json ,html ,igniteui ,javascript

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

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}