1

In the following code: 

  var rawFile = new XMLHttpRequest();
  rawFile.open("GET", "file://csvFileName.csv", true);
  console.log(rawFile);
  var input = $.csv.toObjects(rawFile);
  console.log(input);

I'm trying to convert a .csv file into a readable file, and then I'm trying to run a .toObjects command on it to produce a csv file that's easier to work with, but I keep running into an "Uncaught TypeError: csv.replace is not a function" error on the fourth line. I'm using the most upvoted answer to this question as a basis.

I've read through the documentation but I can't seem to find a particular answer to this error, does anyone know of a fix?

edit: this isn't my entire code, I have a script link to the jquery plugin in my html header. This is just the section where the error is. link looks like: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
jz8888
  • 13
  • 4
  • Any chance what you're replacing is a number, instead of a string? Would explain the error. – Manish Giri Jul 03 '17 at 21:07
  • The argument to `$.csv.toObjects()` is supposed to be a string, not `XMLHttpRequest`. – Barmar Jul 03 '17 at 21:08
  • You're missing some steps my dude. Check out how to use xmlhttprequest here https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest – Khauri Jul 03 '17 at 21:10
  • @Barmar Does rawFile.open not generate a string variable? How would I generate a string from the file? – jz8888 Jul 03 '17 at 21:14
  • I posted an answer showing how to do it. AJAX is asynchronous (that's what the first A stands for). – Barmar Jul 03 '17 at 21:15

3 Answers3

1

You need to send the AJAX request, and call $.csv.toObjects() in the callback function. Its argument needs to be the string from the AJAX response.

var rawFile = new XMLHttpRequest();
rawFile.open("GET", "file://csvFileName.csv", true);
rawFile.onload = function() {
    var input = $.csv.toObjects(this.responseText);
    console.log(input);
};
Barmar
  • 741,623
  • 53
  • 500
  • 612
0

XMLHttpRequest is not a file, you should do a request either with XMLHttpRequest's open function, or see bellow, after that you should get the file out the response data. you can use instead:

fetch("file://csvFileName.csv").then(function(resp) {
    return resp.blob();
}).then(function(blob) {
    var file = new File([blob], "name");
    var input = $.csv.toObjects(rawFile);
    console.log(input);
});
shmulik friedman
  • 185
  • 1
  • 7
0

First thing's first, you're not using XMLHttpRequest right. Reference this site to see how to use it. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

Secondly, you can't do this without a web server to host your csv file. The file:// protocol isn't supported with XMLHttpRequest. There's tons of ways to set up a webserver, but a quick an easy way is to use this chrome extension.. Then edit the url of your file to be relative to your js file. (The same way you'd include css in html).

You could also use the Fetch API like someone else commented, but some browsers (mainly Internet Explorer) don't support it, so keep that in mind.

var rawFile = new XMLHttpRequest();
  rawFile.addEventListener("load", reqListener);
  rawFile.open("GET", "/csvFileName.csv", true);
  rawFile.send();
  function reqListener(){
    var csvText = this.responseText;
    console.log(csvText);
  }
Khauri
  • 3,753
  • 1
  • 11
  • 19