js如何读取csv内容拼接成json

下面我将为您详细讲解 JavaScript 如何读取 CSV 内容拼接成 JSON 的完整攻略。

步骤

1. 初始化

首先，你需要定义一个变量，用来保存 CSV 文件的内容：

let csvData = '';

2. 发送请求

使用 XMLHttpRequest 对象来发送请求：

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        csvData = this.responseText;
        processData(csvData);
    }
};
xhr.open('GET', 'data.csv', true);
xhr.send();

在此，我们定义一个 XMLHttpRequest 对象并设置其 onreadystatechange 的回调函数。当 readyState 变为 4（已完成）并 status 变为 200（成功）时，表示请求完成。我们将返回的 CSV 数据设置给之前定义的 csvData 变量，并立即调用 processData 函数。

3. 处理数据

processData 函数将处理由 XMLHttpRequest 返回的 CSV 数据并将其拼接成 JSON 格式。我们将使用 papaparse 库进行 CSV 解析和处理：

function processData(csv) {
    let results = Papa.parse(csv, { header: true });
    let jsonData = JSON.stringify({ data: results.data });
    console.log(jsonData);
}

此函数将 csv 文本解析为 CSV 数据。在这里，我们用 { header: true } 选项定义了 CSV 格式，并将其解析为一个带标题的二维数组 results.data。我们使用 JSON.stringify() 方法将这个二维数组转换为 JSON 字符串，并在控制台上打印出来。

4.完整代码

let csvData = '';

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        csvData = this.responseText;
        processData(csvData);
    }
};
xhr.open('GET', 'data.csv', true);
xhr.send();

function processData(csv) {
    let results = Papa.parse(csv, { header: true });
    let jsonData = JSON.stringify({ data: results.data });
    console.log(jsonData);
}

示例

示例 1

以下是一个 CSV 文件示例：

name,age,gender
Alice,25,Female
Bob,30,Male
Charlie,35,Male

将其读入并转换为 JSON 格式：

{
    "data": [
        { "name": "Alice", "age": "25", "gender": "Female" },
        { "name": "Bob", "age": "30", "gender": "Male" },
        { "name": "Charlie", "age": "35", "gender": "Male" }
    ]
}

示例 2

以下是另一个 CSV 文件示例：

country,population,area
China,1400,9609
India,1350,3287
United States,328,9834