Cách hiển thị một object trong JavaScript

Javascript căn bản | 24/02/2025 by Học Javascript

Trong JavaScript, Object là một kiểu dữ liệu quan trọng, giúp lưu trữ và tổ chức thông tin dưới dạng các cặp key-value. Object được sử dụng rộng rãi để đại diện cho các thực thể trong thế giới thực, từ dữ liệu người dùng đến cấu hình hệ thống hay kết quả từ API.

Trong quá trình phát triển ứng dụng và debug, việc hiển thị Object một cách rõ ràng và dễ hiểu là rất quan trọng. Nó giúp lập trình viên theo dõi trạng thái dữ liệu, phát hiện lỗi nhanh chóng và tối ưu quá trình xử lý thông tin. Tuy nhiên, do Object có thể chứa dữ liệu phức tạp, việc hiển thị không đúng cách có thể gây khó khăn trong việc đọc hiểu và kiểm tra giá trị.

Trong bài viết này, chúng ta sẽ cùng tìm hiểu chi tiết về các phương pháp trên và cách áp dụng chúng hiệu quả trong thực tế.

Sử dụng console.log() và console.table() để hiển thị Object JavaScript

Trong JavaScript, console.log() và console.table() là hai phương pháp phổ biến để hiển thị Object trong trình duyệt DevTools hoặc console của Node.js. Chúng giúp lập trình viên dễ dàng theo dõi dữ liệu, kiểm tra giá trị của Object trong quá trình debug hoặc phát triển ứng dụng.

Sử dụng console.log(object)

Cách sử dụng `console.log()`

console.log() là phương thức đơn giản và phổ biến nhất để hiển thị Object. Nó cho phép bạn in toàn bộ nội dung của Object ra console.

Ví dụ:

const user = {
    name: "John Doe",
    age: 30,
    email: "john.doe@example.com"
};

console.log(user);

Kết quả: DevTools sẽ hiển thị nội dung của Object dưới dạng danh sách thuộc tính:

Kết quả: DevTools sẽ hiển thị nội dung của Object dưới dạng danh sách thuộc tính:

Hiển thị Object dưới dạng JSON trong trình duyệt DevTools

Nếu bạn muốn hiển thị Object dưới dạng JSON, có thể sử dụng JSON.stringify() kết hợp với console.log().
Điều này giúp hiển thị dữ liệu một cách gọn gàng hơn, đặc biệt hữu ích khi làm việc với API hoặc lưu trữ dữ liệu.

Ví dụ:

console.log(JSON.stringify(user, null, 2));

Kết quả:

{
  "name": "John Doe",
  "age": 30,
  "email": "john.doe@example.com"
}

Tham số null, 2 giúp định dạng JSON với khoảng trắng, làm cho dữ liệu dễ đọc hơn.

Sử dụng console.table(object)

Hiển thị Object dưới dạng bảng

Khi làm việc với Object có nhiều thuộc tính hoặc danh sách Object (mảng Object), console.table() giúp hiển thị dữ liệu theo dạng bảng, dễ nhìn hơn so với console.log().

Ví dụ với một Object:

console.table(user);

Kết quả 1:

Dữ liệu được trình bày dưới dạng cột index và giá trị tương ứng, giúp dễ dàng quan sát hơn.

Khi nào nên sử dụng console.table()?

Khi cần hiển thị một danh sách Object (mảng Object).
Khi Object có nhiều thuộc tính và cần sắp xếp dữ liệu một cách trực quan hơn.
Khi làm việc với dữ liệu dạng bảng, như kết quả từ API hoặc danh sách sản phẩm.

Ví dụ với một mảng Object:

const users = [
    { name: "Alice", age: 25, email: "alice@example.com" },
    { name: "Bob", age: 28, email: "bob@example.com" },
    { name: "Charlie", age: 35, email: "charlie@example.com" }
];

console.table(users);

Kết quả 2:

Ưu điểm của console.table() so với console.log():

Giúp hiển thị dữ liệu dễ nhìn hơn khi làm việc với danh sách Object.
Trình bày theo dạng bảng, giúp so sánh dữ liệu nhanh chóng.

Phương Pháp	Khi Nào Sử Dụng?	Ví Dụ
`console.log(object)`	Khi muốn hiển thị Object đơn giản	`console.log(user);`
`console.log(JSON.stringify(object, null, 2))`	Khi cần hiển thị Object dưới dạng JSON	`console.log(JSON.stringify(user, null, 2));`
`console.table(object)`	Khi làm việc với danh sách Object hoặc cần hiển thị dạng bảng	`console.table(users);`

Với console.log() và console.table(), bạn có thể dễ dàng kiểm tra Object trong quá trình phát triển và debug, giúp tăng hiệu quả làm việc với dữ liệu trong JavaScript.

Chuyển object thành chuỗi để hiển thị trong JavaScript

Khi cần hiển thị Object một cách trực quan hoặc lưu trữ Object dưới dạng chuỗi, chúng ta có thể sử dụng các phương pháp như JSON.stringify(), Object.entries(), và Object.values().

Sử dụng JSON.stringify() để chuyển Object thành Chuỗi JSON

Cách chuyển Object thành chuỗi JSON

JSON.stringify() là phương thức phổ biến nhất để chuyển Object thành chuỗi JSON, giúp hiển thị và lưu trữ dữ liệu dễ dàng.

Cú pháp:

JSON.stringify(value, replacer, space)

value: Object cần chuyển đổi.
replacer (tùy chọn): Hàm hoặc mảng xác định thuộc tính nào sẽ được giữ lại.
space (tùy chọn): Số khoảng trắng dùng để định dạng chuỗi JSON giúp dễ đọc hơn.

Ví dụ cơ bản:

const user = {
    name: "Alice",
    age: 25,
    email: "alice@example.com"
};

const jsonString = JSON.stringify(user);
console.log(jsonString);

Kết quả:

{"name":"Alice","age":25,"email":"alice@example.com"}

Chuỗi JSON này có thể được gửi qua API hoặc lưu trữ trong localStorage.

Các tùy chọn format để hiển thị dễ đọc hơn

Mặc định, JSON.stringify() trả về chuỗi JSON ở dạng không có khoảng trắng, gây khó đọc.
Ta có thể dùng tham số thứ ba để định dạng JSON đẹp hơn.

Ví dụ với space = 2:

const prettyJson = JSON.stringify(user, null, 2);
console.log(prettyJson);

Kết quả:

{
  "name": "Alice",
  "age": 25,
  "email": "alice@example.com"
}

2 là số khoảng trắng để thụt đầu dòng, giúp dữ liệu dễ đọc hơn.
Có thể thay 2 bằng 4 hoặc \t để tùy chỉnh mức độ thụt lề.

Lưu ý khi sử dụng JSON.stringify() (Vấn đề Circular Reference)

Một Object có thể chứa tham chiếu đến chính nó (Circular Reference), dẫn đến lỗi khi sử dụng JSON.stringify().

Ví dụ lỗi:

const person = {};
person.self = person; // Tạo vòng lặp tham chiếu

console.log(JSON.stringify(person)); //  Lỗi: TypeError: Converting circular structure to JSON

Cách khắc phục:
Dùng thư viện flatted để xử lý Circular Reference:

import { stringify, parse } from "flatted";

const jsonString = stringify(person);
console.log(jsonString);  // Không lỗi

Sử dụng Object.entries() và Object.values() để hiển thị Object

Hiển thị key-value của Object dưới dạng mảng

Object.entries(object): Trả về mảng các cặp [key, value].
Object.values(object): Trả về mảng chỉ chứa các giá trị của Object.

Ví dụ:

const product = {
    name: "Laptop",
    price: 1500,
    stock: 20
};

console.log(Object.entries(product)); 
// [["name", "Laptop"], ["price", 1500], ["stock", 20]]

console.log(Object.values(product)); 
// ["Laptop", 1500, 20]

Khi nào nên sử dụng Object.entries()?

Khi cần chuyển Object thành mảng để xử lý dữ liệu linh hoạt hơn.
Khi sử dụng các phương thức của mảng như map(), forEach(), filter(), v.v.

Ví dụ: Duyệt qua Object bằng Object.entries()

Object.entries(product).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
});

Kết quả:

name: Laptop
price: 1500
stock: 20

Object.entries() rất hữu ích khi làm việc với bảng dữ liệu hoặc tạo giao diện hiển thị động.

Phương Pháp	Công Dụng	Ví Dụ
`JSON.stringify(object)`	Chuyển Object thành chuỗi JSON	`JSON.stringify(user)`
`JSON.stringify(object, null, 2)`	Hiển thị JSON dễ đọc hơn	`JSON.stringify(user, null, 2)`
`Object.entries(object)`	Chuyển Object thành mảng `[key, value]`	`Object.entries(product)`
`Object.values(object)`	Lấy danh sách giá trị của Object	`Object.values(product)`

Bằng cách sử dụng JSON.stringify(), Object.entries() và Object.values(), ta có thể hiển thị Object một cách hiệu quả và linh hoạt trong JavaScript!

Hiển thị Object trong giao diện Web (HTML & DOM) trong JavaScript

Trong JavaScript, ngoài việc hiển thị Object trong console, chúng ta cũng có thể hiển thị dữ liệu Object lên giao diện web (HTML) bằng cách sử dụng innerHTML, vòng lặp for...in, hoặc chuyển đổi Object thành các phần tử HTML như danh sách <ul>, bảng <table>, v.v.

Hiển thị Object bằng innerHTML

Cách hiển thị Object bằng innerHTML

Chuyển Object thành chuỗi.
Gán chuỗi đó vào một phần tử HTML bằng document.getElementById().innerHTML.

Ví dụ 1: Hiển thị toàn bộ Object trong một <div>

<!DOCTYPE html>
<html lang="vi">
<head>
    <title>Hiển thị Object</title>
</head>
<body>
    <h2>Thông Tin Người Dùng</h2>
    <div id="output"></div>

    <script>
        const user = {
            name: "Alice",
            age: 25,
            email: "alice@example.com"
        };

        document.getElementById("output").innerHTML = JSON.stringify(user, null, 2);
    </script>
</body>
</html>

Kết quả:

{
  "name": "Alice",
  "age": 25,
  "email": "alice@example.com"
}

Lưu ý: Sử dụng JSON.stringify(obj, null, 2) để hiển thị đẹp hơn.

Hiển thị Object bằng vòng lặp for...in

Khi cần hiển thị dữ liệu Object có cấu trúc rõ ràng, ta có thể duyệt qua các thuộc tính bằng for...in và hiển thị từng thuộc tính trên giao diện.

Ví dụ 2: Hiển thị từng thuộc tính trong <p>

<!DOCTYPE html>
<html lang="vi">
<head>
    <title>Hiển thị Object</title>
</head>
<body>
    <h2>Thông Tin Người Dùng</h2>
    <div id="output"></div>

    <script>
        const user = {
            name: "Alice",
            age: 25,
            email: "alice@example.com"
        };

        let outputHTML = "";
        for (let key in user) {
            outputHTML += `<p><strong>${key}:</strong> ${user[key]}</p>`;
        }

        document.getElementById("output").innerHTML = outputHTML;
    </script>
</body>
</html>

Kết quả hiển thị trên giao diện:

Tên: Alice
Tuổi: 25
Email: alice@example.com

Lợi ích: Hiển thị dữ liệu rõ ràng, dễ đọc hơn so với JSON thô.

Hiển thị Object dưới dạng danh sách <ul>

<!DOCTYPE html>
<html lang="vi">
<head>
    <title>Danh sách Object</title>
</head>
<body>
    <h2>Thông Tin Người Dùng</h2>
    <ul id="userInfo"></ul>

    <script>
        const user = {
            name: "Alice",
            age: 25,
            email: "alice@example.com"
        };

        let listHTML = "";
        for (let key in user) {
            listHTML += `<li><strong>${key}:</strong> ${user[key]}</li>`;
        }

        document.getElementById("userInfo").innerHTML = listHTML;
    </script>
</body>
</html>

Kết quả:

Ưu điểm: Danh sách dễ đọc, có thể mở rộng khi Object lớn hơn.

Hiển thị Object trong bảng <table>

Với dữ liệu có cấu trúc, ta có thể hiển thị Object dưới dạng bảng để dễ theo dõi hơn.

Ví dụ 4: Chuyển Object thành bảng <table>

<!DOCTYPE html>
<html lang="vi">
<head>
    <title>Bảng thông tin</title>
    <style>
        table { width: 50%; border-collapse: collapse; }
        th, td { border: 1px solid black; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <h2>Bảng Thông Tin Người Dùng</h2>
    <table id="userTable">
        <tr>
            <th>Thuộc Tính</th>
            <th>Giá Trị</th>
        </tr>
    </table>

    <script>
        const user = {
            name: "Alice",
            age: 25,
            email: "alice@example.com"
        };

        let tableHTML = "";
        for (let key in user) {
            tableHTML += `<tr><td>${key}</td><td>${user[key]}</td></tr>`;
        }

        document.getElementById("userTable").innerHTML += tableHTML;
    </script>
</body>
</html>

Kết quả:

Ưu điểm: Hiển thị dữ liệu đẹp, phù hợp với danh sách lớn.

Cách Hiển Thị	Phương Pháp	Khi Nào Nên Dùng?
`innerHTML`	`document.getElementById().innerHTML`	Hiển thị Object đơn giản
Vòng lặp `for...in`	Duyệt từng thuộc tính và hiển thị lên HTML	Hiển thị dữ liệu rõ ràng
`<ul>` danh sách	Lặp qua Object và tạo danh sách `<li>`	Dữ liệu nhỏ, dễ đọc
`<table>` bảng	Lặp qua Object và tạo bảng `<tr><td>`	Dữ liệu lớn, có nhiều thông tin

Sử dụng thư viện để hiển thị Object đẹp hơn trong JavaScript

Khi làm việc với JavaScript, đôi khi việc hiển thị Object bằng console.log(), JSON.stringify(), hoặc các phương pháp thủ công không đủ trực quan. Các thư viện như Lodash và JSON Formatter giúp cải thiện hiển thị Object một cách dễ đọc và chuyên nghiệp hơn.

Hiển thị Object với Lodash

Lodash là một thư viện JavaScript phổ biến cung cấp nhiều phương thức hữu ích để làm việc với Object, giúp hiển thị dữ liệu rõ ràng hơn.

Dùng _.toPairs() để chuyển Object thành mảng cặp key-value

const _ = require("lodash");

const user = {
    name: "Alice",
    age: 25,
    email: "alice@example.com"
};

console.log(_.toPairs(user));

Kết quả:

[ ['name', 'Alice'], ['age', 25], ['email', 'alice@example.com'] ]

Lợi ích: Chuyển Object thành mảng giúp dễ dàng hiển thị dữ liệu dưới dạng bảng hoặc danh sách.

Dùng _.mapValues() để xử lý giá trị Object

const updatedUser = _.mapValues(user, value => String(value).toUpperCase());
console.log(updatedUser);

Kết quả:

{ name: 'ALICE', age: '25', email: 'ALICE@EXAMPLE.COM' }

Ứng dụng: Dùng khi cần định dạng dữ liệu trước khi hiển thị.

Hiển thị Object với thư viện JSON Formatter

Thư viện JSON Formatter giúp hiển thị Object trong trình duyệt theo cách đẹp và dễ đọc hơn.

npm install json-formatter-js

Ví dụ sử dụng JSON Formatter để hiển thị Object trong giao diện web:

<!DOCTYPE html>
<html lang="vi">
<head>
    <title>Hiển thị Object</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/json-formatter-js/2.3.4/json-formatter.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/json-formatter-js/2.3.4/json-formatter.min.css">
</head>
<body>
    <h2>Hiển Thị Object Đẹp Hơn</h2>
    <div id="output"></div>

    <script>
        const user = {
            name: "Alice",
            age: 25,
            email: "alice@example.com",
            address: { city: "New York", country: "USA" }
        };

        const formatter = new JSONFormatter(user);
        document.getElementById("output").appendChild(formatter.render());
    </script>
</body>
</html>

Kết quả: Object sẽ hiển thị đẹp, có thể mở rộng (expand) hoặc thu gọn (collapse) từng cấp dữ liệu.

User Info: [object Object]

Nguyên nhân: JavaScript không tự động chuyển Object thành chuỗi JSON khi dùng dấu +.

Cách khắc phục: Sử dụng JSON.stringify()

console.log("User Info: " + JSON.stringify(user));

Kết quả đúng:

User Info: {"name":"Alice","age":25}

Vấn đề Circular Reference khi dùng JSON.stringify()

Lỗi: Khi một Object có tham chiếu vòng (circular reference), JSON.stringify() sẽ gây lỗi.

const objA = {};
const objB = { parent: objA };
objA.child = objB;

console.log(JSON.stringify(objA));

Kết quả:

TypeError: Converting circular structure to JSON

Nguyên nhân: Object objA tham chiếu đến objB, và objB lại tham chiếu ngược lại objA.

Cách khắc phục: Dùng circular-json hoặc flatted để xử lý.

npm install flatted

const { stringify, parse } = require("flatted");

console.log(stringify(objA)); // Không gây lỗi

Cách 2: Bỏ qua circular reference bằng replacer function

const cache = new WeakSet();
console.log(JSON.stringify(objA, (key, value) => {
    if (typeof value === "object" && value !== null) {
        if (cache.has(value)) return;
        cache.add(value);
    }
    return value;
}));

Kết quả: JSON không bị lỗi vòng lặp.

Object quá lớn gây ảnh hưởng hiệu suất

Vấn đề: Nếu Object quá lớn (hàng nghìn thuộc tính), việc hiển thị toàn bộ Object có thể làm trình duyệt hoặc console chậm.

Cách khắc phục:

Chỉ hiển thị một phần dữ liệu bằng Object.keys() hoặc slice().
Dùng thư viện hỗ trợ như JSON Formatter hoặc Lodash.

Ví dụ: Hiển thị 5 thuộc tính đầu tiên của Object lớn

const bigObject = { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7 };

const limitedObject = Object.fromEntries(Object.entries(bigObject).slice(0, 5));
console.log(limitedObject);

Kết quả: Chỉ hiển thị { a: 1, b: 2, c: 3, d: 4, e: 5 }.

Các phương pháp hiển thị Object hiệu quả:

Phương Pháp	Khi Nào Sử Dụng?
`console.log()`	Debug nhanh
`console.table()`	Hiển thị Object dạng bảng
`JSON.stringify()`	Hiển thị Object dưới dạng chuỗi JSON
`for...in` + `innerHTML`	Hiển thị Object trên giao diện web
Lodash (`_.toPairs`, `_.mapValues`)	Làm việc với Object chuyên nghiệp hơn
JSON Formatter	Hiển thị JSON đẹp trong trình duyệt

Bằng cách kết hợp các phương pháp trên, bạn có thể làm việc với Object một cách trực quan và hiệu quả hơn.

Kết bài

Hiển thị Object một cách hiệu quả trong JavaScript không chỉ giúp lập trình viên dễ dàng debug mà còn cải thiện trải nghiệm người dùng khi làm việc với dữ liệu.

Dùng console.log() và console.table() để kiểm tra nhanh dữ liệu trong console.
Dùng JSON.stringify() để chuyển Object thành chuỗi JSON, giúp hiển thị dễ đọc hơn.
Dùng Object.entries(), Object.values() để trích xuất dữ liệu theo dạng mảng.
Hiển thị Object trên giao diện web bằng innerHTML và vòng lặp for...in.
Tận dụng thư viện Lodash và JSON Formatter để trình bày dữ liệu chuyên nghiệp hơn.
Xử lý lỗi phổ biến như [object Object], circular reference và Object quá lớn.

Việc chọn phương pháp hiển thị phù hợp tùy thuộc vào ngữ cảnh sử dụng. Hiểu rõ các cách làm việc với Object sẽ giúp bạn tối ưu hiệu suất và nâng cao khả năng debug khi lập trình với JavaScript.