How to parse a CSV with pure Javascript

Question

My original question did not make sense based on feedback. Trying to see if there is an alternate way to read a CSV with Papa parse.

My current code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="./papaparse.min.js"></script>

<script>
  var data;

 // Target first (and only) file selected
  function handleFileSelect(evt) {
    var file = evt.target.files[0];

 // Parse the file
    Papa.parse(file, {
      header: true,
      download: true,
      dynamicTyping: true,
      complete: function(results) {
        data = results;
        console.log(data);
      }
    });
  }

 // Run handleFileSelect function when document is ready
  $(document).ready(function(){
    $("#testCsv").change(handleFileSelect);
  });
</script>

 <!--File button to upload file-->
<input type="file" id="testCsv" name="files"/>

EDIT: Apparently I need to do some more research based on the down votes. Sorry, brand new to this stuff. My next attempt:

var data;

function parseCSV(file) {
    Papa.parse(file, {
        header: true,
        download: true,
        dynamicTyping: true,
        complete: function(results) {
            data = results;
            console.log(results); // results appear in dev console
        }
    });
}
parseCSV(document.getElementById("testCSV").files[0]);

Which returns an error:

ReferenceError: document is not defined

Doing more research.

The only part where I see you using jQuery in that code, is where you attach the change handler to the element. So go research how adding event handlers is done in "pure" JS. — CBroe, Jul 27 '16 at 17:36
*"...with pure Javascript"* There's nothing about using jQuery or not that in any way relates to the "purity" of JavaScript. If you want to do this without any library, what you're asking is how to do it with the DOM API. Both the jQuery and DOM API versions are "pure" JavaScript. — T.J. Crowder, Jul 27 '16 at 17:38
Well, clearly I don't understand anything about JQuery and need to do some more research. Still very new to web dev, thanks for the responses. — FF5Ninja, Jul 27 '16 at 17:51

score 2 · Answer 1 · edited May 23 '17 at 12:14

There is virtually no jQuery being used there at all. All you're using jQuery for is to wait until the DOM is loaded before running your code, and to hook up the event handler.

You can do the first (waiting) by simply moving your script tag to the end of the HTML, right before the closing </body> tag.

You can do the second on any vaguely-modern browser by using addEventListener:

document.getElementById("testCsv").addEventListener("change", handleFileSelect, false);

If you need to support obsolete browsers like IE8 that don't have addEventListener, or more modern browsers that hobble themselves and act like obsolete browsers sometimes (IE9-IE11), this answer has a function that you can use to either use addEventListener or the old MS-specific attachEvent.

How to parse a CSV with pure Javascript

1 Answers1