在javascript中读取本地csv文件？ [关闭]答案

【问题标题】：Reading in a local csv file in javascript? [closed]在javascript中读取本地csv文件？ [关闭]
【发布时间】：2015-06-06 05:37:14
【问题描述】：

[EDIT] 我使用 D3 解决了这个问题，没关系，谢谢！

所以我有一个看起来像这样的 csv 文件，我需要将一个本地 csv 文件导入我的客户端 javascript：

    "L.Name", "F.Name", "Gender", "School Type", "Subjects"
    "Doe",    "John",  "M",      "University",  "Chem I, statistics, English, Anatomy"
    "Tan",    "Betty",   "F",     "High School", "Algebra I, chem I, English 101"
    "Han",    "Anna",    "F",     "University",  "PHY 3, Calc 2, anatomy I, spanish 101"
    "Hawk",   "Alan",    "M",     "University",  "English 101, chem I"

我最终需要解析它并输出如下内容：

Chem I: 3         (number of people taking each subject)
Spanish 101: 1 
Philosophy 204: 0

但现在，我坚持将其导入 javascript。

我当前的代码如下所示：

<!DOCTYPE html>  
<html>  
<body>
<h1>Title!</h1>
<p>Please enter the subject(s) that you wish to search for:</p>
<input id="numb" type="text"/> 
<button onclick="myFunction()">Click me to see! :) </button>
<script>
function myFunction() {
    var splitResearchArea = []; 
    var textInput = document.getElementById('numb').value; 
    var splitTextInput = textInput.split(",");

  for(var i =0; i<splitTextInput.length; i++) {
    var spltResearchArea = splitTextInput[i];
    splitResearchArea.push(spltResearchArea);
  }
}

我在 Stackoverflow 上研究并发现了一些有用的链接，例如 this、this 和 this，但我是 javascript 新手，我并不完全理解它。我应该使用 Ajax 吗？文件阅读器？ jQuery？使用其中一个有什么好处？您将如何在代码中实现这一点？

但是，是的，我只是很困惑，因为我对 javascript 很陌生，所以任何在正确方向上的帮助都会很棒。谢谢！！

【问题讨论】：

@cybernetic 为什么要编辑此问题以删除所有详细信息？原始问题和任何当前答案都没有提到 Fetch API。
关闭了，太笼统了。所以邀请我进行编辑以使其更有用。如果不是，请忽略我的编辑。

标签： javascript jquery ajax csv filereader

【解决方案1】：

您可以通过多种方式来实现您想要的。

如果我这样做，我可能会先将输入文本分成如下几行：

var lines = inputText.split('\n');

然后，我将从第一行中提取标题的名称。您需要一个函数来读取每一行的值。

// This assumes no commas in the values names.
function getCsvValuesFromLine(line) {
    var values = line[0].split(',');
    value = values.map(function(value){
        return value.replace(/\"/g, '');
    });
    return values;
}

var headers = getCsvValuesFromLine(lines[0]);

接下来，我将遍历剩余的行并创建一个表示行中值的对象数组。

lines.shift(); // remove header line from array
var people = lines.map(function(line) {
    var person = {};
    var lineValues = getCsvValuesFromLine(line);
    for (var i = 0; i < lines.length; i += 1) {
        person[headers[i]] = lineValues[i];
    }
    return person;
});

如果这一切正常，您应该得到一个对象数组，代表 CSV 中每一行中的值。

以上是代码外观的粗略轮廓。我没有测试过它，它肯定还没有准备好生产，但我希望它能让你知道如何去做你想做的事。

我使用了几个内置的 Javascript 函数。如果您不熟悉它们，我建议您在 MDN 上查找它们；他们很高兴知道。

最后，Javascript 有一个奇怪的怪癖，它会自动插入分号（该语言的一个坏特性，IMO）。为避免出现问题，请勿在左大括号前添加换行符。

总是写

XXXX {
    ....
}

别写了

XXXX
{
    ....
}

【讨论】：

我明白了...谢谢，我会查找很多这些方法。另外，我不知道自动分号插入，所以非常感谢！！
我进一步建议，当您查找这些方法时，请搜索 Mozilla Developer Network (MDN) 参考。 W3Schools 很受欢迎，但知道一些不准确的信息。在 Google 上搜索 Javascript [methodname] MDN。另外，请务必对您认为有帮助的答案进行投票。
我还写了一个简短的 Javascript 初学者指南，您可能会发现它很有用：danielsadventure.info/Javascript/Javascript.html。在其中，我指出了 Javascript 与其他语言之间的一些差异。
那个链接看起来很有帮助，谢谢！！我也会去看看 MDN。

【解决方案2】：

我使用谷歌的这个库：https://github.com/evanplaice/jquery-csv/ 首先 - 你必须

$.get(ur_csv_file_path);

然后使用页面中的指南

【讨论】：

哦...谢谢!!...但是，我认为您在 $.get() 是对服务器的 http 请求时使用。考虑到我只想在我的计算机上导入本地 csv 文件，会不会一样？
JS 无法访问服务器，只抛出 XHR 请求，不要忘记前端和后端
如果您遇到问题，我可以帮助您使用 ajax 和 xhr？
嗯，是的，当用户单击表单上的提交按钮时，我希望脚本加载 csv 文件然后对其进行解析，并将结果返回到 html 页面。我不确定我是否理解正确抱歉。
@ocean800 因为这个答案提到了 jquery-csv，所以这里的演示完全符合您的描述。 evanplaice.github.io/jquery-csv/examples/file-handling.html。仅供参考，我是 jquery-csv 的作者。

【解决方案3】：

这里是如何使用FileReader API 中的readAsBinaryString() 来加载本地文件。

<p>Select local CSV File:</p>
<input id="csv" type="file">

<output id="out">
    file contents will appear here
</output>

基本上只需要监听<input type="file">中的change事件并调用readFile函数即可。

var fileInput = document.getElementById("csv"),

    readFile = function () {
        var reader = new FileReader();
        reader.onload = function () {
            document.getElementById('out').innerHTML = reader.result;
        };
        // start reading the file. When it is done, calls the onload event defined above.
        reader.readAsBinaryString(fileInput.files[0]);
    };

fileInput.addEventListener('change', readFile);

jsFiddle

【讨论】：

我明白了....谢谢！！但是，我不希望用户选择 csv 文件......表单将有一个文本字段输入主题，然后它将有一个所有学校的下拉菜单可供选择。根据他们选择的学校，脚本需要导入正确的 csv 文件，并且只输出输入的每个主题的结果，而不是整个 csv 文件。这仍然适用吗？
@ocean800 如果您需要加载预定义的 csv 文件，具体取决于用户输入的内容，那么您可以通过 jquery $.ajax 执行此操作，或者您可以将 csv 文件包含在您的 html 页面中作为 @ 987654329@。这是安全的，因为浏览器会忽略没有 javascript 的脚本。看到这个优秀的answer
@ocean800 出于安全原因，无法在 JS 中以编程方式从本地文件系统加载文件。唯一的方法就是像我一样：使用<input type="file"> 让用户知道用户自己选择的特定文件加载。如果这不符合您的需求，那么您需要一个后端
谢谢，那个链接很有帮助！那么，为了这样做，我必须将每个 csv 文件的内容放入 html 文档中？
@ocean800 如果你的 csv 文件永远不会改变，那么你可以将它们的数据放在脚本标签中，或者更方便地放在 JS 数组中，例如 var csv1 = [{ name: "bill", age: 34 }, { name: "ana", age: 44 }, { name: "cory", age: 18}]; var csv2 = [...]。这举例说明了一个 csv1 文件，它有 3 行 2 列，名称和年龄。