Using uploaded csv file in html

Question

I'm working on application (as a school project) which can visualize data from csv file. What i can't figure out is how to use csv file after i upload it (im not using server it's just offline app). For charts im using zing chart, see the folowing code

var chartData={
"type": "line",`"csv":{
    "url":"input/datasample.csv",
  "vertical-labels":true,
    "smart-scales":true


 }

};

window.onload=function(){
  zingchart.render({
    id:'chartDiv',
    height:400,
    width:600,
    data:chartData
  });

`so as you can see the used data are set up manually, what i want to do is create funcion that will use csv file i upload (using a button) and use it as a data source..

i have already tried this, but i still don't know how to use that csv as data source ...

<input type="file" id="fileInput" accept=".csv"/>

                    <script>
                document.querySelector('#fileInput').addEventListener('change', handleFile,false)
                function handleFile(e){
    var reader = new FileReader;
    var file   = e.target.files[0]

    reader.onload = function(e){
        var csv = e.target.result

        }

    reader.readAsText(file);
}

i thought if i could maybe convert csv to string or json but i don't know how.. any help would be appreciated..i'm really just a beginner

score 0 · Answer 1 · edited May 23 '17 at 12:20

See my answer here: [answer](Convert CSV data into JSON format using Javascript

function csvUpload(csvText){
    //Split all the text into seperate lines on new lines and carriage return feeds
    var allTextLines = csvText.split(/\r\n|\n/);
    //Split per line on tabs and commas
    var headers = allTextLines[0].split(/\t|,/);
    var lines = [];
    var locations = [];

    for (var i=1; i<allTextLines.length; i++) {
        var data = allTextLines[i].split(/\t|,/);

        if (data.length == headers.length) {

        var location = {"device_id":data[0], "address":data[1], "city":data[2]};
        locations.push(location);

        }

    }
    return locations;
})

Using uploaded csv file in html

1 Answers1