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

我已经研究并在Stackoverflow上找到了一些有用的链接，例如this，this和this，但我是javascript的新手，我并不完全理解它。我应该使用Ajax吗？的FileReader？ jQuery的？使用一个而不是另一个有什么好处？你将如何在代码中实现这一点？

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

Answer 1

以下是如何使用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">中监听更改事件并调用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 2

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

$.get(ur_csv_file_path);

然后使用页面

中的指南

Answer 3

有许多方法可以实现你想要的东西。

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

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

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

// This assumes no commas in the values names.
function getCsvValuesFromLine(line) {
    var values = lines[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 = {},
        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
{
    ....
}

在javascript中读取本地csv文件？

3 个答案: