JavaScript có thể đọc tệp CSV không?

Chào mừng bạn đến với hướng dẫn về cách đọc và phân tích tệp CSV thành một mảng hoặc đối tượng trong Javascript. Bạn cần đọc tệp CSV trong dự án của mình? . Không yêu cầu tập lệnh phía máy chủ – Đọc tiếp để biết các ví dụ

ⓘ Tôi đã bao gồm một tệp zip chứa tất cả mã nguồn khi bắt đầu hướng dẫn này, vì vậy bạn không cần phải sao chép-dán mọi thứ… Hoặc nếu bạn chỉ muốn đi sâu vào

TLDR – TRANG TRÌNH BÀY NHANH

Tải xuống & Ghi chú

TẢI XUỐNG & LƯU Ý

Đầu tiên, đây là liên kết tải xuống mã ví dụ như đã hứa

GHI CHÚ NHANH

MÃ VÍ DỤ TẢI XUỐNG

Nhấp vào đây để tải xuống tất cả mã nguồn ví dụ, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên mã nguồn đó hoặc sử dụng nó trong dự án của riêng bạn

ĐỌC và PHÂN TÍCH CSV

Được rồi, bây giờ chúng ta hãy đi vào các ví dụ về cách đọc và phân tích tệp CSV thành một mảng/đối tượng trong Javascript

VÍ DỤ 1) PHÂN TÍCH CSV THÀNH MỘT Mảng

1A) CSV GIẢ

1-hình nộm. csv

Joa Doe,[email protected],123456
Job Doe,[email protected],234567
Joe Doe,[email protected],345678
Joi Doe,[email protected],456789
Jon Doe,[email protected],987654
"Joy, Doe",[email protected],124578

Đối với ví dụ này, chúng tôi sẽ sử dụng danh sách người dùng giả này. Đối với những người không quen biết, các tệp CSV không gì khác hơn là “văn bản thuần túy có định dạng”

• , Dấu phẩy được dùng để biểu thị các cột
• \r\n Các dòng mới được sử dụng để biểu thị các hàng
• "Joy, Doe" Nếu một ô chứa dấu phẩy, nó sẽ được đặt trong dấu ngoặc kép

1B) HTML

1-csv-mảng. html

1. Chúng tôi sẽ sử dụng một thư viện nhẹ có tên là csv. js để phân tích cú pháp CSV thành một mảng
2. Trường nhập tệp HTML để chọn tệp CSV

1C) BẢN JAVASCRIPT

1-csv-mảng. js

window.onload = () => {
  // (A) FILE PICKER
  let picker = document.getElementById("demoA");
 
  // (B) READ CSV FILE
  picker.onchange = () => {
    // (B1) GET SELECTED CSV FILE
    let selected = picker.files[0];
 
    // (B2) READ CSV INTO ARRAY
    let reader = new FileReader();
    reader.addEventListener("loadend", () => {
      // (B2-1) PARSE INTO ARRAY
      let csv = CSV.parse(reader.result);
 
      // (B2-2) LOOP THROUGH ROWS & COLS
      for (let row of csv) {
        for (col of row) {
          console.log(col);
        }
      }
 
      // (B2-3) DONE
      // let data = JSON.stringify(data);
      // picker.value = "";
    });
    reader.readAsText(selected);
  };
};

Điều này sẽ khá tự giải thích

• (A) Lấy trường chọn tệp HTML –
  0
• (B) Sử dụng đối tượng
  1 để đọc tệp CSV đã chọn
• (B2) Nhưng tất nhiên,
  2 sẽ trả về toàn bộ tệp CSV dưới dạng chuỗi. Chúng ta sẽ phải sử dụng thư viện để phân tích nó thành một mảng –
  3

VÍ DỤ 2) PHÂN TÍCH CSV THÀNH MỘT ĐỐI TƯỢNG

2A) CSV GIẢ

2-hình nộm. csv

Name,Email,Number
Joa Doe,[email protected],123456
Job Doe,[email protected],234567
Joe Doe,[email protected],345678
Joi Doe,[email protected],456789
Jon Doe,[email protected],987654
"Joy, Doe",[email protected],124578

Không cần tìm đâu xa, đây là ví dụ tương tự. Nó chỉ có một hàng tiêu đề bổ sung mà chúng ta sẽ sử dụng làm khóa của đối tượng

2B) HTML

2-csv-đối tượng. html

Một lần nữa, đó là "thư viện tải" và "bộ chọn tệp HTML" giống nhau

2C) BẢN JAVASCRIPT

2-csv-đối tượng. js

window.onload = () => {
  // (A) FILE PICKER
  let picker = document.getElementById("demoB");
 
  // (B) READ CSV FILE
  picker.onchange = () => {
    // (B1) GET SELECTED CSV FILE
    let selected = picker.files[0];
 
    // (B2) READ CSV INTO ARRAY
    let reader = new FileReader();
    reader.addEventListener("loadend", () => {
      // (B2-1) PARSE INTO ARRAY
      let csv = CSV.parse(reader.result);
 
      // (B2-2) REARRANGE KEYS & VALUES
      let data = {};
      for (let [col,key] of Object.entries(csv[0])) {
        data[key] = [];
        for (let row=1; row

Tôi sẽ không giải thích từng dòng một, nhưng về cơ bản nó giống như ví dụ trước

• (A & B) Lấy tệp CSV đã chọn và đọc nó
• (B2-1) Trước tiên, hãy phân tích cú pháp chuỗi CSV thành một mảng
• (B2-2) Lặp qua mảng và sắp xếp lại nó thành một đối tượng