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

Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với cả thế giới… Nếu bạn cần câu trả lời gấp, vui lòng xem danh sách các trang web của tôi để được trợ giúp về lập trình

 

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,joa@doe.com,123456
Job Doe,job@doe.com,234567
Joe Doe,joe@doe.com,345678
Joi Doe,joi@doe.com,456789
Jon Doe,jon@doe.com,987654
"Joy, Doe",joy@doe.com,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,joa@doe.com,123456
Job Doe,job@doe.com,234567
Joe Doe,joe@doe.com,345678
Joi Doe,joi@doe.com,456789
Jon Doe,jon@doe.com,987654
"Joy, Doe",joy@doe.com,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

________số 8_______

 

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