Javascript将CSV文件加载到数组中

Posted 2023-05-08

【中文标题】Javascript将CSV文件加载到数组中

【英文标题】：Javascript loading CSV file into an array

【发布时间】：2014-07-08 21:26:40

【问题描述】：

我正在用 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);

【问题讨论】：

@Teemu 删除它后，我收到错误无法读取未定义的属性 ajax。感谢您的帮助。

【参考方案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 
    
);

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

插件页面上也有很多很棒的例子可以做各种各样的事情。

【讨论】：

感谢您的链接。我正在尝试类似下面的内容，但是数据未定义。我以前没有使用过 ajax 或 jquery，因此非常感谢您的帮助。我知道我遗漏了一些明显但无法弄清楚的东西： $.ajax( url: "dl.dropboxusercontent.com/u/25575808/energy/nodes.csv", aync: false, success: function (csvd) data = $.csv2Array(csvd); , dataType : "text", complete: function () // 在完成时调用函数 );

明白了..这是一个错字异步。再次感谢。

我正在尝试此解决方案，但得到“XMLHttpRequest 无法加载文件：///Users/adampaciorek/Desktop/names%20Parser/CSV_Database_of_First_Names.csv。跨源请求仅支持协议方案：http、数据, 铬, 铬扩展, https, 铬扩展资源”。有人知道解决方法吗？

您的原始脚本在调用此文件的系统上的什么位置？试图潜入计算机的另一个区域以获取文件似乎是一个问题，这可能违反跨域策略，并且如果您尝试从网络访问本地文件，那将无法正常工作。您需要将 CSV 文件放在同一个域中。以下是 Google 提供的有关跨域的一些信息，其中包含有关同源策略的链接以提供更多背景信息：developer.chrome.com/extensions/xhr

是否可以将 jquery-csv 用于带有 csv 文件的输入元素？

【参考方案2】：

您不能使用 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"""

【讨论】：

但是用户没有上传 csv 文件。我在 wordpress 中有 CSV 文件，并且 url 类似于xxx/wp-content/uploads/2014/05/csvFile.csv。我如何将此文件传递给 FileReader？

只是为了澄清我希望仅在 Javascript 中执行此操作。我不熟悉 jquery/ajax。

如果文件已经上传，并且你有文件内容，那么你就不需要FileReader了。 FileReader 是你在用户机器上读取文件的包装器。

我有文件，但问题是我不知道如何阅读它的内容。我是新手，如果这听起来很愚蠢，请道歉。

【参考方案3】：

如果您不太担心文件的大小，那么将数据作为 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 文件的位置。 第二个参数是一个可选的回调函数，当文件完全加载时运行。

如果您的文件有非分隔的逗号，那么它不会继续这样做，因为它只是通过在返回和逗号处截断来创建二维数组。如果您需要该功能，您可能需要研究 regexp。

//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 方法；他们通过“构造函数”函数使用自己的局部函数和变量创建一个新对象（如数字、字符串、数组）。在某些情况下非常方便。此函数可用于同时加载 10 个具有不同回调的不同文件（取决于您对 csv 的喜爱程度！）

【参考方案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 插件。

【讨论】：

这很完美。感谢您添加成功。

【参考方案5】：

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