问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

在javascript中读取本地csv文件？

社区维基
1
新手上路，请多包涵

[编辑] 我使用 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 吗？文件阅读器？查询？使用一个比另一个有什么好处？你将如何在代码中实现它？

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

原文由 ocean800 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptjqueryajaxcsvfilereader
阅读 2.6k
2 个回答
得票最新
社区维基
1
✓ 已被采纳

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

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

 const fileInput = document.getElementById('csv')
const readFile = () => {
  const reader = new FileReader()
  reader.onload = () => {
    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)

 <div>
  <p>Select local CSV File:</p>
  <input id="csv" type="file" accept=".csv">
</div>
<pre id="out"><p>File contents will appear here</p></pre>

jsFiddle

原文由 Jose Rui Santos 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
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
{
    ....
}

原文由 Vivian River 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题