读取 CSV 文件并将结果输出为 HTML 列表

Question

我正在尝试使用 PapaParse 读取 CSV 文件，然后将其输出为 html 列表。到目前为止我有这个...

document.getElementById('txtFileUpload').addEventListener('change', upload, false);

 function upload(evt) {

    var data = null;
    var file = evt.target.files[0];
    var reader = new FileReader();
    reader.readAsText(file);
    reader.onload = function(event) {
        var csvData = event.target.result;
        var data = Papa.parse(csvData, {header : true});

        console.log(data.data);

        var arrayLength = data.data.length;
        console.log(arrayLength);
        for (var i = 0; i < arrayLength; i++) {
            console.log(data.data[i]);
            $("#header").append("<li>" + data.data[i] + "</li>");
        }

    };
    reader.onerror = function() {
        alert('Unable to read ' + file.fileName);
    };  

}

这可行，但每个列表项输出为 [object Object]。我哪里错了？

我的控制台输出是这样的...

Answer 1

您有一个 对象数组 ，因此当您这样做时

"<li>" + data.data[i] + "</li>"

这些对象被转换为字符串。普通对象的 toString 表示是 [object Object].

从你的问题中不清楚你期望什么，所以你可以获取对象的 apple 字段：

"<li>" + data.data[i].apple + "</li>"

或使用此对象的 JSON 表示：

"<li>" + JSON.stringify(data.data[i]) + "</li>"

读取 CSV 文件并将结果输出为 HTML 列表

Read CSV file and output results as HTML list

javascript

papaparse