Soru JSON'u JavaScript kullanarak nasıl güzel yazdırabilirim?


JSON'u okunması kolay (insan okuyucular için) formatta nasıl görüntüleyebilirim? Öncelikle renk / yazı tipi stili / vb. İle girinti ve beyaz boşluklara bakıyorum.


1666
2018-01-26 22:33


Menşei


Olası kopya JSON'u programatik olarak nasıl güzelleştirebilirim? - hippietrail
@hippietrail meta.stackoverflow.com/q/251938/3853934 - Michał Perłakowski
Sadece html'ye çıktıysanız, bunu <pre> etiket. - Ryan Walker


Cevaplar:


Pretty-print doğal olarak uygulanır JSON.stringify(). Üçüncü argüman oldukça basım sağlar ve kullanılacak aralıkları belirler:

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

Sözdizimi vurgulamaya ihtiyacınız varsa, bazı regex büyülerini şöyle kullanabilirsiniz:

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>';
    });
}

Burada harekete bakınız: jsfiddle

Ya da aşağıda sağlanan tam snippet:

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; }


3709
2017-08-28 10:56



Süper harika. Ben hata ayıklama için yeni bir pencerede açmak için bir fonksiyon ekledim: var json = syntaxHighlight (JSON.stringify (obj, undefined, 4);); var w = window.open (); var html = "<head> <style> ön {anahat: 1px katı #ccc; dolgu: 5px; kenar boşluğu: 5px;} .string {color: green;}"; html + = ".number {color: darkorange;} .boolean {color: blue;} .null {color: magenta;} .key {color: red;} </ style> </ head> <body>"; html + = "<önceki>" + json + "</ pre>"; w.document.writeln (HTML); - JayCrossler
Güzel. Unutma css ve bir <pre>olsa da. - NoBugs
bir sebepten dolayı, onu uyardığımda, gerçekten de biçimlendirilmiş bir dizgeyi jQuery: $ ("# transactionResponse") ile dağıttığım halde düz bir dize gösterir. show (). html (prettifyObject (data), null, '\ t'); prettifyObject, yukarıda ilk iki satırınızı içeren bir yöntemdir. - PositiveGuy
@CoffeeAddict olduğundan emin olun #transactionResponse eleman var white-space: pre; CSS stili olarak. - user123444555621
Bunu not et stringify(...) JSON üzerinde çalışıyor nesneleriJSON dizelerinde değil. Bir diziniz varsa, yapmanız gerekir JSON.parse(...) ilk - Vihung


Eğer varsa, Pumbaa80'in cevabı harikadır. nesne oldukça basılmış istiyorsun. Geçerli bir JSON'dan başlıyorsanız sicim oldukça basmak istediğiniz, önce bir nesneye dönüştürmeniz gerekir:

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

Bu, dizeden bir JSON nesnesi oluşturur ve ardından JSON dizesinin güzel baskısını kullanarak bir dizeye dönüştürür.


181
2018-06-21 20:35



Bu benim için çalıştı, ancak kullanarak bir hata attı JSON.parse bu yüzden değiştirdim JSON.stringify(jsonString, null, 2). JSON / Nesneye bağlı. - Jazzy
Dize görüntülendiğinde onu sarmanız gerektiğini unutmayın. <pre></pre> etiketleri. - Undistraction
@Jazzy JSON.parse Sadece geçersiz bir JSON str'iniz varsa veya zaten bir nesneye dönüştürülmüşse, ölür ... denemeden önce uğraştığınız veri tipinin ne olduğunu bildiğinizden emin olun. JSON.parse - Kolob Canyon
@Undistraction Yorumun bana faydalı oldu, tam olarak neyi kontrol ettiğimi kontrol edeceğim pre yapar. - Dhaval Jardosh
@Jazzy Eğer bunu yapman gerekiyorsa, bir JSON dizginiz yoktu, normal bir nesneye sahiptiniz. JSON her zaman dizi. Bu sadece bir Javascript nesnesinin dize tabanlı temsilidir. - Clonkex


Pumbaa80'ın cevabına dayanarak, konsol.log renklerini (Chrome üzerinde çalışıyor) ve HTML'yi kullanmamak için kodu değiştirdim. Çıkış konsolun içinde görülebilir. _Variables öğesini daha fazla stil ekleyerek işlevin içinde düzenleyebilirsiniz.

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);
}

İşte kullanabileceğiniz bir yer imi:

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);

Kullanımı:

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

Düzenleme: Değişkenler beyanından sonra, bu satırdaki% sembolünden kaçmayı denedim:

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

Ancak, Chrome'un konsolda kaçan% desteklemediğini öğrendim. Garip ... Belki bu gelecekte çalışacaktır.

Şerefe!

enter image description here


23
2018-01-29 13:16



Ur kodu kullandım ama çıktıyı json biçiminde alıyorum ama rengi alamıyorum ve son olarak da renk etiketi alıyorum bu çıktı {"error": {"code": 0, "message": "O"}}, renk: kırmızı ,, renk: kırmızı ,, renk: darkorange - ramesh027
Bir yer imi olarak kullanılmasını önermek için +1! Teşekkürler - Renato Gama


ben kullanıyorum JSONView Chrome uzantısı (Bu kadar güzel :):

Düzenleme: eklendi jsonreport.js

Ayrıca, herhangi bir JSON verilerini görüntülemek için kullanabileceğiniz bir kullanıcı tarafından okunabilir HTML5 raporu sağlayan çevrimiçi bağımsız bir JSON güzel baskı görüntüleyici jsonreport.js yayınladım.

Bu formattaki daha fazla bilgiyi okuyabilirsiniz. Yeni JavaScript HTML5 Rapor Biçimi.


20
2018-01-26 22:37



Html öğeleri ve sınıfları ekleyerek bir JSON dizesini oldukça basabilen bir Javascript * .js kitaplığına ihtiyacım vardı. Var sonuç gibi bir şey = prettyPrint ('{"anahtar": "value"}'); - Mark
Bu harika, çünkü kolayca eklenir. Renk ayarlarını bile değiştirebilirsiniz <3 - Luca Steeb


Kullanabilirsiniz console.dir()kısayol olan console.log(util.inspect()). (Tek fark, herhangi bir özel baypas atlatmasıdır inspect() Bir nesne üzerinde tanımlanan işlev.)

Kullanır sözdizimi vurgulama, akıllı girinti, anahtarları tırnaklardan kaldırır ve çıktıyı aldığı kadar güzel yapar.

const object = JSON.parse(jsonString)

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

ve komut satırı için:

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



Bunu elde etmenin herhangi bir yolu genişlemeye başlar? - Daniel Sokolowski
Ne demek @DanielSokolowski? - adius
Chrome Geliştirici Araçları'nda, otomatik olarak genişlemesini sağlamak için herhangi bir şekilde th nesneleri tuşlarına ulaşmak için küçük üçgene tıklamalıyım. snag.gy/7wPqsl.jpg - Daniel Sokolowski
Mh. İyi soru. Birinin farkında değilim, ama gerçekten faydalı olurdu… - adius


Daha iyi yol.

Javascript'te JSON Array Prettify

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

11
2017-10-21 10:19



Ne ve nasıl daha iyi? - Dan Dascalescu
@DanDascalescu Yukarıdakilerin hepsinden daha iyi? - adamj


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

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

HTML’de görüntülenmesi durumunda, bir baldır eklemeniz gerekir. <pre></pre>

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

Örnek:

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