本文介绍在前端开发中将CSV格式数据转换为JSON字符串的两种常见方案。首先演示如何使用csvtojson第三方库，涵盖文件导入、字符串转换及自定义选项配置；随后提供不依赖任何库的原生JS实现思路，通过字符串分割与对象构建完成转换，帮助开发者根据项目需求选择合适方案。
前言
大家好，本文探讨前端开发中CSV格式内容转换为JSON字符串的方法，此需求在数据处理业务中十分常见，欢迎在评论区补充更优方案。
一、使用 csvtojson 第三方库
您可以使用 csvtojson 库在 JavaScript 中快速将 CSV 转换为 JSON 字符串：
index.js
import csvToJson from 'csvtojson';
const csvFilePath = 'data.csv';
const json = await csvToJson().fromFile(csvFilePath);
console.log(json);data.csv 文件
例如这样的 data.csv 文件，其内容如下：
color,maxSpeed,age
"red",120,2
"blue",100,3
"green",130,2最终生成的 JSON 数组字符串内容如下：
[
{ color: 'red', maxSpeed: '120', age: '2' },
{ color: 'blue', maxSpeed: '100', age: '3' },
{ color: 'green', maxSpeed: '130', age: '2' }
]安装 csvtojson
在使用 csvtojson 之前，您需要将其安装到我们的项目中。您可以使用 NPM 或 Yarn CLI 执行此操作。
npm i csvtojson
# Yarn
yarn add csvtojson安装后，将其引入到你的项目中，如下所示：
import csvToJson from 'csvtojson';
// CommonJS
const csvToJson = require('csvtojson');通过 fromFile() 方法，导入CSV文件
我们调用 csvtojson 模块的默认导出函数来创建将转换 CSV 的对象。这个对象有一堆方法，每个方法都以某种方式与 CSV 到 JSON 的转换相关，fromFile() 就是其中之一。
它接受要转换的 CSV 文件的名称，并返回一个 Promise，因为转换是一个异步过程。Promise 将使用生成的 JSON 字符串进行解析。
直接将 CSV 字符串转换为 JSON，fromString()
要直接从 CSV 数据字符串而不是文件转换，您可以使用转换对象的异步 fromString() 方法代替：
index.js
import csvToJson from 'csvtojson';
const csv = `"First Name","Last Name","Age"
"Russell","Castillo",23
"Christy","Harper",35
"Eleanor","Mark",26`;
const json = await csvToJson().fromString(csv);
console.log(json);输出
[ { 'First Name': 'Russell', 'Last Name': 'Castillo', Age: '23' }, { 'First Name': 'Christy', 'Last Name': 'Harper', Age: '35' }, { 'First Name': 'Eleanor', 'Last Name': 'Mark', Age: '26' } ]
自定义 CSV 到 JSON 的转换
csvtojson 的默认导出函数接受一个对象，用于指定选项，可以自定义转换过程。
其中一个选项是 header，这是一个用于指定 CSV 数据中的标题的数组，可以将其替换成更易读的别名。
index.js
import csvToJson from 'csvtojson';
const csv = `"First Name","Last Name","Age"
"Russell","Castillo",23
"Christy","Harper",35
"Eleanor","Mark",26`;
const json = await csvToJson({
headers: ['firstName', 'lastName', 'age'],
}).fromString(csv);
console.log(json);输出 ：
[ { firstName: 'Russell', lastName: 'Castillo', age: '23' }, { firstName: 'Christy', lastName: 'Harper', age: '35' }, { firstName: 'Eleanor', lastName: 'Mark', age: '26' } ]
另一个是delimeter，用来表示分隔列的字符：
import csvToJson from 'csvtojson';
const csv = `"First Name"|"Last Name"|"Age"
"Russell"|"Castillo"|23
"Christy"|"Harper"|35
"Eleanor"|"Mark"|26`;
const json = await csvToJson({
headers: ['firstName', 'lastName', 'age'],
delimiter: '|',
}).fromString(csv);输出
[ { firstName: 'Russell', lastName: 'Castillo', age: '23' }, { firstName: 'Christy', lastName: 'Harper', age: '35' }, { firstName: 'Eleanor', lastName: 'Mark', age: '26' } ]
我们还可以使用 ignoreColumns 属性，一个使用正则表达式示忽略某些列的选项。
import csvToJson from 'csvtojson';
const csv = `"First Name"|"Last Name"|"Age"
"Russell"|"Castillo"|23
"Christy"|"Harper"|35
"Eleanor"|"Mark"|26`;
const json = await csvToJson({
headers: ['firstName', 'lastName', 'age'],
delimiter: '|',
ignoreColumns: /lastName/,
}).fromString(csv);
console.log(json);将 CSV 转换为行数组
通过将输出选项设置为“csv”，我们可以生成一个数组列表，其中每个数组代表一行，包含该行所有列的值。
如下所示：
index.js
import csvToJson from 'csvtojson';
const csv = `color,maxSpeed,age
"red",120,2
"blue",100,3
"green",130,2`;
const json = await csvToJson({
output: 'csv',
}).fromString(csv);
console.log(json);输出
[ [ 'red', '120', '2' ], [ 'blue', '100', '3' ], [ 'green', '130', '2' ] ]
二、使用原生的JS处理 CSV 转 JSON
我们也可以在不使用任何第三方库的情况下将 CSV 转换为 JSON。
index.js
function csvToJson(csv) {
// \n or \r\n depending on the EOL sequence
const lines = csv.split('\n');
const delimeter = ',';
const result = [];
const headers = lines[0].split(delimeter);
for (const line of lines) {
const obj = {};
const row = line.split(delimeter);
for (let i = 0; i < headers.length; i++) {
const header = headers[i];
obj[header] = row[i];
}
result.push(obj);
}
// Prettify output
return JSON.stringify(result, null, 2);
}
const csv = `color,maxSpeed,age
"red",120,2
"blue",100,3
"green",130,2`;
const json = csvToJson(csv);
console.log(json);输出
[ { "color": "color", "maxSpeed": "maxSpeed", "age": "age" }, { "color": "\"red\"", "maxSpeed": "120", "age": "2" }, { "color": "\"blue\"", "maxSpeed": "100", "age": "3" }, { "color": "\"green\"", "maxSpeed": "130", "age": "2" } ]
您可以完善上面的代码处理更为复杂的 CSV 数据。
结束
今天的分享就到这里，如何将 CSV 转换为 JSON 字符串，你学会了吗？
到此这篇关于JS小知识之如何将CSV转换为JSON字符串的文章就介绍到这了,更多相关JS将CSV转换JSON字符串内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
原文： https://medium.com/javascript-in-plain-english/javascript-convert-csv-to-json-91dbbd4ae436
作者 ：Coding Beauty
非直接翻译，有自行改编和添加部分。