I'm a beginner programmer.

I'm using jQuery Data Table with Bootstrap to create table.

I need to create table from the uploaded CSV file.

Is there any way to create csv data to json ?

'submit form': function (event){
     console.log("Submitting form");
     event.preventDefault();
     var frm = document.getElementById('frm');
     var csvdata = new FormData(event.target);
     console.log("data:: " + csvdata);

     // Code to create dataTable out of csv
     // $('#mytable').DataTable();
}

How can I do it ?

I'm a beginner programmer.

I'm using jQuery Data Table with Bootstrap to create table.

I need to create table from the uploaded CSV file.

Is there any way to create csv data to json ?

'submit form': function (event){
     console.log("Submitting form");
     event.preventDefault();
     var frm = document.getElementById('frm');
     var csvdata = new FormData(event.target);
     console.log("data:: " + csvdata);

     // Code to create dataTable out of csv
     // $('#mytable').DataTable();
}

How can I do it ?

• javascript
• jquery
• twitter-bootstrap
• csv
• datatables

• 1 If you're uploading the file and storing on the server then you can transform the CSV there and return JSON. If you want to do it all on the client then you could use the FileReader class. – Rory McCrossan Commented Jan 12, 2016 at 10:38
• Appreciate if you provide some code snippet @RoryMcCrossan – HusNain Commented Jan 12, 2016 at 10:44
• You know, this is a lovely problem so I'm going to play and get back to you - but in the meantime you'll not be able to do it without some server-side code... unless you do it on the page itself, which will mean not uploading a csv but perhaps pasting a csv file into a textarea. Would that help? – annoyingmouse Commented Jan 13, 2016 at 13:51

2 Answers 2

As Rory McCrossan pointed out the FileReader approach works really well also:

$("#fileinput").on("change", function(evt) {
    var f = evt.target.files[0];
    if (f) {
        var r = new FileReader();
        r.onload = function(e) {
            table.rows.add($.csv.toObjects(e.target.result)).draw();
        }
        r.readAsText(f);
    } else {
        alert("Failed to load file");
    }
});

Rather than upload the csv to the server and process it there then display it within a DataTable you could, if you have access to the raw data data and you know its structure, render the cvs without touching the server.

This example uses jquery-csv to parse the contents of a textarea and populate the table. The relevant function is this:

$("#populateTable").click(function(){
    table.rows.add($.csv.toObjects($("#csvImport").val())).draw();
});

Hope that helps.