Cetak objek yang diuraikan JSON?

200

Saya punya objek javascript yang telah diuraikan menggunakan JSON JSON.parseSaya sekarang ingin mencetak objek sehingga saya bisa men-debug-nya (ada yang salah dengan fungsi). Ketika saya melakukan hal berikut ...

for (property in obj) {
    output += property + ': ' + obj[property]+'; ';
}
console.log(output);

Saya mendapatkan beberapa [Objek objek] terdaftar. Saya bertanya-tanya bagaimana cara saya mencetak ini untuk melihat konten?

Skizit
sumber
5
sebagai sidenote, untuk (properti dalam keberatan) akan mendaftar semua properti, bahkan yang diwariskan. Jadi, Anda akan mendapatkan banyak komentar tambahan untuk Object.prototype dan 'kelas ibu' mana pun. Ini tidak nyaman dengan objek json. Anda harus memfilternya dengan hasOwnProperty () untuk mendapatkan hanya properti yang dimiliki objek ini.
BiAiB

Jawaban:

124

Kebanyakan konsol debugger mendukung menampilkan objek secara langsung. Gunakan saja

console.log(obj);

Tergantung pada debugger Anda, kemungkinan besar ini akan menampilkan objek di konsol sebagai pohon runtuh. Anda dapat membuka pohon dan memeriksa objek.

RoToRa
sumber
122
Perlu disebutkan bahwa dalam chrome (dan mungkin browser lain) ketika dikombinasikan dengan string seperti ini: console.log("object: " + obj)itu tidak menampilkan objek, tetapi sebaliknya akan menampilkan "objek: [Object obj]".
Shahar
24
@ Shahar console.log("object: %O", obj)(Chrome) atau console.log("object: %o", obj)(Firefox | Safari) akan memberi Anda akses ke detail objek, lihat jawaban saya di bawah ini.
Dave Anderson
1
@DaveAnderson bidikan bagus untuk pemformatan objek di konsol.
lekant
@ Shahar terima kasih, milikmu adalah informasi yang saya butuhkan. Harus ditambahkan ke jawabannya.
Leo Flaherty
3
Selain metode @DaveAnderson, menggunakan koma untuk memisahkan string dari objek juga dapat berfungsi:console.log("My object: ", obj)
Shahar
571

Anda tahu apa kepanjangan JSON? Notasi Obyek JavaScript . Itu membuat format yang cukup bagus untuk objek.

JSON.stringify(obj) akan memberi Anda representasi string objek.

cao
sumber
12
Saya terkejut jawaban ini ada di bagian bawah ...... Ini seharusnya jawaban yang diterima :-)
Mingyu
1
Bagaimana jika Anda tidak menginginkan representasi string, melainkan objek seperti yang akan muncul di editor kode?
SuperUberDuper
5
@SuperUberDuper: ... Maka Anda tidak akan mencoba untuk membangun representasi string, sekarang, kan. :)
cHao
Saya percaya SuperUberDuper bertanya apakah objek dapat dicatat atau dilihat tanpa mengubahnya menjadi string. Jika melihat di browser DOM membutuhkan sebuah elemen, Anda dapat merangkai json jadi dan mengatur konten elemen innerHTML ke string itu untuk melihatnya di halaman.
jasonleonhard
Misalnya: impor Json dari './data.json'; var el = document.createElement ('div'); el.innerHTML = JSON.stringify (Json);
jasonleonhard
54

coba console.dir()bukanconsole.log()

console.dir(obj);

MDN mengatakan console.dir()didukung oleh:

  • FF8 +
  • IE9 +
  • Opera
  • Chrome
  • Safari
Distdev
sumber
1
Hanya tersedia di IE9 +
jasoncript
3
console.dir()juga tersedia di FF8 +, Opera, Chrome dan Safari: developer.mozilla.org/en-US/docs/Web/API/console.dir
olibre
Bagus! Ini solusi terbaik untukku. Terima kasih.
Hoang Le
1
bagaimana dengan simpul js?
Xsmael
bagus, tetapi tidak mendukung penggabungan string seperti log ("string" + variabel)
Nassim
47

Jika Anda menginginkan JSON multiline cantik dengan lekukan maka Anda dapat menggunakan JSON.stringifyargumen ke-3:

JSON.stringify(value[, replacer[, space]])

Sebagai contoh:

var obj = {a:1,b:2,c:{d:3, e:4}};

JSON.stringify(obj, null, "    ");

atau

JSON.stringify(obj, null, 4);

akan memberi Anda hasil sebagai berikut:

"{
    "a": 1,
    "b": 2,
    "c": {
        "d": 3,
        "e": 4
    }
}"

Di browser console.log(obj)bahkan melakukan pekerjaan yang lebih baik, tetapi di konsol shell (node.js) tidak.

Lukasz Wiktor
sumber
40

untuk mencetak objek parsing JSON cukup ketik

console.log( JSON.stringify(data, null, " ") );

dan Anda akan mendapatkan hasil yang sangat jelas

BERGUIGA Mohamed Amine
sumber
25

Gunakan format string;

console.log("%s %O", "My Object", obj);

Chrome memiliki Penentu Format dengan berikut ini;

  • %s Memformat nilai sebagai string.
  • %datau %iMemformat nilai sebagai bilangan bulat.
  • %f Memformat nilai sebagai nilai floating point.
  • %o Memformat nilai sebagai elemen DOM yang dapat diperluas (seperti pada panel Elemen).
  • %O Memformat nilai sebagai objek JavaScript yang dapat diperluas.
  • %c Memformat string keluaran sesuai dengan gaya CSS yang Anda berikan.

Firefox juga memiliki String Substitions yang memiliki opsi serupa.

  • %oMenghasilkan hyperlink ke objek JavaScript. Mengklik tautan membuka inspektur.
  • %datau %iMenghasilkan bilangan bulat. Pemformatan belum didukung.
  • %s Menghasilkan string.
  • %fMenghasilkan nilai floating-point. Pemformatan belum didukung.

Safari memiliki format gaya printf

  • %datau %iInteger
  • %[0.N]f Nilai titik apung dengan N digit presisi
  • %o Obyek
  • %s Tali
Dave Anderson
sumber
1
jawaban referensi yang bagus
David
1
% O sangat membantu
everton
4

Bagus dan sederhana:

console.log("object: %O", obj)
mbenhalima
sumber
1
Bisakah Anda jelaskan untuk apa% O? haruskah itu O khusus? - solusi Anda bekerja seperti pesona
Anthonius
O singkatan dari objek, jadi selama objek dapat dicetak sebagai string, itu harus dicetak tanpa masalah. Ini telah membantu saya memecahkan masalah dalam banyak kasus di mana saya tidak yakin di mana kesalahannya
mbenhalima
Saya lupa memberi tahu di sini, sebenarnya kita tidak perlu menggunakan% O. Kita dapat langsung menggunakan console.log ("object:", obj) terima kasih @mbenhalima
Anthonius
3

Gunakan saja

console.info("CONSOLE LOG : ")
console.log(response);
console.info("CONSOLE DIR : ")
console.dir(response);

dan Anda akan mendapatkan ini di konsol chrome:

CONSOLE LOG : 
facebookSDK_JS.html:56 Object {name: "Diego Matos", id: "10155988777540434"}
facebookSDK_JS.html:57 CONSOLE DIR : 
facebookSDK_JS.html:58 Objectid: "10155988777540434"name: "Diego Matos"__proto__: Object
diego matos - keke
sumber
2

Fungsi sederhana untuk mengingatkan konten suatu objek atau array.
Panggil fungsi ini dengan array atau string atau objek yang memberitahukan isinya.

Fungsi

function print_r(printthis, returnoutput) {
    var output = '';

    if($.isArray(printthis) || typeof(printthis) == 'object') {
        for(var i in printthis) {
            output += i + ' : ' + print_r(printthis[i], true) + '\n';
        }
    }else {
        output += printthis;
    }
    if(returnoutput && returnoutput == true) {
        return output;
    }else {
        alert(output);
    }
}

Pemakaian

var data = [1, 2, 3, 4];
print_r(data);
Rayiez
sumber
2

Kode berikut akan menampilkan data json lengkap di kotak peringatan

var data= '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

json = JSON.parse(data);
window.alert(JSON.stringify(json));
Kiran Kumar Kotari
sumber
2

Jika Anda ingin men-debug mengapa tidak menggunakan debug konsol

window.console.debug(jsonObject);
Ruwantha
sumber
0

Jika Anda bekerja di js di server, hanya sedikit lebih banyak senam berjalan jauh ... Inilah ppos saya (cantik-cetak-di-server):

ppos = (object, space = 2) => JSON.stringify(object, null, space).split('\n').forEach(s => console.log(s));

yang melakukan bang-up pekerjaan menciptakan sesuatu yang saya benar-benar dapat membaca ketika saya sedang menulis kode server.

Perangkat Lunak Barbar
sumber
0

Saya tidak tahu bagaimana ini tidak pernah dibuat secara resmi, tetapi saya telah menambahkan jsonmetode saya sendiri ke consoleobjek untuk mencetak log yang lebih mudah:

Mengamati Objek (non-primitif) dalam javascript sedikit seperti mekanika kuantum .. apa yang Anda "ukur" mungkin bukan keadaan sebenarnya, yang sudah berubah.

console.json = console.json || function(argument){
    for(var arg=0; arg < arguments.length; ++arg)
        console.log(  JSON.stringify(arguments[arg], null, 4)  )
}

// use example
console.json(   [1,'a', null, {a:1}], {a:[1,2]}    )

Berkali-kali diperlukan untuk melihat versi objek yang dikencangkan karena mencetaknya apa adanya (Objek mentah) akan mencetak versi "langsung" objek yang dimutasi saat program berlangsung, dan tidak akan mencerminkan keadaan objek tersebut. pada titik waktu yang dicatat, misalnya:

var foo = {a:1, b:[1,2,3]}

// lets peek under the hood
console.log(foo) 

// program keeps doing things which affect the observed object
foo.a = 2
foo.b = null
vsync
sumber