在 JavaScript 中将 CSV 转换为 JSON

JavaScript导入csv

在 JavaScript 中使用第三方库 SheetJS 将 CSV 转换为 JSON 的步骤如下：

1. 获取 CSV 文件

首先，您需要使用 HTML 输入元素或 drag-and-drop API 来获取 CSV 文件。您可以在 HTML 页面中使用以下代码来创建文件输入元素：

<input type="file" id="csv-file" accept=".csv">

2. 读取 CSV 文件

获取 CSV 文件后，您需要使用 JavaScript 的 FileReader API 来读取文件内容。以下代码示例演示如何读取 CSV 文件：

const file = document.getElementById('csv-file').files[0];
const reader = new FileReader();

reader.onload = function() {
  const text = reader.result;
  // 将 text 添加 \ufeff 前缀（UTF-8 BOM 标识）
  const textWithBOM = '\ufeff' + text;

  // 将 CSV 文本转换为 JSON
  const json = sheetjs.parse(textWithBOM);

  // 处理 JSON 数据
};

reader.readAsText(file);

3. 将 CSV 转换为 JSON

使用 FileReader API 读取 CSV 文件后，您需要使用 SheetJS 库将其转换为 JSON 格式。SheetJS 提供了一个名为 parse() 的函数，可以将 CSV 文本转换为 JSON 对象。以下代码示例演示如何使用 parse() 函数：

const json = sheetjs.parse(textWithBOM);

4. 处理 JSON 数据

将 CSV 文件转换为 JSON 格式后，您就可以使用 JavaScript 来处理 JSON 数据。您可以使用 JSON.parse() 方法将 JSON 字符串转换为 JavaScript 对象，然后使用 JavaScript 的原生方法来操作 JSON 数据。以下代码示例演示如何使用 JSON.parse() 方法将 JSON 字符串转换为 JavaScript 对象：

const jsonObject = JSON.parse(json);

// 处理 JSON 数据

5. 显示结果

将 CSV 文件转换为 JSON 格式并处理 JSON 数据后，您就可以将结果显示在页面上。您可以使用 HTML 元素或第三方库来显示结果。以下代码示例演示如何使用 HTML 元素来显示结果：

<ul id="result">
  <!-- 使用 JavaScript 动态添加 li 元素 -->
</ul>

<script>
  // 获取 result 元素
  const result = document.getElementById('result');

  // 遍历 JSON 对象并创建 li 元素
  for (const key in jsonObject) {
    const value = jsonObject[key];

    const li = document.createElement('li');
    li.textContent = `${key}: ${value}`;

    result.appendChild(li);
  }
</script>

至此，您已经学会了如何在 JavaScript 中使用 SheetJS 库将 CSV 文件转换为 JSON 格式。