javascript - 在 JavaScript 中调用列表中的内容

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 的内容。但是，我不断收到“未捕获的类型错误:无法读取未定义的属性‘url’”。

错误发生在

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