csv query

read and query a csv file via jquery

by Manvaril

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.21/jquery.csv.min.js"></script>
<html>
<head>
    </head>
    <body>
        <div id="dvImportSegments" class="fileupload ">
    <fieldset>
        <legend>Upload your CSV File</legend>
        <input type="file" name="File Upload" id="txtFileUpload" accept=".csv" />
    </fieldset>
    </div>
    <div id="json-display"></div>
    </body>
</html>

JavaScript

$(document).ready(function() {
      // The event listener for the file upload
      document.getElementById('txtFileUpload').addEventListener('change', upload, false);

      // Method that checks that the browser supports the HTML5 File API
      function browserSupportFileUpload() {
        var isCompatible = false;
        if (window.File && window.FileReader && window.FileList && window.Blob) {
          isCompatible = true;
        }
        return isCompatible;
      }
      
      // Method that reads and processes the selected file
      function upload(evt) {
        if (!browserSupportFileUpload()) {
          alert('The File APIs are not fully supported in this browser!');
        } else {
          var data = null;
          var file = evt.target.files[0];
          var reader = new FileReader();
          reader.readAsText(file);
          reader.onload = function(event) {
            var csvData = event.target.result;
            data = $.csv.toObjects(csvData);
            if (data && data.length > 0) {
              prettyJson(data); // output the data
            } else {
              alert('No data to import!');
            }
          };
          reader.onerror = function() {
            alert('Unable to read ' + file.fileName);
          };
        }
      }
    });

    function prettyJson(data) {
      var html = '<pre>';
      if(typeof(data[0]) === 'undefined') {
        return null;
      } else {
        html += JSON.stringify(data, null, 4);
        html += '</pre>';
        $('#json-display').append(html);
      }
    }