hiển thị đối tượng javascript

Làm thế nào để hiển thị các đối tượng JavaScript?


Hiển thị một đối tượng JavaScript sẽ xuất ra màn hình [object Object].

Ví dụ

const person = {
    firstName: "John",
    lastName: "Doe",
    hourse: "TP.HCM",
};
var x = person;

Xem kết quả

Một số giải pháp phổ biến được dùng để hiển thị các đối tượng JavaScript là.

  • Hiển thị các thuộc tính đối tượng theo tên
  • Hiển thị các thuộc tính đối tượng trong một vòng lặp
  • Hiển thị Đối tượng bằng Object.values​()
  • Hiển thị Đối tượng bằng JSON.stringify()

Hiển thị thuộc tính đối tượng theo tên


Các thuộc tính của một đối tượng có thể được hiển thị dưới dạng một chuỗi.

Ví dụ

const person = {
    firstName: "John",
    lastName: "Doe",
    hourse: "TP.HCM",
    age: 30
};
var x = person.firstName + ", " + person.age + " tuổi, sống ở " + person.hourse ;

Xem kết quả

Hiển thị thuộc tính đối tượng theo một vòng lặp


Các thuộc tính của một đối tượng có thể được thu thập trong một vòng lặp.

Ví dụ

const person = {
    firstName: "John",
    lastName: "Doe",
    hourse: "TP.HCM",
    age: 30
};
var x = "";
for (var i in person) {
    x += person[i] + "<br/>";
}

Xem kết quả

Bạn phải sử dụng person[i] trong vòng lặp.
person.i sẽ không hoạt động (Vì i là một biến).

Sử dụng phương thức Object.values()


Bất kỳ đối tượng JavaScript nào cũng có thể được chuyển đổi thành một mảng bằng cách sử dụng phương thức Object.values().

const person = {
	firstName: "John",
	lastName: "Doe",
	hourse: "TP.HCM",
	age: 30
};
var myArray = Object.values(person);

Biến myArray bây giờ là một mảng JavaScript, và sẵn sàng được hiển thị.

Ví dụ

document.getElementById('demo').innerHTML = myArray ;

Xem kết quả

Phương thức Object.values() được hỗ trợ trong tất cả các trình duyệt chính kể từ năm 2016.

         
54 (2016) 14 (2016) 47 (2016) 10 (2016) 41 (2016)

Sử dụng phương thức JSON.stringify()


Bất kỳ đối tượng JavaScript nào cũng có thể được chuyển đổi thành chuỗi bằng hàm JavaScript JSON.stringify().

const person = {
    firstName: "John",
    lastName: "Doe",
    hourse: "TP.HCM",
    age: 30
};
var myString = JSON.stringify(person);

Biến myString bây giờ là một chuỗi JavaScript, sẵn sàng được hiển thị.

Ví dụ

document.getElementById('demo').innerHTML = myString ;

Xem kết quả

Kết quả sẽ là một chuỗi theo sau ký hiệu JSON:
{"firstName":"John","lastName":"Doe","hourse":"TP.HCM","age":30}

Phương thức JSON.stringify() được tích hợp trong JavaScript và được hỗ trợ trong tất cả các trình duyệt chính.

JSON.stringify() chuyển đổi ngày tháng thành chuỗi.

Ví dụ

const person = {
    firstName: "John",
    lastName: "Doe",
    hourse: "TP.HCM",
    age: 30,
    today: new Date()
};
var myString = JSON.stringify(person);
document.getElementById('demo').innerHTML = myString ;

Xem kết quả

JSON.stringify() sẽ không chuyển thành chuỗi đối với các hàm.

Ví dụ

fullName: function() {
  return this.firstName + " " + this.lastname ;
},

Xem kết quả

Chúng ta có thể khắc phục điều này bằng cách chuyển đổi các hàm thành chuỗi trước.

Ví dụ

const person = {
    firstName: "John",
    lastName: "Doe",
    fullName: function() {
            return this.firstName + " " + this.lastName ;
        },
    hourse: "TP.HCM",
    age: 30,
    today: new Date()
};
person.fullName = person.fullName().toString();
var myString = JSON.stringify(person);

Xem kết quả

Phương thức JSON.stringify() cũng có thể được sử dụng để chuyển thành chuỗi đối với một mảng.

Ví dụ

const cars = ["Innova","CRV","BMW","Kia"];
var myString = JSON.stringify(cars);

Xem kết quả

Kết quả sẽ là một chuỗi theo sau ký hiệu JSON:
["Innova","CRV","BMW","Kia"]