Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Membaca Data Dari Fail CSV Menggunakan JavaScript?

Bagaimana untuk Membaca Data Dari Fail CSV Menggunakan JavaScript?

Barbara Streisand
Lepaskan: 2024-12-06 20:39:17
asal
495 orang telah melayarinya

How to Read Data From a CSV File Using JavaScript?

Bagaimana Cara Membaca Data Daripada Fail *.CSV Menggunakan JavaScript?

Fail CSV (Nilai Dipisahkan Koma) ialah format biasa untuk menyimpan data jadual. Untuk membaca data daripada fail CSV menggunakan JavaScript, kami boleh menggunakan perpustakaan luaran atau melaksanakan fungsi penghuraian kami sendiri.

Menggunakan Perpustakaan jQuery-CSV

jQuery-CSV ialah perpustakaan popular untuk menghuraikan data CSV dalam JavaScript. Ia menyediakan kaedah yang mudah, $.csv.toObjects(csv), yang secara automatik memetakan data CSV ke susunan objek.

// 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", ... },
  ...
];
Salin selepas log masuk

Fungsi Penghuraian Tersuai

Jika anda tidak mahu menggunakan perpustakaan luaran, anda boleh mencipta fungsi penghuraian anda sendiri. Berikut ialah contoh ringkas:

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;
}
Salin selepas log masuk

Contoh 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
Salin selepas log masuk

Output

[
  { heading1: "value1_1", heading2: "value2_1", ... },
  { heading1: "value1_2", heading2: "value2_2", ... },
  ...
];
Salin selepas log masuk

Nota: Contoh data CSV tidak mempunyai pemisah baris. Anda disyorkan untuk menambah pemisah baris untuk menjadikan data CSV sah sebelum menghuraikan.

Atas ialah kandungan terperinci Bagaimana untuk Membaca Data Dari Fail CSV Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan