JSON'u okunması kolay (insan okuyucular için) biçiminde nasıl görüntüleyebilirim? Öncelikle girinti ve boşluk, belki de renkler / yazı tipi stilleri / vb.
<pre>
etikete sarabilirsiniz .
JSON'u okunması kolay (insan okuyucular için) biçiminde nasıl görüntüleyebilirim? Öncelikle girinti ve boşluk, belki de renkler / yazı tipi stilleri / vb.
<pre>
etikete sarabilirsiniz .
Yanıtlar:
Güzel baskı yerel olarak uygulanırJSON.stringify()
. Üçüncü argüman güzel yazdırmayı mümkün kılar ve kullanılacak aralığı ayarlar:
var str = JSON.stringify(obj, null, 2); // spacing level = 2
Sözdizimi vurgulamasına ihtiyacınız varsa, şöyle bir regex büyüsü kullanabilirsiniz:
function syntaxHighlight(json) {
if (typeof json != 'string') {
json = JSON.stringify(json, undefined, 2);
}
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
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>';
});
}
Buradaki eyleme bakın: jsfiddle
Veya aşağıda sağlanan tam bir snippet:
<pre>
Yine de css ve a'ya ihtiyacı olduğunu unutmayın .
#transactionResponse
eleman vardır white-space: pre;
CSS tarzı olarak.
stringify(...)
JSON çalışır nesneleri değil JSON dizeleri üzerinde. Eğer bir ipin varsa, JSON.parse(...)
önce
Pumbaa80'in cevabı, oldukça yazdırılmasını istediğiniz bir nesneniz varsa harika . Oldukça yazdırmak istediğiniz geçerli bir JSON dizesinden başlıyorsanız, önce onu 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 stringify'ın güzel baskısını kullanarak nesneyi bir dizeye dönüştürür.
JSON.parse
böylece ben değiştirdim JSON.stringify(jsonString, null, 2)
. JSON / Object'inize bağlıdır.
<pre></pre>
etiketlere sarmanız gerektiğini unutmayın .
JSON.parse
sadece geçersiz bir JSON str'niz varsa veya zaten bir nesneye dönüştürülmüşse ölür ... denemeden önce hangi veri JSON.parse
Pumbaa80'in cevabına dayanarak, HTML'yi değil, console.log renklerini (kesin olarak Chrome üzerinde çalışıyor) kullanmak için kodu değiştirdim. Çıktı konsolun içinde görülebilir. Daha fazla stil ekleyerek işlevin içindeki _ değişkenleri 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 işareti:
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: Ben sadece değişkenler bildirimi sonra, bu çizgi ile% sembolü kaçmaya çalıştı:
json = json.replace(/%/g, '%%');
Ancak Chrome'un konsolda kaçmayı% desteklemediğini öğrendim. Garip ... Belki bu gelecekte işe yarayacaktır.
Şerefe!
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üleniyorsa, bir balya eklemeniz gerekir <pre></pre>
document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"
Misal:
<pre>
Bir JSON gösterirseniz bir zorunluluktur <div>
. Sadece bu ipucu için oylandı!
Kullandığım JSONView Chrome uzantısını o :) alır gibi o kadar güzel (:
Düzenle: eklendi jsonreport.js
Ayrıca, herhangi bir JSON verisini görüntülemek için kullanabileceğiniz, insan tarafından okunabilir bir HTML5 raporu sağlayan çevrimiçi bağımsız bir JSON güzel baskı görüntüleyicisi olan jsonreport.js'yi de yayınladım.
Biçim hakkında daha fazla bilgiyi Yeni JavaScript HTML5 Rapor Biçimi'nde okuyabilirsiniz .
Bunun console.dir()
için bir kısayol olan kullanabilirsiniz console.log(util.inspect())
. (Tek fark, inspect()
bir nesne üzerinde tanımlanan herhangi bir özel işlevi atlamasıdır .)
Sözdizimi vurgulama , akıllı girinti kullanır , tırnaklardan anahtarları kaldırır ve çıktıyı olabildiğince 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})}))"
Kullanıcı123444555621'nin terminaller için uyarlanmış harika HTML'si. Düğüm komut dosyalarında hata ayıklamak için kullanışlı:
function prettyJ(json) {
if (typeof json !== 'string') {
json = JSON.stringify(json, undefined, 2);
}
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
function (match) {
let cls = "\x1b[36m";
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = "\x1b[34m";
} else {
cls = "\x1b[32m";
}
} else if (/true|false/.test(match)) {
cls = "\x1b[35m";
} else if (/null/.test(match)) {
cls = "\x1b[31m";
}
return cls + match + "\x1b[0m";
}
);
}
Kullanımı:
// thing = any json OR string of json
prettyJ(thing);
Hata ayıklama amacıyla kullanıyorum:
console.debug ("% o", veri);
console.debug(data);
(en azından) Chrome ve Firefox'ta yapmaya eşdeğerdir . data
Oldukça basılı olanların bir JSON temsilini göstermiyor .
console.debug("%s: %o x %d", str, data, cnt);
birisine yine de yardımcı olabilir.
console.dir
hangi verilerde gezinebileceğinize bakın.
Ruby için diğer güzel yazıcılardan memnun kalmadım, kendi ( NeatJSON ) yazdım ve daha sonra ücretsiz bir çevrimiçi formatlayıcı da dahil olmak üzere JavaScript'e taşıdım . Kod MIT lisansı altında ücretsizdir (oldukça izin verilir).
Özellikler (tümü isteğe bağlı):
Kaynak kodunu buraya kopyalayacağım, böylece bu sadece bir kütüphanenin bağlantısı değil, aynı zamanda güncel tutulacak ve aşağıdaki kod da olmayacağı için GitHub proje sayfasına gitmenizi tavsiye ediyorum .
(function(exports){
exports.neatJSON = neatJSON;
function neatJSON(value,opts){
opts = opts || {}
if (!('wrap' in opts)) opts.wrap = 80;
if (opts.wrap==true) opts.wrap = -1;
if (!('indent' in opts)) opts.indent = ' ';
if (!('arrayPadding' in opts)) opts.arrayPadding = ('padding' in opts) ? opts.padding : 0;
if (!('objectPadding' in opts)) opts.objectPadding = ('padding' in opts) ? opts.padding : 0;
if (!('afterComma' in opts)) opts.afterComma = ('aroundComma' in opts) ? opts.aroundComma : 0;
if (!('beforeComma' in opts)) opts.beforeComma = ('aroundComma' in opts) ? opts.aroundComma : 0;
if (!('afterColon' in opts)) opts.afterColon = ('aroundColon' in opts) ? opts.aroundColon : 0;
if (!('beforeColon' in opts)) opts.beforeColon = ('aroundColon' in opts) ? opts.aroundColon : 0;
var apad = repeat(' ',opts.arrayPadding),
opad = repeat(' ',opts.objectPadding),
comma = repeat(' ',opts.beforeComma)+','+repeat(' ',opts.afterComma),
colon = repeat(' ',opts.beforeColon)+':'+repeat(' ',opts.afterColon);
return build(value,'');
function build(o,indent){
if (o===null || o===undefined) return indent+'null';
else{
switch(o.constructor){
case Number:
var isFloat = (o === +o && o !== (o|0));
return indent + ((isFloat && ('decimals' in opts)) ? o.toFixed(opts.decimals) : (o+''));
case Array:
var pieces = o.map(function(v){ return build(v,'') });
var oneLine = indent+'['+apad+pieces.join(comma)+apad+']';
if (opts.wrap===false || oneLine.length<=opts.wrap) return oneLine;
if (opts.short){
var indent2 = indent+' '+apad;
pieces = o.map(function(v){ return build(v,indent2) });
pieces[0] = pieces[0].replace(indent2,indent+'['+apad);
pieces[pieces.length-1] = pieces[pieces.length-1]+apad+']';
return pieces.join(',\n');
}else{
var indent2 = indent+opts.indent;
return indent+'[\n'+o.map(function(v){ return build(v,indent2) }).join(',\n')+'\n'+indent+']';
}
case Object:
var keyvals=[],i=0;
for (var k in o) keyvals[i++] = [JSON.stringify(k), build(o[k],'')];
if (opts.sorted) keyvals = keyvals.sort(function(kv1,kv2){ kv1=kv1[0]; kv2=kv2[0]; return kv1<kv2?-1:kv1>kv2?1:0 });
keyvals = keyvals.map(function(kv){ return kv.join(colon) }).join(comma);
var oneLine = indent+"{"+opad+keyvals+opad+"}";
if (opts.wrap===false || oneLine.length<opts.wrap) return oneLine;
if (opts.short){
var keyvals=[],i=0;
for (var k in o) keyvals[i++] = [indent+' '+opad+JSON.stringify(k),o[k]];
if (opts.sorted) keyvals = keyvals.sort(function(kv1,kv2){ kv1=kv1[0]; kv2=kv2[0]; return kv1<kv2?-1:kv1>kv2?1:0 });
keyvals[0][0] = keyvals[0][0].replace(indent+' ',indent+'{');
if (opts.aligned){
var longest = 0;
for (var i=keyvals.length;i--;) if (keyvals[i][0].length>longest) longest = keyvals[i][0].length;
var padding = repeat(' ',longest);
for (var i=keyvals.length;i--;) keyvals[i][0] = padRight(padding,keyvals[i][0]);
}
for (var i=keyvals.length;i--;){
var k=keyvals[i][0], v=keyvals[i][1];
var indent2 = repeat(' ',(k+colon).length);
var oneLine = k+colon+build(v,'');
keyvals[i] = (opts.wrap===false || oneLine.length<=opts.wrap || !v || typeof v!="object") ? oneLine : (k+colon+build(v,indent2).replace(/^\s+/,''));
}
return keyvals.join(',\n') + opad + '}';
}else{
var keyvals=[],i=0;
for (var k in o) keyvals[i++] = [indent+opts.indent+JSON.stringify(k),o[k]];
if (opts.sorted) keyvals = keyvals.sort(function(kv1,kv2){ kv1=kv1[0]; kv2=kv2[0]; return kv1<kv2?-1:kv1>kv2?1:0 });
if (opts.aligned){
var longest = 0;
for (var i=keyvals.length;i--;) if (keyvals[i][0].length>longest) longest = keyvals[i][0].length;
var padding = repeat(' ',longest);
for (var i=keyvals.length;i--;) keyvals[i][0] = padRight(padding,keyvals[i][0]);
}
var indent2 = indent+opts.indent;
for (var i=keyvals.length;i--;){
var k=keyvals[i][0], v=keyvals[i][1];
var oneLine = k+colon+build(v,'');
keyvals[i] = (opts.wrap===false || oneLine.length<=opts.wrap || !v || typeof v!="object") ? oneLine : (k+colon+build(v,indent2).replace(/^\s+/,''));
}
return indent+'{\n'+keyvals.join(',\n')+'\n'+indent+'}'
}
default:
return indent+JSON.stringify(o);
}
}
}
function repeat(str,times){ // http://stackoverflow.com/a/17800645/405017
var result = '';
while(true){
if (times & 1) result += str;
times >>= 1;
if (times) str += str;
else break;
}
return result;
}
function padRight(pad, str){
return (str + pad).substring(0, pad.length);
}
}
neatJSON.version = "0.5";
})(typeof exports === 'undefined' ? this : exports);
Çok teşekkürler @all! Önceki yanıtlara dayanarak, parametre olarak özel değiştirme kuralları sağlayan başka bir varyant yöntemi:
renderJSON : function(json, rr, code, pre){
if (typeof json !== 'string') {
json = JSON.stringify(json, undefined, '\t');
}
var rules = {
def : 'color:black;',
defKey : function(match){
return '<strong>' + match + '</strong>';
},
types : [
{
name : 'True',
regex : /true/,
type : 'boolean',
style : 'color:lightgreen;'
},
{
name : 'False',
regex : /false/,
type : 'boolean',
style : 'color:lightred;'
},
{
name : 'Unicode',
regex : /"(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?/,
type : 'string',
style : 'color:green;'
},
{
name : 'Null',
regex : /null/,
type : 'nil',
style : 'color:magenta;'
},
{
name : 'Number',
regex : /-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/,
type : 'number',
style : 'color:darkorange;'
},
{
name : 'Whitespace',
regex : /\s+/,
type : 'whitespace',
style : function(match){
return ' ';
}
}
],
keys : [
{
name : 'Testkey',
regex : /("testkey")/,
type : 'key',
style : function(match){
return '<h1>' + match + '</h1>';
}
}
],
punctuation : {
name : 'Punctuation',
regex : /([\,\.\}\{\[\]])/,
type : 'punctuation',
style : function(match){
return '<p>________</p>';
}
}
};
if('undefined' !== typeof jQuery){
rules = $.extend(rules, ('object' === typeof rr) ? rr : {});
}else{
for(var k in rr ){
rules[k] = rr[k];
}
}
var str = json.replace(/([\,\.\}\{\[\]]|"(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
var i = 0, p;
if (rules.punctuation.regex.test(match)) {
if('string' === typeof rules.punctuation.style){
return '<span style="'+ rules.punctuation.style + '">' + match + '</span>';
}else if('function' === typeof rules.punctuation.style){
return rules.punctuation.style(match);
} else{
return match;
}
}
if (/^"/.test(match)) {
if (/:$/.test(match)) {
for(i=0;i<rules.keys.length;i++){
p = rules.keys[i];
if (p.regex.test(match)) {
if('string' === typeof p.style){
return '<span style="'+ p.style + '">' + match + '</span>';
}else if('function' === typeof p.style){
return p.style(match);
} else{
return match;
}
}
}
return ('function'===typeof rules.defKey) ? rules.defKey(match) : '<span style="'+ rules.defKey + '">' + match + '</span>';
} else {
return ('function'===typeof rules.def) ? rules.def(match) : '<span style="'+ rules.def + '">' + match + '</span>';
}
} else {
for(i=0;i<rules.types.length;i++){
p = rules.types[i];
if (p.regex.test(match)) {
if('string' === typeof p.style){
return '<span style="'+ p.style + '">' + match + '</span>';
}else if('function' === typeof p.style){
return p.style(match);
} else{
return match;
}
}
}
}
});
if(true === pre)str = '<pre>' + str + '</pre>';
if(true === code)str = '<code>' + str + '</code>';
return str;
}
İyi çalışıyor:
console.table()
Daha fazla bilgiyi buradan edinebilirsiniz: https://developer.mozilla.org/pt-BR/docs/Web/API/Console/table
Douglas Crockford'un JavaScript kitaplığındaki JSON'u stringify yöntemi ile JSON'u güzel bir şekilde basacaktır.
Bu eski sorunun yanıtlarını da yararlı bulabilirsiniz: JSON'u (unix) kabuk betiğinde nasıl güzel yazdırabilirim?
Bugün @ Pumbaa80 koduyla ilgili bir sorunla karşılaştım. Bir Mithril görünümünde oluşturduğum verilere JSON sözdizimi vurgulama uygulamak çalışıyorum , bu yüzden her şey için DOM düğümleri oluşturmak gerekirJSON.stringify
çıktı .
Gerçekten uzun regex'i bileşen parçalarına da böldüm.
render_json = (data) ->
# wraps JSON data in span elements so that syntax highlighting may be
# applied. Should be placed in a `whitespace: pre` context
if typeof(data) isnt 'string'
data = JSON.stringify(data, undefined, 2)
unicode = /"(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?/
keyword = /\b(true|false|null)\b/
whitespace = /\s+/
punctuation = /[,.}{\[\]]/
number = /-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/
syntax = '(' + [unicode, keyword, whitespace,
punctuation, number].map((r) -> r.source).join('|') + ')'
parser = new RegExp(syntax, 'g')
nodes = data.match(parser) ? []
select_class = (node) ->
if punctuation.test(node)
return 'punctuation'
if /^\s+$/.test(node)
return 'whitespace'
if /^\"/.test(node)
if /:$/.test(node)
return 'key'
return 'string'
if /true|false/.test(node)
return 'boolean'
if /null/.test(node)
return 'null'
return 'number'
return nodes.map (node) ->
cls = select_class(node)
return Mithril('span', {class: cls}, node)
Github bağlamında kod burada
React ile yazılmış basit bir JSON formatı / renk bileşeni:
const HighlightedJSON = ({ json }: Object) => {
const highlightedJSON = jsonObj =>
Object.keys(jsonObj).map(key => {
const value = jsonObj[key];
let valueType = typeof value;
const isSimpleValue =
["string", "number", "boolean"].includes(valueType) || !value;
if (isSimpleValue && valueType === "object") {
valueType = "null";
}
return (
<div key={key} className="line">
<span className="key">{key}:</span>
{isSimpleValue ? (
<span className={valueType}>{`${value}`}</span>
) : (
highlightedJSON(value)
)}
</div>
);
});
return <div className="json">{highlightedJSON(json)}</div>;
};
Bu CodePen'de çalıştığını görün: https://codepen.io/benshope/pen/BxVpjo
Umarım yardımcı olur!
Sen kullanabilirsiniz JSON.stringify(your object, null, 2)
İkinci parametre parameters.This gibi anahtar ve Val size JSON nesne içinde bir şeyler değiştirmek istediğiniz durumunda kullanılabilir alan bir ikame fonksiyonu olarak kullanılabilir.
daha fazla referans: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
Bir metin alanında çalışmak için buna ihtiyacınız varsa, kabul edilen çözüm çalışmaz.
<textarea id='textarea'></textarea>
$("#textarea").append(formatJSON(JSON.stringify(jsonobject),true));
function formatJSON(json,textarea) {
var nl;
if(textarea) {
nl = " ";
} else {
nl = "<br>";
}
var tab = "    ";
var ret = "";
var numquotes = 0;
var betweenquotes = false;
var firstquote = false;
for (var i = 0; i < json.length; i++) {
var c = json[i];
if(c == '"') {
numquotes ++;
if((numquotes + 2) % 2 == 1) {
betweenquotes = true;
} else {
betweenquotes = false;
}
if((numquotes + 3) % 4 == 0) {
firstquote = true;
} else {
firstquote = false;
}
}
if(c == '[' && !betweenquotes) {
ret += c;
ret += nl;
continue;
}
if(c == '{' && !betweenquotes) {
ret += tab;
ret += c;
ret += nl;
continue;
}
if(c == '"' && firstquote) {
ret += tab + tab;
ret += c;
continue;
} else if (c == '"' && !firstquote) {
ret += c;
continue;
}
if(c == ',' && !betweenquotes) {
ret += c;
ret += nl;
continue;
}
if(c == '}' && !betweenquotes) {
ret += nl;
ret += tab;
ret += c;
continue;
}
if(c == ']' && !betweenquotes) {
ret += nl;
ret += c;
continue;
}
ret += c;
} // i loop
return ret;
}
Bir web sayfasında json'u güzelleştirmek için güzel bir kütüphane arıyorsanız ...
Prism.js oldukça iyi.
Girintiyi almak için JSON.stringify (obj, undefined, 2) kullanarak buldum ve sonra bir tema eklemek için prizma kullanarak iyi bir yaklaşım oldu.
JSON'a ajax çağrısı yoluyla yüklüyorsanız, prizma için Prizma'nın yardımcı yöntemlerinden birini çalıştırabilirsiniz.
Örneğin:
Prism.highlightAll()
Bu güzel:
https://github.com/mafintosh/json-markup danmafintosh
const jsonMarkup = require('json-markup')
const html = jsonMarkup({hello:'world'})
document.querySelector('#myElem').innerHTML = html
HTML
<link ref="stylesheet" href="style.css">
<div id="myElem></div>
Örnek stil sayfasını burada bulabilirsiniz
https://raw.githubusercontent.com/mafintosh/json-markup/master/style.css
Konsol için iyi bir sözdizimi vurgulaması olan herhangi bir çözüm bulunamadı, bu yüzden 2p'im
npm install cli-highlight --save
const highlight = require('cli-highlight').highlight
console.logjson = (obj) => console.log(
highlight( JSON.stringify(obj, null, 4),
{ language: 'json', ignoreIllegals: true } ));
console.logjson({foo: "bar", someArray: ["string1", "string2"]});
HighlightJS kullanmanızı öneririm . Kabul edilen cevapla aynı prensibi kullanır , ancak diğer birçok dil için de çalışır ve önceden tanımlanmış birçok renk şemasına sahiptir . RequireJS kullanıyorsanız , aşağıdakilerle uyumlu bir modül oluşturabilirsiniz:
python3 tools/build.py -tamd json xml <specify other language here>
Nesil Python3 ve Java'ya dayanır. -n
Küçültülmemiş bir sürüm oluşturmak için ekleyin .
Yerel işlevi kullanmadan nasıl yazdırabileceğiniz aşağıda açıklanmıştır.
function pretty(ob, lvl = 0) {
let temp = [];
if(typeof ob === "object"){
for(let x in ob) {
if(ob.hasOwnProperty(x)) {
temp.push( getTabs(lvl+1) + x + ":" + pretty(ob[x], lvl+1) );
}
}
return "{\n"+ temp.join(",\n") +"\n" + getTabs(lvl) + "}";
}
else {
return ob;
}
}
function getTabs(n) {
let c = 0, res = "";
while(c++ < n)
res+="\t";
return res;
}
let obj = {a: {b: 2}, x: {y: 3}};
console.log(pretty(obj));
/*
{
a: {
b: 2
},
x: {
y: 3
}
}
*/
Bir nesneyi hata ayıklama amacıyla görüntülemenin en basit yolu:
console.log("data",data) // lets you unfold the object manually
Nesneyi DOM'de görüntülemek istiyorsanız, nesnenin HTML olarak yorumlanacak dizeler içerebileceğini düşünmelisiniz. Bu nedenle, kaçmak zorundasınız ...
var s = JSON.stringify(data,null,2) // format
var e = new Option(s).innerHTML // escape
document.body.insertAdjacentHTML('beforeend','<pre>'+e+'</pre>') // display
<!-- here is a complete example pretty print with more space between lines-->
<!-- be sure to pass a json string not a json object -->
<!-- use line-height to increase or decrease spacing between json lines -->
<style type="text/css">
.preJsonTxt{
font-size: 18px;
text-overflow: ellipsis;
overflow: hidden;
line-height: 200%;
}
.boxedIn{
border: 1px solid black;
margin: 20px;
padding: 20px;
}
</style>
<div class="boxedIn">
<h3>Configuration Parameters</h3>
<pre id="jsonCfgParams" class="preJsonTxt">{{ cfgParams }}</pre>
</div>
<script language="JavaScript">
$( document ).ready(function()
{
$(formatJson);
<!-- this will do a pretty print on the json cfg params -->
function formatJson() {
var element = $("#jsonCfgParams");
var obj = JSON.parse(element.text());
element.html(JSON.stringify(obj, undefined, 2));
}
});
</script>
Bunu HTML
kullanarak vurgulamak ve güzelleştirmek için Bootstrap
:
function prettifyJson(json, prettify) {
if (typeof json !== 'string') {
if (prettify) {
json = JSON.stringify(json, undefined, 4);
} else {
json = JSON.stringify(json);
}
}
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
function(match) {
let cls = "<span>";
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = "<span class='text-danger'>";
} else {
cls = "<span>";
}
} else if (/true|false/.test(match)) {
cls = "<span class='text-primary'>";
} else if (/null/.test(match)) {
cls = "<span class='text-info'>";
}
return cls + match + "</span>";
}
);
}