Question

所以我有一个网站，用户将.csv文件放入网站，网站将其提取到JavaScript列表中。我正在做的完整代码是将用户输入网站的.csv文件与网站当前拥有的.csv文件进行比较。我希望能够比较下面函数之外的两个不同文件。

var a = [];
function compare(file) {
    var reader = new FileReader();
    reader.readAsText(file);
    reader.onload = function(event) {
        var csv = event.target.result;
        var data = $.csv.toArrays(csv);
        number = data.length;
        for (i = 1; i < data.length; i++) {

            a.push({date: data[i][0], url: data[i][5], count: data[i][6]});
    };
    reader.onerror = function() {
        alert('Unable to read ' + file.fileName);
    };
}

var para = document.createElement("p");
var node = document.createTextNode(a[0].url);
para.appendChild(node);
var element = document.getElementById("demo");
element.appendChild(para);

在此代码段的末尾，我正在测试是否可以调用列表中的内容a。但是，我一直得到一个＆＃34; Uncaught TypeError：无法读取属性＆＃39; url＆＃39;未定义＆＃34;。

错误发生在

var node = document.createTextNode(a[0].url);"

Answer 1

我认为问题是FileReader的异步特性

function compare(file, callback) {
    var reader = new FileReader();
    reader.readAsText(file);
    reader.onload = function (event) {
        var a = [];
        var csv = event.target.result;
        var data = $.csv.toArrays(csv);
        number = data.length;
        for (i = 1; i < data.length; i++) {
            a.push({
                date: data[i][0],
                url: data[i][5],
                count: data[i][6]
            });
            callback(a);
        };
    }
    //misplaced it in the onload handler
    reader.onerror = function () {
        alert('Unable to read ' + file.fileName);
    };
}

然后需要使用回调来访问a

//here compare is an async method so to use the value of a after calling compare we will have to depend on a callback
compare(e.target.files[0], function (a) {
    var para = document.createElement("p");
    var node = document.createTextNode(a[0].url);
    para.appendChild(node);
    var element = document.getElementById("demo");
    element.appendChild(para);
});

演示：Fiddle

在JavaScript中调用列表中的内容

1 个答案: