前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS小知识,如何将 CSV 转换为 JSON 字符串

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

作者头像
前端达人
发布2023-02-17 14:44:27
7.5K0
发布2023-02-17 14:44:27
举报
文章被收录于专栏:前端达人前端达人
大家好,今天和大家聊一聊,在前端开发中,我们如何将 CSV 格式的内容转换成 JSON 字符串,这个需求在我们处理数据的业务需求中十分常见,你是如何处理的呢,如果你有更好的方法欢迎在评论区补充。

一、使用 csvtojson 第三方库

您可以使用 csvtojson 库在 JavaScript 中快速将 CSV 转换为 JSON 字符串:

index.js

代码语言:javascript
复制
import csvToJson from 'csvtojson';
const csvFilePath = 'data.csv';
const json = await csvToJson().fromFile(csvFilePath);
console.log(json);

data.csv 文件

例如这样的 data.csv 文件,其内容如下:

代码语言:javascript
复制
color,maxSpeed,age
"red",120,2
"blue",100,3
"green",130,2

最终生成的 JSON 数组字符串内容如下:

代码语言:javascript
复制
[
  { color: 'red', maxSpeed: '120', age: '2' },
  { color: 'blue', maxSpeed: '100', age: '3' },
  { color: 'green', maxSpeed: '130', age: '2' }
]

安装 csvtojson

在使用 csvtojson 之前,您需要将其安装到我们的项目中。您可以使用 NPM 或 Yarn CLI 执行此操作。

代码语言:javascript
复制
npm i csvtojson

# Yarn
yarn add csvtojson

安装后,将其引入到你的项目中,如下所示:

代码语言:javascript
复制
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

代码语言:javascript
复制
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);

输出

代码语言:javascript
复制
[
  { '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

代码语言:javascript
复制
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);

输出 :

代码语言:javascript
复制
[
  { firstName: 'Russell', lastName: 'Castillo', age: '23' },
  { firstName: 'Christy', lastName: 'Harper', age: '35' },
  { firstName: 'Eleanor', lastName: 'Mark', age: '26' }
]

另一个是delimeter,用来表示分隔列的字符:

代码语言:javascript
复制
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);

输出

代码语言:javascript
复制
[
  { firstName: 'Russell', lastName: 'Castillo', age: '23' },
  { firstName: 'Christy', lastName: 'Harper', age: '35' },
  { firstName: 'Eleanor', lastName: 'Mark', age: '26' }
]

我们还可以使用 ignoreColumns 属性,一个使用正则表达式示忽略某些列的选项。

代码语言:javascript
复制
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

代码语言:javascript
复制
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);

输出

代码语言:javascript
复制
[
  [ 'red', '120', '2' ],
  [ 'blue', '100', '3' ],
  [ 'green', '130', '2' ]
]

二、使用原生的JS处理 CSV 转 JSON

我们也可以在不使用任何第三方库的情况下将 CSV 转换为 JSON。

index.js

代码语言:javascript
复制
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);

输出

代码语言:javascript
复制
[
  {
    "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 字符串,你学会了吗?希望今天的分享能够帮助到你,后续我会持续输出更多内容,敬请期待。

原文: https://medium.com/javascript-in-plain-english/javascript-convert-csv-to-json-91dbbd4ae436 作者 :Coding Beauty 非直接翻译,有自行改编和添加部分。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2023-02-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端达人 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、使用 csvtojson 第三方库
  • 安装 csvtojson
  • 通过 fromFile() 方法,导入CSV文件
  • 直接将 CSV 字符串转换为 JSON,fromString()
  • 自定义 CSV 到 JSON 的转换
  • 将 CSV 转换为行数组
  • 二、使用原生的JS处理 CSV 转 JSON
  • 结束
相关产品与服务
文件存储
文件存储(Cloud File Storage,CFS)为您提供安全可靠、可扩展的共享文件存储服务。文件存储可与腾讯云服务器、容器服务、批量计算等服务搭配使用,为多个计算节点提供容量和性能可弹性扩展的高性能共享存储。腾讯云文件存储的管理界面简单、易使用,可实现对现有应用的无缝集成;按实际用量付费,为您节约成本,简化 IT 运维工作。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档