Câu hỏi Làm thế nào tôi có thể hiển thị một đối tượng JavaScript?


Làm cách nào để hiển thị nội dung của đối tượng JavaScript theo định dạng chuỗi như khi chúng tôi alert một biến số?

Cách được định dạng giống như tôi muốn hiển thị một đối tượng.


1259
2018-06-05 19:01


gốc


Bạn vui lòng viết lại câu hỏi của bạn? Ý bạn là gì theo "định dạng"? Như trong, với định dạng phong phú, như in đậm / nghiêng / etc? - Sasha Chedygov
có cách nào để hiển thị giá trị thời gian chạy của một biến bằng cách in giá trị của biến bằng cách sử dụng một số lệnh giao diện điều khiển? - BlackPanther
@BlackPanther Chỉ cần làm console.log("", yourObject1, yourObject2, yourObject3, etc...);. Một phiên bản ngắn hơn là chỉ cần làm console.log(yourObject1, yourObject2, etc...);. - tom_mai78101
Bạn có thể vui lòng chọn một câu trả lời hay hơn để phản ánh chính xác hơn sự đồng thuận của cộng đồng? - HoldOffHunger


Các câu trả lời:


Với Firefox

Nếu bạn muốn in đối tượng cho mục đích gỡ lỗi, tôi đề xuất thay vì cài đặt Firebug cho Firefox và sử dụng mã:

console.log(obj)

Với Chrome

var obj = {prop1: 'prop1Value', prop2: 'prop2Value', child: {childProp1: 'childProp1Value'}}
console.log(obj)

sẽ hiển thị

screenshot console chrome

Chú thích : bạn phải chỉ có đăng nhập đối tượng. Ví dụ: điều này sẽ không hoạt động:

console.log('My object : ' + obj)

752
2018-06-05 19:15



Chức năng đó cũng hoạt động trên Google Chrome khi sử dụng Bảng điều khiển JavaScript (Shift + Control + J hoặc Shift + Control + I, tùy thuộc vào phiên bản Chrome). Cũng lưu ý rằng console.log(obj1, obj2) hoạt động rất độc đáo, vì vậy bạn không phải gọi console.log() cho mọi đối tượng khi ghi nhiều biến. Ngoài ra, luôn luôn nhớ để loại bỏ tất cả các cuộc gọi như vậy trong sản xuất, vì nó sẽ phá vỡ trình duyệt mà không thực hiện nó (chẳng hạn như Internet Explorer). - Felix
Điều này không làm việc nó in [đối tượng đối tượng] - Doug Molineux
Có nó in [Object Object] nhưng nó có một nút expando-toggly nhỏ bên cạnh nó cho phép bạn kiểm tra các nội dung của đối tượng. - hughes
@ghghes nó thực sự có thể làm cả hai. tôi có một đối tượng tôi tạo ra với: var obj = {"foo": false}; và một đối tượng khác đang được chuyển vào một cuộc gọi lại từ một máy chủ, một đối tượng được chuyển qua các bản in gọi lại với mũi tên nhỏ để bạn có thể mở nó ra, một đối tượng được tạo tĩnh chỉ in [Object Object] mà không có mũi tên. Tôi đang cố gắng tìm ra điều này, bất kỳ suy nghĩ nào khác? - benstraw
console.log("id:"+obj); sẽ không xuất ra chính xác vì nó xuất ra một chuỗi như bạn thấy ở đó, bạn cần phải xác định nó như sau: console.log("id:"); console.log(obj); - Anriëtte Myburgh


Sử dụng nguồn gốc JSON.stringify phương pháp. Làm việc với các đối tượng lồng nhau và tất cả các trình duyệt chính ủng hộ phương pháp này.

str = JSON.stringify(obj);
str = JSON.stringify(obj, null, 4); // (Optional) beautiful indented output.
console.log(str); // Logs output to dev tools console.
alert(str); // Displays output using window.alert()

Liên kết đến Tham chiếu API Mozilla và các ví dụ khác.

obj = JSON.parse(str); // Reverses above operation (Just in case if needed.)

Sử dụng tùy chỉnh JSON.stringify replacer nếu bạn gặp phải lỗi Javascript này

"Uncaught TypeError: Converting circular structure to JSON"

1723
2017-11-27 17:52



Để có thể đọc được nhiều hơn, hãy thử JSON.stringify (obj, null, 4). Điều này sẽ viết nó ra như văn bản thụt lề gọn gàng - Ben Clayton
JSON.stringify chỉ có thể hiển thị một tập nhỏ các giá trị javascript và sẽ ném một ngoại lệ cho phần còn lại - console.log không có vấn đề này. - Marc Lehmann
Nếu bạn là một newbie như tôi, đừng quên console.log I E. console.log(JSON.stringify(obj,null, 4)); - nilesh
"Uncaught TypeError: Chuyển đổi cấu trúc tròn thành JSON" khi ob = window. - Michael
> Trong Node.js, bạn có thể sử dụng util.inspect (đối tượng). Nó sẽ tự động thay thế các liên kết tròn bằng "[Thông tư]". ----- tín dụng: Erel Segal-Halevi trong liên kết thay thế JSON.stringify đó - DaveLak


var output = '';
for (var property in object) {
  output += property + ': ' + object[property]+'; ';
}
alert(output);

368
2018-06-05 19:18



Tôi đang tìm kiếm một phong cách php foreach() cảm ơn! - David Yell
Đây chính xác là những gì tôi muốn. Tôi đang sử dụng google maps v3 và directionrenderer trả về một đối tượng. Điều đó có bốn mục và trong đó một tên đối tượng tiếp tục thay đổi vì vậy chúng ta cần phải tìm thấy điều đó. Cho rằng phương pháp này thực sự hữu ích. Bên cạnh đó, chúng ta có thể lấy tất cả tên của các thuộc tính và đối tượng. Hoặc là có cách nào khác để tìm tên của các đối tượng và tài sản? - Jayapal Chandran
1, không phải tất cả javascript đều chạy trong trình duyệt hoặc có thể được gỡ lỗi trong chúng. - Bill Yang
Bạn có thể muốn che giấu phần tích hợp trong cruft với hasOwnProperty hầu hết thời gian. - John
Omg - 0: [; 1: o; 2: b; 3: j; 4: e; 5: c; 6: t; 7:; 8: O; 9: b; 10: j; 11: e; 12: c; 13: t; 14:]; - JSideris


console.dir(object):

Hiển thị danh sách tương tác của các thuộc tính của một đối tượng JavaScript được chỉ định. Danh sách này cho phép bạn sử dụng hình tam giác tiết lộ để kiểm tra nội dung của các đối tượng con.

Lưu ý rằng console.dir() tính năng không chuẩn. Xem Tài liệu web MDN


95
2018-06-03 12:43



đây là câu trả lời hay nhất - davidhq
Tôi ngạc nhiên khi có ít người chấp nhận câu trả lời này. Đây là một giải pháp rất tốt. - CtheGood
Đây là giải pháp tốt nhất. - Nevin Madhukar K


thử cái này :

console.log(JSON.stringify(obj))

Điều này sẽ in phiên bản stringify của đối tượng. Vì vậy, thay vì [object] như một đầu ra, bạn sẽ nhận được nội dung của đối tượng.


65
2017-08-12 07:53



typeerror: Converting circular structure to JSON? - Kaiden Prince
@KaidenPrince thấy câu trả lời này cho lỗi của bạn: stackoverflow.com/questions/4816099/…  Nó có thể là một phần tử DOM trong đối tượng của bạn. Nếu đó là trường hợp, bạn đang cố gắng chỉ để đăng nhập vào giao diện điều khiển trong chrome hoặc firefox và kiểm tra ở đó. Nếu không, bạn phải loại bỏ tất cả các phần tử tròn trước JSON.stringify được gọi để nó hoạt động. - Ace Hyzer
Giải pháp là chỉ cần chia thành 2 lệnh riêng biệt tin rằng nó có hay không: console.log ("id:"); console.log (obj); - Collin Chaffin
Tại sao downvote ?, xin vui lòng giải thích lý do cho downvote. - Abhishek Goel


Vâng, Firefox (nhờ @Bojangles để biết thông tin chi tiết) có Object.toSource() phương thức in các đối tượng dưới dạng JSON và function(){}.

Đó là đủ cho hầu hết các mục đích gỡ lỗi, tôi đoán.


64
2018-06-05 19:04



Object.toSource () dường như không hoạt động đối với Chrome, điều này có được mong đợi không? Hay Chrome không thuộc "trình duyệt nâng cao"? =) - tstyle
Rõ ràng là không: ( - alamar
Chủ đề cũ, chỉ tìm thấy nó thông qua Google. .toSource() thực sự là Firefox chỉ có. Chỉ nghĩ rằng tôi sẽ cho bạn biết. - Bojangles
quá tệ, tôi có Chrome và nó không hoạt động - Nulik


Nếu bạn muốn sử dụng cảnh báo, để in đối tượng của bạn, bạn có thể làm điều này:

alert("myObject is " + myObject.toSource());

Nó sẽ in mỗi thuộc tính và giá trị tương ứng của nó ở định dạng chuỗi.


51
2017-09-09 07:15



toSource () không hoạt động trong các trình duyệt không phải là gecko (ví dụ: Chrome, Safari) - Yarin
Tuy nhiên điều này làm việc tốt cho Firefox (Gecko) Trình duyệt COOL !!!! - Vinothkumar Arputharaj


Chức năng:

var print = function(o){
    var str='';

    for(var p in o){
        if(typeof o[p] == 'string'){
            str+= p + ': ' + o[p]+'; </br>';
        }else{
            str+= p + ': { </br>' + print(o[p]) + '}';
        }
    }

    return str;
}

Sử dụng:

var myObject = {
    name: 'Wilson Page',
    contact: {
        email: 'wilson@hotmail.com',
        tel: '123456789'
    }  
}

$('body').append( print(myObject) );

Thí dụ:

http://jsfiddle.net/WilsonPage/6eqMn/


31
2017-11-16 14:37



Phương thức in gọi trình duyệt để in trang thành pdf: p - Marwen Trabelsi
dường như không hoạt động với các số nguyên - jsh
@ jsh bạn nên bật if-else xung quanh và kiểm tra đối tượng thay vì chỉ chuỗi. cập nhật fiddle: jsfiddle.net/6eqMn/594 - Michael Walter
@wilsonpage Điều này không thành công nếu tôi thêm giá trị số nguyên vào thuộc tính tel :( - ni3


Trong NodeJS bạn có thể in một đối tượng bằng cách sử dụng util.inspect(obj). Hãy chắc chắn nêu rõ độ sâu hoặc bạn sẽ chỉ có một bản in nông của đối tượng.


31
2017-07-15 06:35





Nếu bạn muốn xem dữ liệu ở định dạng bảng, bạn có thể sử dụng

console.table(obj);

Bảng có thể được sắp xếp nếu bạn bấm vào cột bảng.

Bạn cũng có thể chọn cột nào sẽ hiển thị:

console.table(obj, ['firstName', 'lastName']);

Bạn có thể tìm thêm thông tin về console.table đây


28
2018-03-26 12:43