Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Phân tích một tập tin CSV bằng JavaScript

by
Difficulty:IntermediateLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Final product image
What You'll Be Creating

Định dạng tập tin CSV (Comma Separated Values) là một cách phổ biến để trao đổi dữ liệu giữa các ứng dụng.

Trong hướng dẫn nhanh này, chúng ta sẽ tìm hiểu cách JavaScript có thể giúp chúng ta hiển thị hoá dữ liệu trong tập tin CSV.

Tạo một tập tin CSV

Để bắt đầu, hãy tạo một tập tin CSV đơn giản. Để làm điều này, chúng ta sẽ tận dụng Mockaroo, một trình tạo dữ liệu kiểm thử trực tuyến. Dưới đây là tập tin của chúng ta:

Initial-CSV-File

Chuyển đổi một tập tin CSV thành một bảng HTML

Bây giờ thì chúng ta đã tạo ra một tập tin, chúng ta đã sẵn sàng để phân tích nó và xây dụng một bảng HTML để liên kết với nó.

Bước đầu tiên, chúng ta sẽ sử dụng hàm ajax của jQuery để truy vấn dữ liệu từ tập tin này:

Giả định yêu cầu AJAX là thành công, hàm successFunction được thực thi. Hàm này có trách nhiệm phân tích các dữ liệu trả về và chuyển đổi chúng thành một bảng HTML:

Vì vậy, ý tưởng là để chuyển đổi mỗi hàng CSV vào một dòng của bảng. Với ý nghĩ đó, chúng ta hãy giải thích ngắn gọn cách thức hoạt động của đoạn code ở trên:

  • Trước tiên, chúng ta sử dụng một regex để tách các phản hồi AJAX, và từ đó tách các dòng CSV.
  • Sau đó, chúng ta lặp qua các dòng của CSV và phân chia các trường dữ liệu của chúng.
  • Cuối cùng, chúng ta lặp qua các trường dữ liệu và tạo ra các ô tương ứng trong bảng.

Hơn nữa, để hiểu hơn về đoạn mã này, hãy xem hình ảnh minh hoạ sau đây:

CSV-Representation

Tại thời điểm này, điều quan trọng là hiểu rõ tại sao chúng ta sử dụng mẫu regex /\r?\n|\r/ để tách các dòng của CSV.

Như bạn biết, có các cách biểu đạt khác nhau cho một dòng mới (newline) trên hầu hết các hệ điều hành. Ví dụ, trên hệ thống Windows các ký tự đại diện cho một dòng mới là \r\n. Điều đó nói lên rằng, bằng cách sử dụng regex nêu trên, chúng ta có thể khớp tất cả những đại diện có thể có của một dòng mới.

Ngoài ra, hầu hết các trình soạn thảo văn bản cho phép chúng ta chọn định dạng cho một dòng mới. Lấy ví dụ, Notepad++. Trong trình soạn thảo này, chúng ta có thể thiết lập định dạng mong muốn cho một tài liệu bằng cách chuyển đến menu này:

Notepad++-EOL

Để hình dung về nó, hãy xem tập tin của chúng ta. Tuỳ thuộc vào định dạng mà chúng ta chọn, nó sẽ trông giống như thế này:

CSV-EOL

Thêm các phong cách cho bảng HTML

Trước khi chúng ta nhìn vào bảng kết quả, hãy thêm một vài phong cách cơ bản cho nó:

Dưới đây là bảng đươc tạo ra:

Generated-Table

Kết luận

Trong bài viết ngắn này, chúng ta đã đi qua các bước để chuyển đổi một tập tin CSV thành một bảng HTML. Tất nhiên, chúng ta có thể sử dụng một công cụ nền web cho việc chuyển đổi này, nhưng tôi nghĩ rằng luôn là gì đó phấn khích khi làm được điều này bằng cách tự viết mã của riêng bạn.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.