Reading data from a CSV file using JQuery
Here is a quick code snippet on how to read data from a .CSV file using JQuery/Javascript
download papaparse.min.js and add the link to your code before running the below code
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="data/papaparse.min.js"></script>
<title>Read CSV file using JavaScript and HTML5 </title>
<style>
.pdfobject-container { height: 500px;}
.pdfobject { border: 1px solid #666; }
</style>
</head>
<body>
<div class="container" style="padding:10px 10px;">
<h1>Read CSV file using JavaScript</h1>
<div id="header"></div>
<div class="well">
<div class="row">
<div class="form-inline">
<div class="form-group">
<label for="files">Upload a CSV formatted file:</label>
<input type="file" id="files" class="form-control" accept=".csv" required />
</div>
<div class="form-group">
<button type="submit" id="submit-file" class="btn btn-primary">Upload File</button>
</div>
</div>
</div>
<div class="row"
<div class="row" id="parsed_csv_list">
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$('#submit-file').on("click",function(e){
e.preventDefault();
$('#files').parse({
config: {
complete: displayHTMLTable,
},
before: function(file, inputElem)
{
//console.log("Parsing file...", file);
},
error: function(err, file)
{
//console.log("ERROR:", err, file);
},
complete: function()
{
//console.log("Done with all files");
}
});
});
function displayHTMLTable(results){
var table = "<table class='table'>";
var data = results.data;
for(i=0;i<data.length;i++){
table+= "<tr>";
var row = data[i];
var cells = row.join(",").split(",");
for(j=0;j<cells.length;j++){
table+= "<td>";
table+= cells[j];
table+= "</th>";
}
table+= "</tr>";
}
table+= "</table>";
$("#parsed_csv_list").html(table);
}
});
</script>
