Convert CSV to JS Array Online

Giới thiệu công cụ Convert CSV to JavaScript Array

Trong quá trình phát triển phần mềm, thiết kế giao diện web hay xây dựng các ứng dụng nội bộ, lập trình viên Frontend thường xuyên phải làm việc với các tập dữ liệu thô (raw data). Dữ liệu này thường được cung cấp bởi bộ phận kinh doanh, kế toán hoặc khách hàng dưới định dạng bảng tính Excel (.xlsx) và sau đó được lưu lại dưới dạng tệp văn bản phẳng CSV (Comma-Separated Values).

Tuy nhiên, trình duyệt web và ngôn ngữ JavaScript không thể trực tiếp đọc hiểu các hàng và cột của CSV giống như cách nó hiểu JSON hay Array. Để render một bảng HTML, vẽ một biểu đồ bằng thư viện Chart.js / D3.js, hoặc tạo dữ liệu giả lập (Mock API data) cho Frontend, bạn cần phải biến đổi văn bản CSV đó thành một cấu trúc dữ liệu thuần JavaScript (thường là Array of Objects hoặc 2D Array). Công cụ Convert CSV to JavaScript Array trực tuyến của VoVietHoang.top được phát triển để tự động hóa toàn bộ quá trình tốn thời gian này chỉ với một cú nhấp chuột.

Tại sao không nên dùng hàm split(',') có sẵn trong JS?

Rất nhiều lập trình viên mới vào nghề (Junior Developers) khi gặp bài toán đọc file CSV thường viết một hàm đơn giản như sau:

const rows = csvText.split('\n');
const data = rows.map(row => row.split(','));

Thoạt nhìn, đoạn code trên có vẻ hoạt động. Tuy nhiên, khi áp dụng vào thực tế với dữ liệu thật, nó sẽ phá vỡ toàn bộ cấu trúc ứng dụng của bạn. Dưới đây là những thách thức kỹ thuật giải thích lý do vì sao bạn cần một công cụ Parse CSV chuyên dụng thay vì dùng hàm cơ bản:

1. Ký tự phân cách nằm trong nội dung (Delimiter Collision)

Hãy xem xét dòng CSV sau: 1, Nguyễn Văn A, "Nhân viên, phòng IT", 15000. Dòng này chỉ có 4 cột (ID, Tên, Chức vụ, Lương). Trong cột chức vụ có chứa dấu phẩy nội bộ và được bọc bởi dấu ngoặc kép theo chuẩn định dạng quốc tế. Nếu dùng split(','), JavaScript sẽ chia dòng này thành 5 cột, làm dữ liệu bị lệch hoàn toàn sang cột bên cạnh.

2. Xử lý dấu ngoặc kép lồng nhau (Escaped Quotes)

Theo tiêu chuẩn quốc tế RFC 4180 về định dạng tệp CSV, nếu một chuỗi văn bản tự nó chứa dấu ngoặc kép, hệ thống xuất file sẽ nhân đôi dấu ngoặc kép đó lên. Ví dụ: Chuỗi Màn hình "Siêu Nét" sẽ được lưu thành "Màn hình ""Siêu Nét""". Một parser JS tiêu chuẩn phải đủ khả năng nhận diện và lược bỏ bớt các dấu ngoặc kép thừa này để trả lại văn bản gốc cho Frontend.

3. Ký tự xuống dòng trong một ô (Multiline Cell)

Nếu một ô trong Excel chứa nhiều dòng (bấm Alt+Enter), khi xuất ra CSV, ô đó sẽ có ký tự \n nằm bên trong cặp ngoặc kép. Hàm split('\n') của bạn sẽ hiểu nhầm đây là hai hàng dữ liệu khác nhau, dẫn đến hiện tượng gãy dòng (broken rows) và gây lỗi ứng dụng nghiêm trọng.

Công cụ của chúng tôi giải quyết vấn đề như thế nào?

Tiện ích trực tuyến này tích hợp một bộ máy phân tích cú pháp (Lexical Parser) chuyên sâu dựa trên cấu trúc State Machine (Máy trạng thái). Nó duyệt qua từng ký tự một của chuỗi đầu vào (Character-by-character parsing), theo dõi trạng thái đóng/mở của dấu ngoặc kép để quyết định xem dấu phẩy hiện tại là dấu phân cách cột hay chỉ là văn bản bình thường. Từ đó, nó xuất ra cấu trúc mảng JavaScript hoàn hảo.

Phân tích 2 định dạng JavaScript đầu ra

Tùy vào mục đích sử dụng trong mã nguồn, công cụ cung cấp hai tùy chọn trích xuất dữ liệu:

Tùy chọn 1: Array of Objects (Mảng các đối tượng)

Đây là cấu trúc phổ biến nhất, tương đồng với dữ liệu trả về từ các API (JSON response). Nó yêu cầu dòng đầu tiên của CSV phải là tên các cột (Headers). Công cụ sẽ lấy dòng đầu tiên làm Keys và gán giá trị của các dòng tiếp theo làm Values.

Cấu trúc này cực kỳ thích hợp khi bạn muốn dùng Array.map() hoặc Array.filter() để render danh sách sản phẩm ra React, Vue hoặc Angular.

Tùy chọn 2: 2D Array (Mảng lồng mảng / Mảng 2 chiều)

Cấu trúc này biến mỗi dòng CSV thành một mảng con độc lập (không cần key/value). Toàn bộ dữ liệu nằm trong một mảng lớn. Cấu trúc này tối ưu dung lượng code hơn, thường được sử dụng khi bạn làm việc với các thư viện vẽ biểu đồ, bảng tính hoặc khi xuất dữ liệu ra định dạng Excel.

Ví dụ minh họa quá trình chuyển đổi

id,product_name,description,price
101,Laptop Dell,"Core i5, RAM 8GB",1500
102,Chuột không dây,"Màu đen
Chống ồn",25

const dataArray = [
  {
    "id": "101",
    "product_name": "Laptop Dell",
    "description": "Core i5, RAM 8GB",
    "price": "1500"
  },
  {
    "id": "102",
    "product_name": "Chuột không dây",
    "description": "Màu đen\nChống ồn",
    "price": "25"
  }
];

const dataArray = [
  [
    "id",
    "product_name",
    "description",
    "price"
  ],
  [
    "101",
    "Laptop Dell",
    "Core i5, RAM 8GB",
    "1500"
  ],
  [
    "102",
    "Chuột không dây",
    "Màu đen\nChống ồn",
    "25"
  ]
];

Hướng dẫn sử dụng công cụ tối ưu

1. Mở tệp dữ liệu: Mở file báo cáo của bạn bằng Excel, Google Sheets, hoặc Notepad. Bôi đen và copy phần dữ liệu bạn cần dùng.
2. Nhập liệu: Dán phần văn bản vừa copy vào ô "Dán nội dung CSV" của công cụ.
3. Chọn Dấu phân cách (Delimiter): Hãy lưu ý nếu file được lưu từ Excel máy tính sử dụng định dạng vùng Việt Nam, dấu phân cách thường là dấu chấm phẩy (;) chứ không phải dấu phẩy (,). Nếu bạn copy trực tiếp từ Excel bằng Ctrl+C, dữ liệu thực chất là dạng TSV, hãy chọn Dấu Tab (\t).
4. Chọn cấu trúc mảng: Quyết định xem dự án của bạn cần "Array of Objects" hay "2D Array".
5. Xử lý: Nhấn "Parse sang JavaScript Array" và click vào nút Copy để mang code nhúng thẳng vào file data.js của bạn.