JavaScript - 将 CSV 数据解析为数组_html+js读取csv存为数组

作者：你好赵伟 | 2024-05-03 10:25:28

踩

html+js读取csv存为数组

本教程将帮助您了解如何使用 HTML<input>元素接收 CSV 文件并将内容解析为 JavaScript 数组。

要将 CSV 数据转换或解析为 .csv文件array，您需要使用 JavaScript 的FileReader类，该类包含一个名为的方法，该方法readAsText()将读取 CSV 文件内容并将结果解析为string文本。

拥有后string，您可以创建自定义函数将字符串转换为array.

例如，具有以下内容的 CSV 文件：


name,role,country
Sarene,Help Desk Operator,Thailand
Olvan,Nurse Practicioner,China
Janos,Cost Accountant,China
Dolph,Assistant Manager,China
Ariela,Database Administrator I,Azerbaijan
Lane,Environmental Tech,Indonesia
Griselda,Senior Quality Engineer,Portugal
Manda,Physical Therapy Assistant,Brazil
Leslie,Information Systems Manager,Japan
Aleen,Cost Accountant,Canada

将转换为以下 JavaScript 数组：


const arr = [
  { name: "Sarene", role: "Help Desk Operator", country: "Thailand" },
  { name: "Olvan", role: "Nurse Practicioner", country: "China" },
  { name: "Janos", role: "Cost Accountant", country: "China" },
  { name: "Dolph", role: "Assistant Manager", country: "China" },
  { name: "Ariela", role: "Database Administrator I", country: "Azerbaijan" },
  { name: "Lane", role: "Environmental Tech", country: "Indonesia" },
  { name: "Griselda", role: "Senior Quality Engineer", country: "Portugal" },
  { name: "Manda", role: "Physical Therapy Assistant", country: "Brazil" },
  { name: "Leslie", role: "Information Systems Manager", country: "Japan" },
  { name: "Aleen", role: "Cost Accountant", country: "Canada" },
];

本教程的代码在此处共享。

首先，让我们看看如何使用 HTML 元素从浏览器接受 CSV 文件。

您需要有一个使用<input>元素接受 CSV 文件的 HTML 表单。这是创建一个的简单方法：


<body>
  <form id="myForm">
    <input type="file" id="csvFile" accept=".csv" />
    <br />
    <input type="submit" value="Submit" />
  </form>
</body>

现在您已经准备好 HTML 元素，是时候编写一个脚本来监听表单的 submit事件了。

就在<form>标签的正下方，写一个<script>标签，内容如下：


<script>
  const myForm = document.getElementById("myForm");
  const csvFile = document.getElementById("csvFile");
 
  myForm.addEventListener("submit", function (e) {
    e.preventDefault();
    console.log("Form submitted");
  });
</script>

首先，您需要e.preventDefault()代码来阻止浏览器的默认提交行为，该行为将刷新页面。之后，您可以编写代码以submit在用户触发事件时执行。

您需要使用 JavaScript 获取上传的 CSV 文件，如下所示：


const myForm = document.getElementById("myForm");
const csvFile = document.getElementById("csvFile");
 
myForm.addEventListener("submit", function (e) {
  e.preventDefault();
  const input = csvFile.files[0];
});

然后，您需要FileReader使用以下代码创建一个新的类实例：

const reader = new FileReader();

onload首先，您需要使用事件处理程序定义读取操作完成后会发生什么。读取操作的结果传递给event.target.result属性，如下所示：


const reader = new FileReader();
reader.onload = function (event) {
  console.log(event.target.result); // the CSV content as string
};

然后您可以指示reader读取特定文件，如下所示：

reader.readAsText(file);

现在您已经了解了 JavaScriptFileReader的工作原理，让我们将代码放在一起来读取上传的 CSV 文件。完整的 HTML 页面代码如下：


<head> </head>
<body>
  <form id="myForm">
    <input type="file" id="csvFile" accept=".csv" />
    <br />
    <input type="submit" value="Submit" />
  </form>
  <script>
    const myForm = document.getElementById("myForm");
    const csvFile = document.getElementById("csvFile");
 
    myForm.addEventListener("submit", function (e) {
      e.preventDefault();
      const input = csvFile.files[0];
      const reader = new FileReader();
 
      reader.onload = function (e) {
        const text = e.target.result;
        document.write(text);
      };
 
      reader.readAsText(input);
    });
  </script>
</body>

您可以使用GitHub 存储库中提供的mock_data.csv文件测试代码。

您将在浏览器上看到呈现的 CSV 内容。这意味着<script>已经能够毫无问题地将 CSV 文件内容作为字符串读取。接下来，您只需将此字符串解析为对象数组。

将 CSV 字符串解析为数组

要将 CSV 字符串解析为数组，您需要编写一个代码，将 CSV 标题和 CSV 行之间的字符串分开。然后，您需要将每一行作为一个对象元素，使用标题作为属性名称，将行作为值。

首先，创建一个csvToArray()接受两个参数的新函数：

一串 CSV 内容
CSV 内容的分隔符（或分隔符），通常为逗号,

这是函数语法：

function csvToArray(str, delimiter = ",") {}

在此函数中，您需要创建两个名为headers和的数组rows。将headers包含 CSV 文件的第一行，而rows将包含从第二行到最后一行的所有值。

这可以通过首先对字符串进行切片，然后使用该split()方法将字符串拆分为数组来实现。

这是执行此操作的代码：


function csvToArray(str, delimiter = ",") {
  // slice from start of text to the first \n index
  // use split to create an array from string by delimiter
  const headers = str.slice(0, str.indexOf("\n")).split(delimiter);
 
  // slice from \n index + 1 to the end of the text
  // use split to create an array of each csv value row
  const rows = str.slice(str.indexOf("\n") + 1).split("\n");
}

一旦你有了headers和rows，就该创建对象数组了。首先，您需要将rows数组和split()每一行的值映射到一个数组中。

然后，您需要在数组上使用该reduce()方法headers，返回一个对象，每个对象header作为属性名称，并且数据来自values与属性值相同的索引。

最后，您只需将每个映射的行作为数组元素返回。完整的功能代码如下：


function csvToArray(str, delimiter = ",") {
  // slice from start of text to the first \n index
  // use split to create an array from string by delimiter
  const headers = str.slice(0, str.indexOf("\n")).split(delimiter);
 
  // slice from \n index + 1 to the end of the text
  // use split to create an array of each csv value row
  const rows = str.slice(str.indexOf("\n") + 1).split("\n");
 
  // Map the rows
  // split values from each row into an array
  // use headers.reduce to create an object
  // object properties derived from headers:values
  // the object passed as an element of the array
  const arr = rows.map(function (row) {
    const values = row.split(delimiter);
    const el = headers.reduce(function (object, header, index) {
      object[header] = values[index];
      return object;
    }, {});
    return el;
  });
 
  // return the array
  return arr;
}

这样，您的csvToArray()功能就完成了。您只需要从onload事件中调用函数：


reader.onload = function (e) {
  const text = e.target.result;
  const data = csvToArray(text);
  document.write(JSON.stringify(data));
};

您可以在GitHub 存储库中查看完整的 HTML 代码

结论

您刚刚学习了如何从通过 HTML<input>表单上传的 CSV 文件创建 JavaScript 数组。在其他时候，您可能希望将从 API 或远程 URL 获取的 CSV 数组解析为数组。

根据您的请求返回的数据，您可以FileReader先使用 CSV 内容作为字符串读取，或者如果您已经从 API 接收到字符串，则只需将字符串解析为数组。

另外，请注意delimiter您的 CSV 文件。该csvToArray()函数已经有一个合理的默认值delimiter，即逗号，但您可以使用其他符号。如果是这样，您可以将 rightdelimiter作为第二个参数传递给函数调用。

随意修改代码示例以满足您的要求

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/529134