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 字符串，你學會了嗎？
責任編輯：姜華
來源：
今日頭條
