Read local file text (tab separated values) with d3 or ajax cause syntax error in firefox development console

Question

The reading works. However I got a syntax error in the firefox console (which is tiresome when I read 30 files). The files are annotation files like (time \t value) with no headers like :

0.0   5.2
0.5   5.6
1.0   6.3
...

This is the ajax code :

function getdatafromfile(filename)  {
// Read annotation file. Example : %timeinstant \t %value \n
// Return an array of string
var arraydata
 $.ajax({
      type: "GET",
      url: filename,
      dataType: "text",
      async: false,
      success: function(csv) {arraydata = $.csv.toArrays(csv,{separator:'\t'}); }
      });


   return arraydata}

And with d3:

d3.text(filename, function(text) {

        var data = d3.tsv.parseRows(text).map(function(row) {
            return row.map(function(value) {
                return +value;
                });
            });
        console.log(data);
    });
}

It seems that I could use one of those code, but I got a syntax error in both cases (with firefox 33.1).

A jsFiddle would help to see the syntax error. Any way shouldn't it be `var data = d3.csv.parseRow().map(..);` instead of tsv. — AWolf, Dec 01 '14 at 10:58
No problem. Sorry but it seems I can't make a jsFiddle with an external text file. — PatriceG, Dec 01 '14 at 14:03

score 1 · Accepted Answer · edited May 23 '17 at 11:57

A file reader could work like the code below.

In the example I've added a flag to use the content of the variable instead of a file. That's just for the demo and can be removed. The same code is here as jsFiddle.

Maybe you could add some validation before or after the $.csv method. So you know that the file was a csv/tsv file.

If you need to open the file with-out user interaction, you have to look for something different because JS is not allowed to open a file with-out the user choosing the file (security concerns, see this SO question).

You could add your data to a database and read it from there. e.g. Firebase or MongoDB or use a JSON file. The code of my other answer should work for a JSON file that you host with your webpage.

var demoTxt = "0.0   5.2\
0.5   5.6\
1.0   6.3";

var flag_usedemofile = true; //if true var demoTxt will be used

function doOpen(evt) {
  var files = evt.target.files,
      reader = new FileReader();
    reader.onload = function() {
        if ( !flag_usedemofile) {
            var arraydata = $.csv.toArrays(this.result,{separator:'   '});
            showout.value = arraydata; //this.result;
        } else {
            var arraydata = $.csv.toArrays(demoTxt,{separator:'   '});
            showout.value = arraydata;
            console.log(arraydata);
        }
    };
    reader.readAsText(files[0]);
}
    
var openbtn = document.getElementById("openselect"),
    showout = document.getElementById("showresult");
openselect.addEventListener("change", doOpen, false);

#showresult {
  width:98%;
  height: 300px;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<input type="file" id="openselect" />
<textarea id="showresult"></textarea>

Thanks! But your code seems not works with a file. It still display the demoTxt. Is it normal ? — PatriceG, Dec 02 '14 at 09:53
Just change the line with the flag to `var flag_usedemofile = false;` and it should use the file. — AWolf, Dec 02 '14 at 11:47
It works, thanks ! By the way, I suppose the onload function is asynchronous. Is it possible to make it synchronous ? — PatriceG, Dec 02 '14 at 12:07
Yes, that's right, it's asynchron. I'm not sure if it's possible to do it synchronous, but I would avoid it because it will probably be a bad user experience. If you need to do something after file read is complete. There is an event for it FileReader.onloadend. Just add `reader.onloadend = function() { //do what want... }`. Loadend will be triggered on success or failure. — AWolf, Dec 02 '14 at 12:15

score 0 · Answer 2 · answered Dec 01 '14 at 12:48

I'm not exactly sure what syntax error you are getting. But I think the error have something to do with the mime type of your json request.

I think the best way is to wrap your data in json and then use JSONP. (I have also tried to get it working with text/plain, but with-out success.)

Please check the following example for details. You can also find the same example on jsFiddle.

(function ($) {
    var url = 'http://www.mocky.io/v2/547c5e31501c337b019a63b0'; // dummy url

    var jsonCallback = function (csv) {
        var arraydata;
        console.log(data);
        $('#data').html(JSON.stringify(csv, null, 2));
        arraydata = $.csv.toArrays(csv.data,{separator:'\t'});
        console.log(arraydata); 
    };

    $.ajax({
        type: 'GET',
        url: url,
        contentType: "application/json",
        dataType: 'jsonp'
    }).done(jsonCallback)
    .fail(function (xhr) {
        alert("error" + xhr.responseText);
    });

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id='data'></pre>

I still get the error when I use my text file instead of the url. — PatriceG, Dec 01 '14 at 13:13
Do you want to load a local text file? Then you should be better using the FileReader API from html5. Because I think it is not possible to read local files with an ajax request. That's maybe possible if you have a server side that reads the file and answers your ajax with the content. — AWolf, Dec 01 '14 at 15:08

Read local file text (tab separated values) with d3 or ajax cause syntax error in firefox development console

2 Answers2

Linked