Hướng dẫn javascript read csv - javascript đọc csv

Đị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:

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:

    $.ajax({
        url: 'csv_data.csv',
        dataType: 'text',
      }).done(successFunction);

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:

	  function successFunction(data) {
        var allRows = data.split(/\r?\n|\r/);
        var table = '<table>';
        for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
          if (singleRow === 0) {
            table += '<thead>';
            table += '<tr>';
          } else {
            table += '<tr>';
          }
          var rowCells = allRows[singleRow].split(',');
          for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {
            if (singleRow === 0) {
              table += '<th>';
              table += rowCells[rowCell];
              table += '</th>';
            } else {
              table += '<td>';
              table += rowCells[rowCell];
              table += '</td>';
            }
          }
          if (singleRow === 0) {
            table += '</tr>';
            table += '</thead>';
            table += '<tbody>';
          } else {
            table += '</tr>';
          }
        } 
        table += '</tbody>';
        table += '</table>';
        $('body').append(table);
      }

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:

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:

Để 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:

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ó:

	  table {
        margin: 0 auto;
        text-align: center;
        border-collapse: collapse;
        border: 1px solid #d4d4d4;
      }
    
      tr:nth-child(even) {
        background: #d4d4d4;
      }
    
      th, td {
        padding: 10px 30px;
      }
    
      th {
        border-bottom: 1px solid #d4d4d4;
      }     

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

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.