Populating html table with JSON object data
<p>I am taking a csv file from fileUpload control and have converted the csv file to JSON object also. Now I am trying to populate the html table with this JSON data. I have written a populatetable() function but its not showing data properly. The CSV to JSON conversion is happening properly as can be seen here - 
<a href="http://i.stack.imgur.com/S4d5p.png" rel="nofollow">JSON object</a></p>

<p><strong>HTML file:</strong></p>

<pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"&gt; &lt;/script&gt;
    &lt;!--&lt;script type="text/javascript" src="JavaScript.js"&gt;&lt;/script&gt;--&gt;
    &lt;script type="text/javascript" src="CSV_to_JSON.js"&gt;&lt;/script&gt;


    &lt;style&gt;
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }

        th, td {
            padding: 15px;
        }

        th {
            text-align: left;
        }

        table {
            border-spacing: 5px;
        }

        .guide {
            text-decoration: underline;
            text-align: center;
        }

        .odd {
            color: #fff;
            background: #666;
        }

        .even {
            color: #666;
        }

        .hot {
            border: 1px solid #f00;
        }
    &lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

    &lt;div class="container"&gt;
        &lt;div class="row"&gt;
            &lt;h2&gt;---&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="panel panel-primary"&gt;
            &lt;div class="panel-heading"&gt;---&lt;/div&gt;
            &lt;div class="panel-body"&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-sm-12 col-sm-offset-1"&gt;

                        &lt;form id="form1" runat="server" class="form-horizontal"&gt;
                            &lt;div class="form-group"&gt;
                                &lt;div class="col-sm-5"&gt;
                                    &lt;div class="col-sm-6"&gt;
                                        &lt;input type="file" accept=".csv" id="fileUpload" /&gt;
                                    &lt;/div&gt;
                                    &lt;div class="col-sm-6"&gt;
                                        &lt;input type="button" id="upload" class="btn btn-primary" value="Upload" /&gt;
                                    &lt;/div&gt;

                                &lt;/div&gt;
                                &lt;div class="col-sm-7"&gt;
                                    &lt;div class="col-sm-2"&gt;
                                        &lt;input type="button" id="cancel" class="btn btn-primary btn pull-right" value="Cancel/Save" style="visibility: hidden" /&gt;
                                    &lt;/div&gt;
                                    &lt;div class="col-sm-2"&gt;
                                        &lt;input type="button" id="process" class="btn btn-primary btn pull-right" value="Process" style="visibility: hidden" /&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/form&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;div class="row"&gt;
                    &lt;div class="col-sm-12"&gt;
                        &lt;div class="panel panel-default" style="align-self: center"&gt;
                            &lt;div class="panel-body" style="max-height: 400px; min-height: 400px; overflow-y: scroll;"&gt;
                                &lt;div class="row"&gt;
                                    &lt;div class="col-sm-12"&gt;
                                        &lt;center&gt;
                                                        &lt;div class="input-append" id="filterDev" style="visibility:hidden"&gt;
                                                          &lt;input name="search" id="inputFilter" placeholder="Enter ID to filter" /&gt;
                                                             &lt;input type="button" value="Filter" id="filter" class="btn btn-primary" /&gt;
                                                                &lt;/div&gt;&lt;/center&gt;
                                    &lt;/div&gt;
                                    &lt;br /&gt;
                                    &lt;br /&gt;

                                &lt;/div&gt;
                                &lt;div class="row"&gt;
                                    &lt;div class="col-sm-12" id="dvCSV"&gt;&lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;div class="row"&gt;
                    &lt;div class="col-sm-12"&gt;
                        &lt;p id="download" style="color: cornflowerblue; visibility: hidden"&gt;&lt;strong&gt;Please click the below links to download the processed file..&lt;/strong&gt;&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-sm-12"&gt;
                        &lt;div class="col-sm-3"&gt;
                            &lt;p id="File1" style="color: cornflowerblue; text-decoration: underline; visibility: hidden"&gt;File1 Download&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;div class="col-sm-3"&gt;
                            &lt;p id="File2" style="color: cornflowerblue; text-decoration: underline; visibility: hidden"&gt;File2 Download&lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;


&lt;/body&gt;
&lt;/html&gt;
&lt;script type="text/javascript"&gt;

    $("#cancel").on("click", function () {
        $('input:checked').each(function () {
            $(this).closest("tr").remove();
        });
    });

    /*$('#inputFilter').keyup(function () {
        var that = this;
        $.each($('tr'),
        function (i, val) {
            if ($(val).text().indexOf($(that).val()) == -1) {
                $('#name').animate({
                    marginTop: 0
                },
                50,
                function () {
                    $('tr').eq(i).hide();
                });
            } else {
                $('#name').animate({
                    marginTop: 0
                },
                50,
                function () {
                    $('tr').eq(i).show();
                });
            }
        });
    });*/

    $(function () {
        $("#process").bind("click", function () {

            document.getElementById("File1").style.visibility = "visible";
            document.getElementById("File2").style.visibility = "visible";
            document.getElementById("download").style.visibility = "visible";

        });

    });

&lt;/script&gt;
</code></pre>

<p><strong>CSV_to_JSON.js</strong> -</p>

<pre><code>$(function () {
    $("#upload").bind("click", function () {

        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
        if (regex.test($("#fileUpload").val().toLowerCase())) {
            if (typeof (FileReader) != "undefined") {
                var reader = new FileReader();
                reader.onload = function (e) {
                    //var table = $("&lt;table id='name'/&gt;");
                    var lines = e.target.result.split("\n");
                    var result = [];
                    var headers = lines[0].split(",");
                    //alert(headers);

                    for (var i = 1; i &lt; lines.length; i++) {
                        var obj = {};
                        var currentline = lines[i].split(",");

                        for (var j = 0; j &lt; headers.length; j++) {
                            obj[headers[j]] = currentline[j];
                        }
                        result.push(obj);
                    }
                    alert(JSON.stringify(result));
                    populateTable(JSON.stringify(result));
                }
                reader.readAsText($("#fileUpload")[0].files[0]);
            }
        }

    });
});

function populateTable(object) {

    var obj = object;
    var table = $("&lt;table /&gt;");
    table[0].border = "1";
    var columnCount = obj[0].length;
    var row = $(table[0].insertRow(-1));

    for (var i = 0; i &lt; columnCount; i++) {
        var headerCell = $("&lt;th /&gt;");
        headerCell.html(obj[0][i]);
        row.append(headerCell);
    }

    for (var i = 1; i &lt; obj.length; i++) {
        row = $(table[0].insertRow(-1));
        for (var j = 0; j &lt; columnCount; j++) {
            var cell = $("&lt;td /&gt;");
            cell.html(obj[i][j]);
            row.append(cell);
        }
    }

    var dvTable = $("#dvCSV");
    dvTable.html("");
    dvTable.append(table);

}
</code></pre>

<p>How can this data be displayed properly in a html table?</p>