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

Question

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

Nội dung chính Show

Giới thiệu
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
Đọc tệp CSV bằng cách sử dụng thư viện phân tích cú pháp Papa
Phần kết luận
Học lập trình trên codedamn
Làm cách nào để đọc và ghi tệp CSV bằng JavaScript?
FileReader hoạt động như thế nào với JavaScript?
Làm cách nào để kiểm tra định dạng tệp CSV trong JavaScript?
Làm cách nào để đọc tệp CSV trong jQuery?

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

Go Pro Now (Giảm giá 50% trong thời gian có hạn)

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

html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Read CSV file with JStitle>
head>

<body>
    <form id="testForm">
      <input type="file" id="UploadFile" accept=".csv" />
      <br />
      <input type="submit" value="submit" />
    form>
    <script src="https://cdn.jsdelivr.net/npm/d3@7">script>
    <script>
      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);
      });
    script>
  body>

html>
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

html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Read CSV file with JStitle>
head>

<body>
    <input type='file' id="UploadFile" accept=".csv">

    <button id="uploadsuccess">file uploadedbutton>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/papaparse.min.js">script>

    <script>
        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
                            csvData.push(answer.data[i].APFD);
                        }
                        console.log(csvData);
                    }
                });
            });
    script>
body>

html>
Code language: HTML, XML (xml)

Mã này thiết lập trình xử lý sự kiện trên nút uploadsuccess, sẽ phân tích cú pháp tệp CSV đã chọn khi nút được nhấp. Hàm Papa.parse sử dụng thư viện Papa Parse để phân tích cú pháp tệp CSV và lưu trữ dữ liệu trong mảng csvData. Dữ liệu được ghi vào bảng điều khiển khi quá trình phân tích cú pháp hoàn tất

Thư viện Papa parse cung cấp nhiều tùy chọn khác để tùy chỉnh quy trình phân tích cú pháp, chẳng hạn như chỉ định dấu phân cách, xử lý lỗi và chuyển đổi dữ liệu. Hãy chắc chắn kiểm tra tài liệu để biết thêm thông tin

Phần kết luận

Vì vậy, bây giờ bạn đã biết tại sao cần phải chuyển đổi CSV thành JSON khi đọc CSV trong javascript. CSV hoạt động tốt hơn với các tệp dữ liệu nhỏ nhưng JSON rất nhẹ và nó chỉ phân tích cú pháp dữ liệu thành các đối tượng JS gốc. JSON cũng hoạt động tốt hơn đối với các tập dữ liệu lớn

Ngoài ra, JS còn có một số ngôn ngữ lập trình khác đã bắt đầu sử dụng các đối tượng JSON làm bộ trao đổi dữ liệu. Tôi hy vọng blog này giới thiệu tốt về cách đọc các tệp CSV trong javascript

Tôi hi vọng cái này giúp được. Hãy cho tôi biết nếu bạn có thêm bất kỳ câu hỏi nào về cách đọc tệp CSV trong javascript

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

Go Pro Now (Giảm giá 50% trong thời gian có hạn)

Học lập trình trên codedamn

Codedamn là một nền tảng mã hóa tương tác với rất nhiều khóa học lập trình hấp dẫn có thể giúp bạn có được công việc viết mã đầu tiên của mình. Đây là cách

Bước 1 - Tạo một tài khoản miễn phí
Bước 2 - Duyệt qua các lộ trình có cấu trúc (đường dẫn học tập) hoặc xem tất cả các khóa học
Bước 3 - Thực hành viết mã miễn phí trên các sân chơi lập trình
Bước 4 - Nâng cấp lên tài khoản thành viên Pro để mở khóa tất cả các khóa học và nền tảng

Lập trình là một trong những công việc có nhu cầu cao nhất hiện nay. Học lập trình có thể thay đổi tương lai của bạn. Tất cả tốt nhất

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

Trong hướng dẫn ngắn này, bạn sẽ tìm hiểu cách sử dụng chức năng từ mô-đun fs để ghi tệp CSV bằng Node. .

Tạo một dự án nút mới. Để bắt đầu, chúng ta cần tạo một dự án Node mới. .

Nhập appendFileSync từ Mô-đun fs. .

Triển khai lớp liên hệ. .

Thêm phương thức saveAsCSV vào lớp liên hệ. .

Tạo dữ liệu và lưu vào CSV

FileReader hoạt động như thế nào với JavaScript?

Đối tượng FileReader cho phép các ứng dụng web đọc không đồng bộ nội dung của tệp (hoặc bộ đệm dữ liệu thô) được lưu trữ trên máy tính của người dùng, sử dụng các đối tượng Tệp hoặc Blob để chỉ định tệp hoặc dữ liệu để . .

Làm cách nào để kiểm tra định dạng tệp CSV trong JavaScript?

Tệp CSV được chọn trong điều khiển FileUpload (Đầu vào tệp HTML) và nút Tải lên được nhấp và chức năng Tải lên JavaScript được gọi. Bên trong hàm, trước tiên, kiểm tra được thực hiện để xác minh xem tệp là tệp CSV hay tệp văn bản hợp lệ

Làm cách nào để đọc tệp CSV trong jQuery?

Đọc tệp CSV bằng HTML5 và jQuery .

programming javascript

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

Giới thiệu

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

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

Phần kết luận

Học lập trình trên codedamn

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

FileReader hoạt động như thế nào với JavaScript?

Làm cách nào để kiểm tra định dạng tệp CSV trong JavaScript?

Làm cách nào để đọc tệp CSV trong jQuery?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội