在 javascript 中读取本地 csv 文件？

Question

[编辑] 我使用 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);
  }
}

我已经研究并在 Whosebug 上找到了一些有用的链接，例如 this, this, and this，但我是 javascript 的新手，我并不完全理解它。我应该使用 Ajax 吗？文件阅读器？ jQuery？使用一个比另一个有什么好处？你将如何在代码中实现它？

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

Answer 1

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

$.get(ur_csv_file_path);

然后使用页面

中的指南

Answer 2

下面是如何使用 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

Answer 3

有多种方法可以实现您的愿望。

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

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

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

// 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]);

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

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;
});

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

以上是代码的大致轮廓。我还没有测试它，它当然还没有准备好生产，但我希望它能让你知道如何去做你想做的事。

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

最后，Javascript 中有一个奇怪的怪癖，它会自动插入 semi-colon（IMO 语言的一个不好的特性）。为避免出现问题，请勿在左大括号前放置 new-line。

一直写

XXXX {
    ....
}

并且不写

XXXX
{
    ....
}

在 javascript 中读取本地 csv 文件？

Reading in a local csv file in javascript?

javascript

csv

ajax

jquery

filereader