harryOsborn harryOsborn - 2 months ago 5
HTML Question

"Undefined" shown in last column while populating JSON data

I have converted a csv to JSON object and have populated it on a html table. Rest of the columns are fine but the last column of the table shows 'Undefined'. CSV file -

CSV file content

The table displayed as- Table
What is the problem here?

HTML file-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

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


<style>
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;
}
</style>

</head>
<body>

<div class="container">
<div class="row">
<h2>Global Order Visibility</h2>
</div>
<div class="panel panel-primary">
<div class="panel-heading">Japan Automation Tool</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-12 col-sm-offset-1">

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

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

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

</div>
<div class="row">
<div class="col-sm-12" id="dvCSV">
<table id="my-table">

</table>
</div>
</div>
</div>
</div>
</div>
</div>

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


</body>
</html>
<script type="text/javascript">

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


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

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

});

});

$("#filter").click(function () {
ids = $("#inputFilter").val();
if (ids != "") {
idsArray = ids.split(",");
$("#my-table tr:gt(0)").hide();
$.each(idsArray, function (i, v) {
$("#my-table tr[data-id=" + v + "]").show();
})
} else {
$("#my-table tr").show();
}
});

</script>


JavaScript4.js

$(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 = $("<table id='name'/>");
var lines = e.target.result.split("\n");
var result = [];
var headers = lines[0].split(",");
//alert(headers);

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

for (var j = 0; j < headers.length; j++) {
obj[headers[j]] = currentline[j];
}
result.push(obj);
}


populateTable(result);
document.getElementById("cancel").style.visibility = "visible";
document.getElementById("process").style.visibility = "visible";
document.getElementById("filterDev").style.visibility = "visible";
}
reader.readAsText($("#fileUpload")[0].files[0]);
}
}

});
});

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

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

});

});

function populateTable(finalObject) {

var obj = finalObject;
var table = $("<table id='my-table' />");
table[0].border = "1";
var columns = Object.keys(obj[0]);

var columnCount = columns.length;
var row = $(table[0].insertRow(-1));

for (var i = 0; i < columnCount; i++) {
var headerCell = $("<th />");
headerCell.html([columns[i]]);
row.append(headerCell);
}

$.each(obj, function (i, obj) {
//row = '<tr data-id="' + obj.ID + '"><td>' + obj.ID + '</td><td>' + obj.NAME + '</td><td>' + obj.CITY + '</td><td>' + obj.ADDRESS + '</td></tr>';
row = '<tr data-id="' + obj.ID + '"><td>' + obj.ID + '</td><td>' + obj.NAME + '</td><td>' + obj.CITY + '</td><td>' + obj.ADDRESS + '</td></tr>';
table.append(row);
});


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

}

Answer

UPDATE ...

Line breaks where messing up with the ADDRESS property. Just remove all line breaks before using the strings and you will be fine:

 var headers = lines[0].split(",");
 for (var i = 1; i < headers.length; i++) {
    var header = headers[i];
    header = header.replace(/(\r\n|\n|\r)/gm,"");
    headers[i] = header;
  }

DEMO: http://jsbin.com/hatasaf/3/edit?js,output


I really could not find out why the ADDRESS property was being wrapped around quotes and being inaccessible, but an array fixed the problem ...

I'll investigate more to isolate the issue but for your purposes just use the code in the demo http://jsbin.com/hatasaf/2/edit?js,output

 $("#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 lines = e.target.result.split("\n");
          var result = [];

          for (var i = 0; i < lines.length; i++) {
            var arr = [];
            var currentline = lines[i].split(",");
            for (var j = 0; j < currentline.length; j++) {
              arr.push(currentline[j]);
            }
            result.push(arr);
          }

          populateTable(result);
          document.getElementById("cancel").style.visibility = "visible";
          document.getElementById("process").style.visibility = "visible";
          document.getElementById("filterDev").style.visibility = "visible";
        }
        reader.readAsText($("#fileUpload")[0].files[0]);
      }
    }

  });

function populateTable(finalArray) {

  var table = $("<table id='my-table' />");
  table[0].border = "1";
  var columns = finalArray[0];

  var columnCount = columns.length;
  var row = $(table[0].insertRow(-1));

  for (var j = 0; j < columns.length; j++) {
    var headerCell = $("<th>").text([columns[j]]);
    row.append(headerCell);
  }


  for (var i = 1; i < finalArray.length; i++) {
    var item = finalArray[i];
    row = '<tr data-id="' + item[0] + '"><td>' + item[0] + '</td><td>' + item[1] + '</td><td>' + item[2] + '</td><td>' + item[3] + '</td></tr>';
    table.append(row);

  };

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

}
Comments