如何在JavaScript中將CSV檔案轉換為JSON？

---

CSV（逗號分隔值）檔案格式非常適合許多儲存表格資料的應用程式，而JSON（JavaScript物件表示法）在Web應用程式中很流行。因為它易於理解，並且與JavaScript的協作需要大量工作才能將資料從CSV轉換為JSON格式。特別是對於在JavaScript中處理資料的情況，本文探討了不同的技術。使用語法將CSV檔案轉換為JSON格式的JavaScript程式碼，以及一些示例的解釋。

理解CSV和JSON格式

• CSV： 透過逗號分隔行來儲存資料，使CSV非常易於使用。每一行都用換行符表示，清晰地描繪了給定行中用逗號分隔的值集。

name,age,city
Pankaj,20,Surat
Neeraj,18,Raipur
    

• JSON： JSON 將資料表示為物件的陣列，每個物件都包含鍵值對。

[
  { "name": "Pankaj", "age": 20, "city": "Surat" },
  { "name": "Neeraj", "age": 18, "city": "Raipur" }
]
    

將CSV檔案轉換為JSON的方法

• 使用JavaScript的split和map方法
• 使用正則表示式進行解析
• 使用外部庫（例如，PapaParse）

使用JavaScript的split和map方法

此方法使用split() 分隔行和值，並將它們轉換為物件陣列。

• 步驟1：將CSV檔案內容讀取為字串。
• 步驟2：按行分割內容。
• 步驟3：使用第一行作為標題。
• 步驟4：使用標題作為鍵將後續的每一行對映到一個物件。

示例程式碼

function csvToJson(csv) {
  const lines = csv.trim().split('
');
  const headers = lines[0].split(',');

  return lines.slice(1).map(line => {
    const values = line.split(',');
    return headers.reduce((obj, header, index) => {
      obj[header] = values[index];
      return obj;
    }, {});
  });
}

// Example usage
const csvData = `name,age,city
Pankaj,20,Surat
Neeraj,18,Raipur`;
const jsonResult = csvToJson(csvData);
console.log(JSON.stringify(jsonResult, null, 2));

輸出

[
  { "name": "Pankaj", "age": 20, "city": "Surat" },
  { "name": "Neeraj", "age": 18, "city": "Raipur" }
]

使用正則表示式進行解析

但是，對於更復雜的CSV檔案（例如，使用引號括住值或值中包含逗號的檔案），可以使用正則表示式來處理解析。這種稱為解析的方法使用正則表示式來正確分割CSV值。

示例程式碼

function csvToJson(csv) {
  const lines = csv.trim().split('
');
  const headers = lines[0].split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/);

  return lines.slice(1).map(line => {
    const values = line.split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/);
    return headers.reduce((obj, header, index) => {
      obj[header] = values[index].replace(/^"|"$/g, ''); // Remove surrounding quotes
      return obj;
    }, {});
  });
}

// Example usage
const csvData = `name,age,city
Pankaj,20,Surat
Neeraj,18,Raipur`;
const jsonResult = csvToJson(csvData);
console.log(JSON.stringify(jsonResult, null, 2));

輸出

[
  { "name": "Pankaj", "age": 20, "city": "Surat" },
  { "name": "Neeraj", "age": 18, "city": "Raipur" }
]

使用外部庫（例如，PapaParse）

示例程式碼

PapaParse 是一個已知的庫，它支援包含逗號分隔值以及嵌入式逗號、引號和換行符等複雜情況的格式。這簡化了流程並提高了大型檔案的效能。

• 步驟1：安裝PapaParse

npm install papaparse

• 步驟2：使用Papa.parse將CSV轉換為JSON。

示例程式碼

const Papa = require('papaparse');

function parseCsvWithPapa(csv) {
  const result = Papa.parse(csv, { header: true });
  return result.data;
}

// Example usage
const csvData = `name,age,city
Pankaj,20,Surat
Neeraj,18,Raipur`;
const jsonResult = parseCsvWithPapa(csvData);
console.log(JSON.stringify(jsonResult, null, 2));

輸出

[
  { "name": "Pankaj", "age": 20, "city": "Surat" },
  { "name": "Neeraj", "age": 18, "city": "Raipur" }
]