Pertanyaan Bagaimana saya bisa mencetak JSON yang cantik menggunakan JavaScript?


Bagaimana saya bisa menampilkan JSON dalam format yang mudah dibaca (untuk pembaca manusia)? Saya mencari terutama indentasi dan spasi, mungkin dengan warna / font-style / dll.


1660
2018-01-26 22:33


asal


Jawaban:


Pencetakan-cantik diimplementasikan secara asli di JSON.stringify(). Argumen ketiga memungkinkan pencetakan yang cantik dan mengatur jarak yang digunakan:

var str = JSON.stringify(obj, null, 2); // spacing level = 2

Jika Anda membutuhkan penyorotan sintaks, Anda mungkin menggunakan beberapa sulap regex seperti ini:

function syntaxHighlight(json) {
    if (typeof json != 'string') {
         json = JSON.stringify(json, undefined, 2);
    }
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

Lihat beraksi di sini: jsfiddle

Atau cuplikan lengkap yang diberikan di bawah ini:

function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

function syntaxHighlight(json) {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

var obj = {a:1, 'b':'foo', c:[false,'false',null, 'null', {d:{e:1.3e5,f:'1.3e5'}}]};
var str = JSON.stringify(obj, undefined, 4);

output(str);
output(syntaxHighlight(str));
pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }


3692
2017-08-28 10:56



Jawaban pengguna Pumbaa80 sangat bagus jika Anda memiliki obyek Anda ingin cukup dicetak. Jika Anda mulai dari JSON yang valid tali yang ingin Anda cetak cantik, Anda perlu mengonversinya menjadi objek terlebih dahulu:

var jsonString = '{"some":"json"}';
var jsonPretty = JSON.stringify(JSON.parse(jsonString),null,2);  

Ini membangun objek JSON dari string, dan kemudian mengubahnya kembali menjadi string menggunakan cetakan cantik JSON stringify.


180
2018-06-21 20:35



Berdasarkan jawaban Pumbaa80 saya telah memodifikasi kode untuk menggunakan warna console.log (bekerja di Chrome pasti) dan bukan HTML. Output dapat dilihat di dalam konsol. Anda dapat mengedit _variables di dalam fungsi menambahkan beberapa gaya lagi.

function JSONstringify(json) {
    if (typeof json != 'string') {
        json = JSON.stringify(json, undefined, '\t');
    }

    var 
        arr = [],
        _string = 'color:green',
        _number = 'color:darkorange',
        _boolean = 'color:blue',
        _null = 'color:magenta',
        _key = 'color:red';

    json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var style = _number;
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                style = _key;
            } else {
                style = _string;
            }
        } else if (/true|false/.test(match)) {
            style = _boolean;
        } else if (/null/.test(match)) {
            style = _null;
        }
        arr.push(style);
        arr.push('');
        return '%c' + match + '%c';
    });

    arr.unshift(json);

    console.log.apply(console, arr);
}

Berikut adalah bookmarklet yang dapat Anda gunakan:

javascript:function JSONstringify(json) {if (typeof json != 'string') {json = JSON.stringify(json, undefined, '\t');}var arr = [],_string = 'color:green',_number = 'color:darkorange',_boolean = 'color:blue',_null = 'color:magenta',_key = 'color:red';json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {var style = _number;if (/^"/.test(match)) {if (/:$/.test(match)) {style = _key;} else {style = _string;}} else if (/true|false/.test(match)) {style = _boolean;} else if (/null/.test(match)) {style = _null;}arr.push(style);arr.push('');return '%c' + match + '%c';});arr.unshift(json);console.log.apply(console, arr);};void(0);

Pemakaian:

var obj = {a:1, 'b':'foo', c:[false,null, {d:{e:1.3e5}}]};
JSONstringify(obj);

Edit: Saya baru saja mencoba untuk melarikan diri dari simbol% ​​dengan baris ini, setelah deklarasi variabel:

json = json.replace(/%/g, '%%');

Tetapi saya menemukan bahwa Chrome tidak mendukung% keluar di konsol. Aneh ... Mungkin ini akan berhasil di masa depan.

Tepuk tangan!

enter image description here


23
2018-01-29 13:16



Saya menggunakan Ekstensi Chrome JSONView (itu cantik karena mendapat :):

Edit: ditambahkan jsonreport.js

Saya juga telah merilis JSONreport.js, penampil cetak JSON online yang berdiri sendiri, yang menyediakan laporan HTML5 yang dapat dibaca manusia yang dapat Anda gunakan untuk melihat data JSON apa pun.

Anda dapat membaca lebih lanjut tentang format di Format Laporan HTML5 HTML Baru.


20
2018-01-26 22:37



Kamu dapat memakai console.dir(), yang merupakan jalan pintas untuk console.log(util.inspect()). (Satu-satunya perbedaan adalah bahwa itu melewati kebiasaan apa pun inspect() fungsi didefinisikan pada suatu objek.)

Itu menggunakan penyorotan sintaksis, indentasi cerdas, menghapus kutipan dari kunci dan hanya menghasilkan output secantik yang didapat.

const object = JSON.parse(jsonString)

console.dir(object, {depth: null, colors: true})

dan untuk baris perintah:

cat package.json | node -e "process.stdin.pipe(new stream.Writable({write: chunk => console.dir(JSON.parse(chunk), {depth: null, colors: true})}))"


16
2017-11-14 09:46



Cara yang lebih baik.

Prettify JSON Array dalam Javascript

JSON.stringify(jsonobj,null,'\t')

11
2017-10-21 10:19



var jsonObj = {"streetLabel": "Avenue Anatole France", "city": "Paris 07",  "postalCode": "75007", "countryCode": "FRA",  "countryLabel": "France" };

document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj);

Dalam hal menampilkan dalam HTML, Anda harus menambahkan balise <pre></pre>

document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"

Contoh:

var jsonObj = {"streetLabel": "Avenue Anatole France", "city": "Paris 07",  "postalCode": "75007", "countryCode": "FRA",  "countryLabel": "France" };

document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj);

document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"
div { float:left; clear:both; margin: 1em 0; }
<div id="result-before"></div>
<div id="result-after"></div>


7
2018-03-01 15:42