Convert JSON data to HTML table

Question

0.00/5 (No votes)

See more:

Hi Guys i hope all are doing well!

Initially in c# method i am getting data from sql query like below

UserNumber 2015-01-01 2015-01-02 2015-01-03 ....
emp001 10am 11am 6pm ....
emp002 11am 10p 7pm ....

Then i am serializing this data using below code

C#

System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
       List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
       Dictionary<string, object> row;
       foreach (DataRow dr in dt.Rows)
       {
           row = new Dictionary<string, object>();
           foreach (DataColumn col in dt.Columns)
           {
               row.Add(col.ColumnName, dr[col]);
           }
           rows.Add(row);
       }
       return serializer.Serialize(rows);

Then after i am returning this data to json and i am capturing there, using below code

JavaScript

$.ajax({
               type: "POST",
               url: "Default.aspx/GetData",
               contentType: "application/json; charset=utf-8",
               dataType: "json",
               data: JSON.stringify(obj),
               success: function (response) {
                   var tabledata = response.d;
               },
               failure: function (response) {
                   alert(response.d);
               }
           });

Now i want to insert this data into html table but here the big deal is the column names will change every time depends on user selected dates. SO how can i solve this.
Please help me and thanks in advance.

Posted 27-Oct-15 21:24pm

Hareesh Malli

Updated 8-Aug-21 19:50pm

Add a Solution

Comments

Krunal Rohit 28-Oct-15 3:43am

Rather return the DataTable. Because based on your condition table will have the columns and rows. And you can form the HTML table from that. (with columns and rows)

-KR

Hareesh Malli 28-Oct-15 3:50am

I have some client limitations. For that i have to create table using javascript only.

F-ES Sitecore 28-Oct-15 6:33am

What have you tried so far? Have you googled how to build a table from json using jQuery?

Sreekanth Mothukuru 28-Oct-15 15:25pm

Try to use handlebarsJs library with a template with some conditions which work on the Json data you feed...

2 solutions

Solution 1

check out this link

http://www.dotnetpickles.com/2014/04/json-to-html-table.html[^]

hope this would help

Posted 28-Oct-15 9:37am

Umar__Farooq

Comments

Hareesh Malli 29-Oct-15 0:52am

Thanks Umar_Farooq for you replay, your article is good but i got some other way to do my stuff and now i am gonna post my answer below. Thanks again dude.....

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Hareesh Malli · Accepted Answer · 2015-10-28T19:02:00

Finally i solved my stuff. Here the code is

JavaScript

$.ajax({
                type: "POST",
                url: "Default.aspx/GetData",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: JSON.stringify(obj),
                success: function (response) {

                    var tabledata = response.d;
                    var codes = jQuery.parseJSON(tabledata);
                    console.log(codes);
                    var entry;
                    var name;
                    entry = codes[0];
                    
                    if (document.getElementById("ScheduleTable"))
                    {
                        var table = document.getElementById("ScheduleTable");
                        var rowCount = table.rows.length;
                        table.parentNode.removeChild(table);
                    }

                    table = $('<table></table>').attr({ id: "ScheduleTable" });
                    var th = $('<tr></tr>').appendTo(table);

                    var d1 = document.getElementById("datepicker").value;
                    var d2 = document.getElementById("datepicker1").value;
                    var date1 = new Date(d1);
                    var date2 = new Date(d2);
                    var timeDiff = Math.abs(date2.getTime() - date1.getTime());
                    var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
                    diffDays = diffDays + 1;

                    $('<td></td>').text("Employee Code").css('background-color', 'lightblue').appendTo(th);
                    
                    for (var k = 0; k < diffDays; k++) {
                        var date = new Date(Date.parse(d1));
                        date.setDate(date.getDate() + k);
                        var newDate = date.toDateString();
                        newDate = new Date(Date.parse(newDate));
                        var test1 = (newDate.toString('dd/mm/yyyy'));
                        var test = test1.substring(0, 10);
                        $('<td></td>').text(test).css('background-color', 'lightblue').appendTo(th);
                    }

                    $.each(codes, function (key, value)
                    {
                        var row = $('<tr></tr>').appendTo(table);
                    });

                    console.log("table:" + table.html());
                    table.appendTo("#box");
                },
                failure: function (response) {
                    alert(response.d);
                }
            });

And HTML stuff is

HTML

 <div>
            <p>Employee Count:
                <input type="text" id="EmpCount" /></p>
            <p>Pick a Date:
                <input type="text" id="datepicker" />
                 <input type="text" id="datepicker1" /></p>
            <p><input type="button" id="submit" value="Submit" onclick="showDetail();"/></p>
        </div>
        <div id="box" style="width:100%">
</div>