JS小知识之如何将CSV转换为JSON字符串

更新时间：2023年06月08日 14:46:18 作者：前端达人

CSV文件一般是以逗号为分隔值的文件(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据(数字和文本),下面这篇文章主要给大家介绍了JS小知识之如何将CSV转换为JSON字符串的相关资料,需要的朋友可以参考下

前言

大家好，今天和大家聊一聊，在前端开发中，我们如何将 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

非直接翻译，有自行改编和添加部分。

您可能感兴趣的文章:

JavaScript实现ArrayBuffer到Base64的转换
本文探讨了在 JavaScript 中将 ArrayBuffer 转换为 Base64 字符串时遇到的栈溢出问题,并提供了几种实用的解决方案,我们将通过生动的比喻来解释相关概念,比较不同方法的性能和兼容性,最终提供一个平衡而实用的方法,需要的朋友可以参考下
2024-10-10
前端JS压缩图片的原理详解(附源码)
上传图片/视频/文件是我们经常会遇到的问题,但是一旦图片过大就会导致不好的操作体验,下面这篇文章主要给大家介绍了关于前端JS压缩图片原理及实现的相关资料,需要的朋友可以参考下
2024-06-06
js 判断一个数字是不是2的n次方幂的实例
下面小编就为大家分享一篇js 判断一个数字是不是2的n次方幂的实例，具有很好的参考价值，希望对大家有所帮助
2017-11-11
JS正则表达式替换字符串replace()方法实例代码
正则表达式是用于匹配字符串中字符组合的模式,在js中正则表达式是对象,这篇文章主要给大家介绍了关于JS正则表达式替换字符串replace()方法的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
Omi v1.0.2发布正式支持传递javascript表达式
这篇文章主要介绍了Omi v1.0.2发布正式支持传递javascript表达式,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-03-03
JavaScript词法作用域与调用对象深入理解
关于 Javascript 的函数作用域、调用对象和闭包之间的关系很微妙，关于它们的文章已经有很多，本文做了一些总结，需要的朋友可以参考下
2012-11-11
Google 静态地图API实现代码
Google 静态地图文档说的很详细，这里就不在啰嗦了！
2010-11-11
JS面向对象编程基础篇（一）对象和构造函数实例详解
这篇文章主要介绍了JS面向对象编程对象和构造函数,结合实例形式详细分析了JS面向对象编程对象和构造函数具体概念、原理、使用方法及操作注意事项,需要的朋友可以参考下
2020-03-03
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
这篇文章主要介绍了BootStrap与validator 使用笔记(JAVA SpringMVC实现)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-09-09
Javascript类型转换详解
这篇文章主要为大家介绍了Javascript类型转换，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-01-01