title: Populating html table with JSON object data
body: <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>