Làm cách nào để đọc tệp CSV bằng JavaScript bằng FileReader?

Tệp CSV là tệp văn bản chứa các giá trị được phân tách bằng dấu phẩy. Do đó, tăng tên các giá trị được phân tách bằng dấu phẩy [CSV]. Trong tệp CSV, mỗi hàng bao gồm một phiên bản hoặc bản ghi dữ liệu. Mỗi dòng hoặc bản ghi có thể có nhiều đối tượng địa lý hoặc cột hoặc trường được phân tách bằng dấu phẩy. Ví dụ, hãy xem dữ liệu về điểm của sinh viên – “Name, Class, Roll no, Marks”. Tất cả được phân tách bằng dấu phẩy. Bây giờ, hãy khám phá cách đọc tệp CSV trong Javascript với một ví dụ sâu

Trực tiếp Giảm giá cuối năm. Trở thành Nhà phát triển JavaScript giỏi nhất 🚀

Nhận quyền truy cập vào hàng trăm khóa học, phòng thí nghiệm JavaScript thực hành và trở thành nhà phát triển web JavaScript toàn diện có thể tuyển dụng

• Đảm bảo hoàn lại tiền miễn phí
• Truy cập không giới hạn vào tất cả các khóa học nền tảng
• Bao gồm 100 dự án thực hành
• Trợ giúp AI tức thì dựa trên GPT-3
• Lộ trình dành cho nhà phát triển web Full-Stack có cấu trúc để có được một công việc
• Cộng đồng độc quyền cho các sự kiện, hội thảo

Mục lục

Giới thiệu

JavaScript viết tắt là JS là một ngôn ngữ lập trình. Cùng với HTML và CSS, Đây là ngôn ngữ kịch bản được sử dụng rộng rãi để phát triển web giao diện người dùng. Nó có thể được sử dụng cho cả phát triển front-end [phía máy khách] cũng như phát triển back-end [phía máy chủ]. Nó cũng được sử dụng bởi một số môi trường không duyệt như Node. js

Theo mặc định, Javascript không thể đọc các tệp CSV vì các tệp đó ở định dạng được phân tách bằng dấu phẩy. Vì vậy, bạn cần chuyển đổi các tệp CSV thành một định dạng duy nhất mà JS có thể hiểu được

Có một định dạng nữa có tên là “Ký hiệu đối tượng Javascript[JSON]”. Nó có thể đơn giản phân tích cú pháp [chuyển đổi] dữ liệu thành các đối tượng gốc trong JS. Nó rất giống với CSV, nhưng nó hỗ trợ dữ liệu Phân cấp. Không giống như CSV, JSON có kích thước lớn hơn gấp đôi. Do đó, hiện tại, JSON là định dạng dữ liệu tốt nhất để trao đổi dữ liệu. Có rất nhiều API chuyển đổi trực tiếp JSON thành các đối tượng JavaScript gốc

Do đó, javascript có nhiều thư viện có thể được sử dụng để đọc tệp CSV. Hãy khám phá từng cái một

Phương pháp đọc tệp CSV trong JavaScript

Đọc tệp CSV bằng cách sử dụng D3. thư viện js

Bạn có thể sử dụng D3. js, để đọc tệp CSV trong javascript. D3. js là một thư viện javascript được sử dụng để thao tác với tài liệu dữ liệu, trực quan hóa, v.v. trong javascript

Bây giờ, hãy khám phá một ví dụ về cách đọc tệp CSV trong Javascript bằng D3. js

Chạy trong Codedamn

    
    
    
    Read CSV file with JS



    
      
      
      
    
    
    
      const testForm = document.getElementById["testForm"];
      const csvDataFile = document.getElementById["UploadFile"];
  
      testForm.addEventListener["submit", function [e] {
        e.preventDefault[];
        const input = csvDataFile.files[0];
        const reader = new FileReader[];
  
        reader.onload = function [e] {
          const text = e.target.result;
          const csvData = d3.csvParse[text];
          document.write[JSON.stringify[csvData]];
        };
  
        reader.readAsText[input];
      }];
    
  



  

Code language: HTML, XML [xml]

Trong dòng 17, chúng tôi đã nhập D3. thư viện js. Sau đó, chúng tôi đọc nội dung của tệp CSV bằng cách sử dụng đối tượng FileReader từ D3. js khi tải lên tệp CSV

Hàm csvParse từ D3. js được sử dụng để chuyển đổi nội dung CSV mà chúng ta đọc thành JSON

Đọc tệp CSV bằng cách sử dụng thư viện phân tích cú pháp Papa

Tương tự, Papa parse cũng là một thư viện javascript. nó là trình phân tích cú pháp CSV nhanh nhất và mạnh nhất. nó được sử dụng để chuyển đổi CSV sang JSON và JSON sang CSV

hãy xem một ví dụ về cách đọc tệp CSV trong javascript bằng trình phân tích cú pháp papa

Chạy trong Codedamn

    
    
    
    Read CSV file with JS



    

    file uploaded

    

    
        const csvData=[];
        const uploadsuccess=document.getElementById["uploadsuccess"].
            addEventListener["click", [] => {
                Papa.parse[document.getElementById['UploadFile'].files[0], {
                    download: true,
                    header: true,
                    skipEmptyLines: true,
                    complete: function [answer] {
                        console.log["hi"];
                        for [i=0; i