在javascript中读取本地csv文件？

[编辑]我用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。

我当前的代码如下所示：

    
Title!
 
Please enter the subject(s) that you wish to search for:
  Click me to see! :)   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上找到了一些有用的链接，就像这样 ， 这个 ，但我是javascript的新手，我并不完全理解它。 我应该使用Ajax吗？ 的FileReader？ jQuery的？ 使用一个优于另一个有什么好处？ 你将如何在代码中实现这一点？

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

Answer 1

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

 
Select local CSV File:
  
 file contents will appear here  

基本上，只需要在监听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 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 { .... }