首頁 >web前端 >js教程 >如何使用 JavaScript 從 CSV 檔案讀取資料?

如何使用 JavaScript 從 CSV 檔案讀取資料?

Barbara Streisand
Barbara Streisand原創
2024-12-06 20:39:17539瀏覽

How to Read Data From a CSV File Using JavaScript?

如何使用 JavaScript 從 *.CSV 檔案讀取資料?

CSV(逗號分隔值)檔案是儲存表格資料的常見格式。要使用 JavaScript 從 CSV 檔案讀取數據,我們可以使用外部程式庫或實作我們自己的解析函數。

使用 jQuery-CSV 函式庫

jQuery-CSV 是一個用於在 JavaScript 中解析 CSV 資料的流行函式庫。它提供了一個方便的方法 $.csv.toObjects(csv),可以自動將 CSV 資料對應到物件陣列。

// Assuming you've included jQuery-CSV in your HTML
var data = $.csv.toObjects(csv);

// Output
[
  { heading1: "value1_1", heading2: "value2_1", ... },
  { heading1: "value1_2", heading2: "value2_2", ... },
  ...
];

自訂解析函數

如果您不想使用外部函式庫,您可以建立自己的解析函數。下面是一個簡化示例:

function parseCSV(csv) {
  // Split the CSV into lines
  var lines = csv.split("\n");

  // Extract the header line
  var headers = lines[0].split(",");

  // Remove the header line from the CSV
  lines.shift();

  // Loop through the remaining lines and create objects
  var data = [];
  for (var i = 0; i < lines.length; i++) {
    // Split the line into values
    var values = lines[i].split(",");

    // Create an object using the headers as keys
    data.push(
      Object.fromEntries(
        headers.map((h, idx) => [h, values[idx]])
      )
    );
  }

  // Return the parsed data
  return data;
}

CSV 數據示例

heading1,heading2,heading3,heading4,heading5
value1_1,value2_1,value3_1,value4_1,value5_1
value1_2,value2_2,value3_2,value4_2,value5_2

輸出

[
  { heading1: "value1_1", heading2: "value2_1", ... },
  { heading1: "value1_2", heading2: "value2_2", ... },
  ...
];

注意: 範例CSV 資料沒有行休息。建議在解析之前添加換行符以使資料有效 CSV。

以上是如何使用 JavaScript 從 CSV 檔案讀取資料?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn