Chartjs-How can I export data from a csv file or excel file to a javascript object?

by

1👍

✅

The following steps are implemented in the below code snippet.Customize this as required.

  1. Select input CSV file. (The code snippet is tested for UTF-8 encoded CSV file)
  2. Read the CSV file data
  3. Parse the CSV file data and contruct the JSON object
  4. Manipulate or modify the JSON object if required.
  5. Export the JSON object as CSV
var CsvRows;
var headers;

// This event will be triggered when file is selected
// Note: This code is tested for UTF-8 encoded CSV file 
function handleChange(evt) {
  var reader = new FileReader();
  reader.onload = function() {
  
    //reader.result gives the file content
    document.getElementById('out').innerHTML = reader.result;
    
    //parse the result into javascript object
    var lines = reader.result.split('\r\n');
    headers = lines[0].split(',');
    lines.shift();
    CsvRows = lines.map((item) => {
      var values = item.split(',');
      var row = {};
      headers.map((h, i) => {
        row[h] = values[i];
      });
      return row;
    });
    console.log(CsvRows);
    document.getElementById('result').style.display = 'block'
  };

  //read the selected file
  reader.readAsBinaryString(evt.files[0]);
};


//export the javscript object as csv
function exportCSV() {
  //contruct the csv ad data url
  let csvContent = "data:text/csv;charset=utf-8," +
    headers.join(",") + "\r\n";


  //contruct the data in csv format
  var data = CsvRows.map(e => {
    var line = '';
    headers.map((h) => {
      line += e[h] + ',';
    });
    return line.substr(0, line.length - 1);
  }).join("\r\n")

  csvContent += data;

  //contruct an anchor tag 
  var encodedUri = encodeURI(csvContent);
  var link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  
  //provide the export file name
  link.setAttribute("download", "mydata.csv");
  document.body.appendChild(link); // Required for FF

  //trigger download of CSV
  link.click();

  link.remove();
}
<input type="file" onchange="handleChange(this)" accept=".csv" />

<div id="result" style="display:none;">
  <div id="out"></div>
  <div>See console for Javascript Object.</div>
  <div>Export the imported file <button onclick="exportCSV()">Export</button></div>
</div>

The above code snippet only works for CSV files. Custom implementation has to be made for Excel files.

Leave a comment