将csv文件中的数据放入数组中（Javascript）

Question

我需要能够从CSV文件中获取数据（用户通过<input type="file" id="fileInput">选择文件），并将其放入数组中。我宁愿避免使用jquery，因为我以前没有使用过，但任何帮助都将不胜感激。这是我的代码：

<div id="page-wrapper">
  <div>
    Select a text file: 
    <input type="file" id="fileInput">
  </div>
  <pre id="fileDisplayArea"><pre>
</div>
<p id="csvData"></p>
<button onClick="test()">Show Text</button>

<script>
function test (){
  var file = fileInput.files[0];
  var textType = /text.*/;
  var csvType = 'application/vnd.ms-excel';

  if (file.type.match(csvType)) {
    var reader = new FileReader();
    reader.onload = function(e) {
      document.getElementById("csvData").innerHTML=reader.result;
    }

    reader.readAsText(file);  
  } else {
    fileDisplayArea.innerText = "File not supported!";
  }
}
</script>

- Alex Newport

---

CSV的格式是什么样的？你期望得到什么返回值？ - adeneo

忘记在CSV文件中包含数据了。它的读取方式如下： - Alex Newport

测试，测试2。我希望能够在使用[1]时返回字符串测试2。 - Alex Newport

csvType 错误... csv 使用 text/csv 作为 MIME 类型。 - Endless

尝试使用text/csv格式，完全不起作用。只是返回不支持。 - Alex Newport

Answer 1

处理 csv 类型文件，需要执行以下两个步骤：

• 按行拆分
• 按列拆分

你可以使用 String.prototype.split 来实现这两个步骤。该方法将字符串拆分为数组。要按每个新行进行拆分，请使用正则表达式 /\n/。要按每个列进行拆分，请使用数据中使用的字符（可能是 , 或 ;）。

以下是一个示例：

// Create an array of arrays
// Remove first line
// Split by ","
function process(dataString) {
  var lines = dataString
    .split(/\n/)                     // Convert to one string per line
    .map(function(lineStr) {
        return lineStr.split(",");   // Convert each line to array (,)
    })
    .slice(1);                       // Discard header line
  
  return JSON.stringify(lines, null, 2);
}


function test() {
  var file = fileInput.files[0];
  var textType = /text.*/;
  var csvType = 'text/csv';
  if (file.type.match(csvType)) {
    var reader = new FileReader();
    reader.onload = function(e) {
      document.getElementById("csvData").innerHTML = process(reader.result);
    }

    reader.readAsText(file);
  } else {
    fileDisplayArea.innerText = "File not supported!";
  }
}

<div id="page-wrapper">
  <div>
    Select a text file:
    <input type="file" id="fileInput" />
  </div>
  <pre id="fileDisplayArea"></pre>
  <pre id="csvData"></pre>
  <button onClick="test()">Show Text</button>
</div>

将此数据片段存储为.csv文件进行测试：

ONE,TWO,THREE
1,2,3
2,4,6
3,6,9

另外需要注意的是：如果您的数据中有标题行（如上例），我强烈建议不要使用数组映射，而是使用对象。这将使您的代码更易于阅读和使用：

// Create an array of objects
// Use the first line as keys
// Split by ","
function process(dataString) {
  var lines = dataString
    .split(/\n/)
    .map(function(lineStr) {
        return lineStr.split(",");
    });
  
  var keys = lines[0];

  var objects = lines
    .slice(1)
    .map(function(arr) {
      return arr.reduce(function(obj, val, i) {
        obj[keys[i]] = val; 
        return obj;
      }, {});
    });
  
  return JSON.stringify(objects, null, 2);
}


function test() {
  var file = fileInput.files[0];
  var textType = /text.*/;
  var csvType = 'text/csv';
  if (file.type.match(csvType)) {
    var reader = new FileReader();
    reader.onload = function(e) {
      document.getElementById("csvData").innerHTML = process(reader.result);
    }

    reader.readAsText(file);
  } else {
    fileDisplayArea.innerText = "File not supported!";
  }
}

<div id="page-wrapper">
  <div>
    Select a text file:
    <input type="file" id="fileInput" />
  </div>
  <pre id="fileDisplayArea"></pre>
  <pre id="csvData"></pre>
  <button onClick="test()">Show Text</button>
</div>

- user3297291

---

当我选择CSV文件时，它不起作用，只返回“不支持”。在我提出问题时展示的代码上运行正常。 - Alex Newport

我试过了，它可以工作，但我认为你没有理解我想要它做什么。我只是想让它从CSV文件中获取数据并将其放入数组中。我不想打印数组中的数据到屏幕上，只想将其放入变量中的数组中，以便稍后用于其他函数，而不打印任何内容到屏幕上。 - Alex Newport

你期望我提供一个可以复制粘贴的代码片段，但我试图做的是向您展示如何解决问题。将其打印到屏幕上只是展示发生了什么的手段，而不是目标。如果您花时间仔细阅读答案，您会看到一个process方法，它可以创建每行的数组。在未来，当有人花时间帮助您时，请尝试投入一些时间去理解建议，而不仅仅是说“不起作用”。 - user3297291

简而言之：复制“process”方法，从其返回语句中删除“JSON.stringify”，然后您就可以开始了。 - user3297291

如果你在stackoverflow上链接了一个问题或者在fiddle/codepen上分享了一段代码，我很乐意帮助你解决问题。 - user3297291