使用 d3 或 ajax 读取本地文件文本(制表符分隔值）会导致 Firefox 开发控制台中的语法错误

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

本文关键字：Firefox 开发 控制台 错误 语法 分隔 读取 ajax d3 制表符 文本      更新时间：2023-09-26

阅读有效。但是我在Firefox控制台中遇到了语法错误（当我读取30个文件时，这很烦人）。这些文件是注释文件，如（时间''t值），没有标题，如：

0.0   5.2
0.5   5.6
1.0   6.3
...

这是 ajax 代码：

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}

对于 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);
    });
}

似乎我可以使用这些代码之一，但是在这两种情况下我都遇到了语法错误（使用 Firefox 33.1）。

文件读取器可以像下面的代码一样工作。

在示例中，我添加了一个标志来使用变量的内容而不是文件。这只是演示，可以删除。与jsFiddle相同的代码在这里。

也许您可以在 $.csv 方法之前或之后添加一些验证。所以你知道该文件是一个csv/tsv文件。

如果您需要在没有用户交互的情况下打开文件，

则必须寻找不同的东西，因为不允许JS在没有用户选择文件的情况下打开文件（安全问题，请参阅此SO问题）。

您可以将数据添加到数据库中并从那里读取它，例如Firebase或MongoDB或使用JSON文件。我的另一个答案的代码应该适用于您与网页一起托管的 JSON 文件。

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>

我不完全确定您遇到的语法错误。但我认为该错误与您的 json 请求的 mime 类型有关。

我认为最好的方法是将数据包装在 json 中，然后使用 JSONP。（我也试图让它使用文本/纯文本，但没有成功。

有关详细信息，请查看以下示例。您也可以在 上找到相同的示例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>

相关文章：