当前位置: 首页 > 面试题库 >

在javascript中读取本地csv文件?

董元徽
2023-03-14
问题内容

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

我已经研究并找到了一些关于的有用链接,但是我是javascript的新手,我并不完全了解它。我应该使用Ajax吗?FileReader?jQuery的?与另一种相比,使用一种有什么好处?以及如何在代码中实现呢?

但是,是的,由于我对javascript很陌生,所以我感到很困惑,因此在正确方向上的任何帮助都将非常有用。谢谢!!


问题答案:

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

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

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

基本上,只需要侦听change事件<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



 类似资料:
  • 问题内容: 我正在尝试通过创建一个接受文件路径并将文本的每一行转换为char数组的函数来编写一个简单的文本文件阅读器,但是它不起作用。 这是怎么了? 从先前的版本中稍稍更改了代码后,这似乎仍然不起作用,现在给了我一个例外101。 我已经在Firefox上对其进行了测试,并且可以工作,但是在Google Chrome中它却无法工作,并且一直给我一个异常101。如何使它不仅可以在Firefox上而且还

  • 问题内容: 我已经在本地系统中保存了一个JSON文件并创建了一个JavaScript文件,以便读取JSON文件并打印出数据。这是JSON文件: 假设这是JSON文件的路径:。 有人能帮我写一个简单的代码来读取JSON文件并以JavaScript打印数据吗? 问题答案: 由于使用HTTP发出请求,因此您 无法 对本地资源进行AJAX调用。 一种解决方法是运行本地Web服务器,提供文件并对localh

  • 我试着用JS读txt文件。所以我用这个代码。 我的txt文件看起来: 当我输入代码:时,我的程序工作得很好,但我想用ip Adres打开txt文件。 但是我的应用程序不能读取txt文件。

  • 我想从我的本地html文件中读取一个本地文本文件,所以我尝试遵循这个线程中的解决方案JavaScript-Read local text file,但建议的解决方案对我也不起作用: 当我调用函数时,在firebug中不会出现错误,但也不会显示警报。我使用Windows和Firefox51.0.1(64位)。我不想将函数与按钮

  • 问题内容: 我试图将文本文件加载到我的JavaScript文件中,然后从该文件中读取行以获取信息,我尝试使用FileReader,但它似乎无法正常工作。有人可以帮忙吗? 问题答案: 是的,可以使用FileReader,我已经做了一个示例,这是代码: 最后,我只是读了其他一些吸引我的答案,但正如他们所建议的那样,您可能正在寻找使您能够从JavaScript文件所在的服务器(或设备)加载文本文件的代码