在 JavaScript 中將 CSV 載入到陣列

1. 使用 jQuery-csv 外掛將 CSV 載入到 JavaScript 中的陣列
2. 在 JavaScript 中建立一個使用者定義的函式以將 CSV 載入到陣列

CSV 是一個文字檔案。它使用逗號作為分隔符來分隔不同的值。

在本文中，我們將使用 JavaScript 將 CSV 檔案載入到陣列中。

使用 jQuery-csv 外掛將 CSV 載入到 JavaScript 中的陣列

jQuery 庫提供了 jquery-csv 外掛，可以將 CSV 檔案讀入陣列。

例如，

array = $.csv.toArrays(csv, {
  delimiter: '\'',
  separator: ';',  // Sets a custom field separator character
});

我們可以使用 delimiter 和 separator 屬性設定自定義分隔符和分隔符。最終結果儲存在一個陣列中。

在 JavaScript 中建立一個使用者定義的函式以將 CSV 載入到陣列

我們將使用 FileReader 類將所需的 CSV 檔案作為字串讀取。要將其儲存到陣列中，我們將使用 slice()、split() 和 map() 函式。slice() 函式有助於返回一個新陣列，其中包含實現它的舊陣列的一部分。map() 函式通過提供為陣列中的每個元素提供的函式來幫助返回一個新陣列。split() 函式使用指定的分隔符幫助將字串拆分為陣列形式的子字串。

請參考下面的程式碼。

function csv_To_Array(str, delimiter = ',') {
  const header_cols = str.slice(0, str.indexOf('\n')).split(delimiter);
  const row_data = str.slice(str.indexOf('\n') + 1).split('\n');
  const arr = row_data.map(function(row) {
    const values = row.split(delimiter);
    const el = header_cols.reduce(function(object, header, index) {
      object[header] = values[index];
      return object;
    }, {});
    return el;
  });

  // return the array
  return arr;
}

我們假設檔案的第一行包含標題。slice() 函式從開頭開始到第一個 \n 索引，並使用 split() 函式根據分隔符將字串拆分為陣列。同樣，我們使用這兩個函式來儲存行。接下來，我們將行對映到陣列。我們使用 map() 函式將行的每個值拆分為一個陣列。reduce() 函式與標題一起使用以建立一個物件，將行的值與必要的標題一起新增，並返回此物件。這個物件被新增到陣列中。最後，我們返回最終的陣列，它是一個物件陣列。