convert csv file to json object datatable
I realise this is an old question, but I came across it today needing to do the same thing and wrote a script to do it. You can check it out at my github repo.
The following code would accomplish what you're after (using jQuery):
$.ajax("http://my.domain.com/mycsvfile.csv", { success: function(data) { var jsonobject = csvjson.csv2json(data); // Now use jsonobject to do some charting... }, error: function() { // Show some error message, couldn't get the CSV file }});Happy coding :)
use this code for guide to parse csv file to json ...
function processFiles(files) { var file = files[0]; var reader = new FileReader(); reader.onload = function (e) { var output = document.getElementById("fileOutput"); var texto = e.target.result; csvJSON(texto); }; reader.readAsText(file);}function csvJSON(csv) { var lines = csv.split("\n"); var result = []; var headers; for (var i = 0; i < lines.length; i++) { headers = lines[i].split("\n"); } var cont = 0; for (var i = 0; i < lines.length; i++) { var obj = {}; var currentline = lines[i].split("\n"); for (var j = 0; j < headers.length; j++) { obj[cont] = currentline[j]; } cont++; result.push(obj); } return JSON.stringify(result); //JSON}
Papa Parse is nice for that.
<html><head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="libraries/PapaParse-4.1.2/papaparse.min.js"></script> <script> $(document).ready(function(){ $("#submitbutton").click(function(){ var myfile = $("#csvfile")[0].files[0]; var json = Papa.parse(myfile, { header: true, skipEmptyLines: true, complete: function(results) { console.log("Dataframe:", JSON.stringify(results.data)); console.log("Column names:", results.meta.fields); console.log("Errors:", results.errors); } }); }) }) </script></head><body> <form name="foo" method="post" enctype="multipart/form-data"> <input id="csvfile" type="file" value="i"> </form> <button id="submitbutton" type="button">Upload CSV file!</button></body></html>Uploading this CSV:
+------+----------------+---------------+------------+| Id | Petal.Length | Petal.Width | Species |+======+================+===============+============+| 1 | 1.4 | 0.2 | setosa |+------+----------------+---------------+------------+| 2 | 1.4 | 0.2 | setosa |+------+----------------+---------------+------------+| 3 | 1.3 | 0.2 | setosa |+------+----------------+---------------+------------+| 4 | 3.9 | 1.4 | versicolor |+------+----------------+---------------+------------+| 5 | 3.5 | 1 | versicolor |+------+----------------+---------------+------------+| 6 | 4.2 | 1.5 | versicolor |+------+----------------+---------------+------------+| 7 | 5.4 | 2.3 | virginica |+------+----------------+---------------+------------+| 8 | 5.1 | 1.8 | virginica |+------+----------------+---------------+------------+you'll get this output in the console:
Dataframe: [{"Id":"1","Petal.Length":"1.4","Petal.Width":"0.2","Species":"setosa"},{"Id":"2","Petal.Length":"1.4","Petal.Width":"0.2","Species":"setosa"},{"Id":"3","Petal.Length":"1.3","Petal.Width":"0.2","Species":"setosa"},{"Id":"4","Petal.Length":"3.9","Petal.Width":"1.4","Species":"versicolor"},{"Id":"5","Petal.Length":"3.5","Petal.Width":"1","Species":"versicolor"},{"Id":"6","Petal.Length":"4.2","Petal.Width":"1.5","Species":"versicolor"},{"Id":"7","Petal.Length":"5.4","Petal.Width":"2.3","Species":"virginica"},{"Id":"8","Petal.Length":"5.1","Petal.Width":"1.8","Species":"virginica"}]Column names: ["Id", "Petal.Length", "Petal.Width", "Species"]Errors: []