Lập trình · 26/09/2026

JavaScript Array.isArray: Kiểm tra dữ liệu API trước khi gọi map

Lỗi “items.map is not a function” thường khiến lập trình viên thêm một giá trị mặc định [] rồi tiếp tục. Nhưng nếu API đã trả sai cấu trúc, biến lỗi thành danh sách rỗng có thể khiến người dùng tưởng rằng dữ liệu thực sự không tồn tại. Cần phân biệt kiểm tra mảng, kiểm tra phần tử và cách hiển thị lỗi.

1. Kiểm tra mảng bằng đúng công cụ

console.log(Array.isArray([])); // true
console.log(Array.isArray({ length: 0 })); // false
console.log(Array.isArray(null)); // false
console.log(Array.isArray('[]')); // false

Array.isArray trên MDN xác định một giá trị có phải Array hay không. Có thuộc tính length hoặc trông giống danh sách khi in log chưa đủ. Chuỗi chứa ký tự [] vẫn là chuỗi, không phải mảng đã giải mã.

Nếu dữ liệu đã qua JSON.parse hoặc response.json, hãy kiểm tra giá trị nhận được thay vì giải mã lại một cách tùy tiện. JSON hợp lệ có thể biểu diễn object, null hoặc giá trị đơn, không chỉ danh sách.

2. Kiểm tra phần tử theo hợp đồng

Giả sử API trả object có items là mảng bản ghi, mỗi bản ghi cần id dạng số nguyên an toàn dương và name dạng chuỗi không rỗng sau trim. Đây là hợp đồng minh họa; dự án dùng ID dạng chuỗi cần quy tắc khác.

function readItems(payload) {
  if (payload === null || typeof payload !== 'object'
      || Array.isArray(payload) || !Array.isArray(payload.items)) {
    throw new TypeError('Expected an object with an items array');
  }

  const result = [];
  for (const item of payload.items) {
    if (item === null || typeof item !== 'object'
        || Array.isArray(item)
        || !Number.isSafeInteger(item.id) || item.id <= 0
        || typeof item.name !== 'string' || item.name.trim() === '') {
      throw new TypeError('Invalid item');
    }
    result.push({ id: item.id, name: item.name });
  }
  return result;
}

Hàm dành cho dữ liệu JSON đã giải mã, không phải bộ kiểm tra mọi object JavaScript tùy ý. Nó tạo các bản ghi đầu ra chỉ có id và name; không tự loại bản ghi lỗi, không kiểm tra trùng ID và không trim giá trị được trả về. Những lựa chọn đó cần được ghi rõ khi đưa vào sản phẩm.

3. Rỗng hợp lệ khác với không đọc được dữ liệu

Với hợp đồng trên, {items: []} là danh sách rỗng hợp lệ. {items: null}, {} hoặc {items: {}} là cấu trúc không hợp lệ. Nếu tất cả đều bị đổi thành [], giao diện sẽ mất khả năng phân biệt “chưa có bản ghi” với “không tải được bản ghi”.

Hãy dành trạng thái lỗi riêng để người dùng biết cần thử lại hoặc liên hệ hỗ trợ. Log nên ghi mã lỗi và ngữ cảnh tối thiểu, tránh đổ toàn bộ phản hồi chứa thông tin cá nhân. Kiểm tra cấu trúc cũng không thay thế kiểm tra HTTP status hay xử lý lỗi mạng.

4. Đừng coi validation là làm sạch nội dung

name là chuỗi hợp lệ về kiểu nhưng vẫn có thể chứa ký tự HTML. Khi hiển thị như văn bản, dùng cơ chế render có escaping phù hợp; không đưa thẳng chuỗi vào innerHTML chỉ vì đã qua readItems.

Validation ở frontend giúp phát hiện lỗi tích hợp sớm và giữ giao diện ổn định. Nó không cấp quyền truy cập, không bảo vệ endpoint thay backend và không chứng minh nội dung do server gửi là đúng nghiệp vụ.

5. Bộ ca kiểm thử nên có

{items: []} trả mảng rỗng.
Một bản ghi đúng trả đúng id và name.
Thiếu items, items là null hoặc object đều báo lỗi.
Phần tử null, thiếu name hoặc id là chuỗi đều bị từ chối theo hợp đồng.
Một phần tử lỗi trong nhiều phần tử không âm thầm biến thành kết quả thành công một phần.
Giao diện phân biệt trạng thái rỗng và lỗi tải dữ liệu.

Mục tiêu không phải rải Array.isArray ở mọi dòng. Hãy kiểm tra rõ tại nơi dữ liệu đi vào ứng dụng, chuyển về cấu trúc nội bộ ổn định và giữ ý nghĩa của lỗi thay vì che nó bằng giá trị mặc định.