Question

我正在使用Wordpress开发一个网页。网页需要有一个与所有县组合的组合框。我有一个csv格式的数据集，对于所有这些县都有大约10k行。当用户在下拉列表中选择一个县时，我只想要在网页中显示所选的县数据。这是我的要求。

在wordpress中，我的网页使用

添加js文件

<script type="text/javascript" src="http://xxx/wp     content/uploads/2014/05/countyList1.js"></script>

以及网页下拉列表

<select name="county" id="county" onload="setCounties();" onchange="getSelectedCountyData();"></select>

在countyList1.js文件中，我有setCounties（）和getSelectedCountyData（）函数。

到目前为止，我可以看到带有县列表的下拉列表。我不知道如何阅读CSV文件并将选定的县过滤器应用于此列表。

我尝试了FileReader对象，我可以在网页上加载CSV内容，但我不希望用户选择CSV。我已经有了数据集。

我正在尝试使用此SO帖子How to read data From *.CSV file using javascript?中的这个jquery.csv-0.71库，但我需要帮助。

这是在选择县时调用的代码

function getSelectedCountyData() {
        cntrySel = document.getElementById('county');
        //selCty = countyList[cntrySel.value];
        handleFiles();
}

function handleFiles() {

    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "D:\Docs\Desktop\csvfile.csv",
            dataType: "csv",
            success: function (data) { processData(data); }
        });
    });
}

function processData(allText) {
    var allTextLines = allText.split(/\r\n|\n/);
    var headers = allTextLines[0].split(',');
    var lines = [];

    for (var i = 1; i < allTextLines.length; i++) {
        var data = allTextLines[i].split(',');
        if (data.length == headers.length) {

            var tarr = [];
            for (var j = 0; j < headers.length; j++) {
                tarr.push(headers[j] + ":" + data[j]);
            }
            lines.push(tarr);
        }
    }
    console.log(lines);
    drawOutput(lines);
}

function drawOutput(lines) {
    //Clear previous data
    document.getElementById("output").innerHTML = "";
    var table = document.createElement("table");
    for (var i = 0; i < lines.length; i++) {
        var row = table.insertRow(-1);
        for (var j = 0; j < lines[i].length; j++) {
            var firstNameCell = row.insertCell(-1);
            firstNameCell.appendChild(document.createTextNode(lines[i][j]));
        }
    }
    document.getElementById("output").appendChild(table);
}

Answer 1

我强烈建议您查看此插件：

http://github.com/evanplaice/jquery-csv/

我将它用于处理大型CSV文件的项目，它可以很好地将CSV解析为数组。您也可以使用它来调用您在代码中指定的本地文件，这样您就不依赖于文件上载。

上面包含插件后，您可以使用以下方法解析CSV：

$.ajax({
    url: "pathto/filename.csv",
    async: false,
    success: function (csvd) {
        data = $.csv.toArrays(csvd);
    },
    dataType: "text",
    complete: function () {
        // call a function on complete 
    }
});

然后，所有内容都将存在于数组数据中，供您根据需要进行操作。如果需要，我可以提供处理数组数据的更多示例。

插件页面上有许多很好的例子可以用来做各种各样的事情。

Answer 2

如果您不过分担心文件的大小，那么您可能更容易将数据作为JS对象存储在另一个文件中并将其导入您的文件中。使用语法<script src="countries.js" async></script>同步或异步。保存您需要导入文件并解析它。

但是，我可以看到为什么你不想重写10000个条目，所以这里是我编写的基于面向对象的csv解析器。

function requestCSV(f,c){return new CSVAJAX(f,c);};
function CSVAJAX(filepath,callback)
{
    this.request = new XMLHttpRequest();
    this.request.timeout = 10000;
    this.request.open("GET", filepath, true);
    this.request.parent = this;
    this.callback = callback;
    this.request.onload = function() 
    {
        var d = this.response.split('\n'); /*1st separator*/
        var i = d.length;
        while(i--)
        {
            if(d[i] !== "")
                d[i] = d[i].split(','); /*2nd separator*/
            else
                d.splice(i,1);
        }
        this.parent.response = d;
        if(typeof this.parent.callback !== "undefined")
            this.parent.callback(d);
    };
    this.request.send();
};

可以这样使用;

var foo = requestCSV("csvfile.csv",drawlines(lines));

第一个参数是文件，在这种情况下相对于html文件的位置。第二个参数是一个可选的回调函数，它在文件完全加载时运行。

如果你的文件有非分离的公共话，那么它就不会继续使用它，因为它只是通过砍掉返回和逗号来创建2d数组。如果您需要该功能，可能需要查看正则表达式。

//THIS works 

"1234","ABCD" \n
"!@£$" \n

//Gives you 
[
 [
  1234,
  'ABCD'
 ],
 [
  '!@£$'
 ]
]

//This DOESN'T!

"12,34","AB,CD" \n
"!@,£$" \n

//Gives you

[
 [
  '"12',
  '34"',
  '"AB',
  'CD'
 ]
 [
  '"!@',
  '£$'
 ]
]

如果您不习惯OO方法;他们通过一个＆＃39;构造函数创建一个具有自己的局部函数和变量的新对象（如数字，字符串，数组）。功能。在某些情况下非常方便。此功能可用于同时加载10个具有不同回调的不同文件（取决于您对csv的爱程度！）

Answer 3

您无法使用AJAX从用户计算机获取文件。这绝对是错误的做法。

使用 FileReader API：

<input type="file" id="file input">

JS：

console.log(document.getElementById("file input").files); // list of File objects

var file = document.getElementById("file input").files[0];
var reader = new FileReader();
content = reader.readAsText(file);
console.log(content);

然后将content解析为CSV。请注意，您的解析器当前不会处理CSV中的转义值，例如：value1,value2,"value 3","value ""4"""

Answer 4

这是我过去常常将csv文件用于数组。无法得到上述答案，但这对我有用。

$(document).ready(function() {
   "use strict";
    $.ajax({
        type: "GET",
        url: "../files/icd10List.csv",
        dataType: "text",
        success: function(data) {processData(data);}
     });
});

function processData(icd10Codes) {
    "use strict";
    var input = $.csv.toArrays(icd10Codes);
    $("#test").append(input);
}

使用上面链接的jQuery-CSV插件。

Answer 5

原始代码可以很好地读取和分隔csv文件数据，但是您需要将数据类型从csv更改为文本。

Javascript将CSV文件加载到数组中

5 个答案: