Làm cách nào tôi có thể hiển thị JSON theo định dạng dễ đọc (dành cho người đọc)? Tôi đang tìm kiếm chủ yếu cho thụt lề và khoảng trắng, có lẽ cả màu sắc / kiểu phông chữ / v.v.
<pre>
thẻ.
Làm cách nào tôi có thể hiển thị JSON theo định dạng dễ đọc (dành cho người đọc)? Tôi đang tìm kiếm chủ yếu cho thụt lề và khoảng trắng, có lẽ cả màu sắc / kiểu phông chữ / v.v.
<pre>
thẻ.
Câu trả lời:
In ấn đẹp được thực hiện tự nhiên trongJSON.stringify()
. Đối số thứ ba cho phép in đẹp và đặt khoảng cách để sử dụng:
var str = JSON.stringify(obj, null, 2); // spacing level = 2
Nếu bạn cần tô sáng cú pháp, bạn có thể sử dụng một số phép thuật regex như vậy:
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>';
});
}
Xem trong hành động ở đây: jsfiddle
Hoặc một đoạn đầy đủ được cung cấp dưới đây:
<pre>
, mặc dù.
#transactionResponse
phần tử của bạn có white-space: pre;
kiểu CSS.
stringify(...)
hoạt động trên các đối tượng JSON , không phải trên chuỗi JSON. Nếu bạn có một chuỗi, JSON.parse(...)
trước tiên bạn cần phải có
Câu trả lời của người dùng Pumbaa80 là tuyệt vời nếu bạn có một đối tượng bạn muốn in đẹp. Nếu bạn đang bắt đầu từ một chuỗi JSON hợp lệ mà bạn muốn in đẹp, trước tiên bạn cần chuyển đổi nó thành một đối tượng:
var jsonString = '{"some":"json"}';
var jsonPretty = JSON.stringify(JSON.parse(jsonString),null,2);
Điều này xây dựng một đối tượng JSON từ chuỗi, sau đó chuyển đổi nó trở lại thành chuỗi bằng cách sử dụng bản in đẹp của JSON stringify.
JSON.parse
vì vậy tôi đã sửa đổi nó thành JSON.stringify(jsonString, null, 2)
. Phụ thuộc vào JSON / Object của bạn.
<pre></pre>
thẻ.
JSON.parse
chỉ chết nếu bạn có một chuỗi JSON không hợp lệ hoặc nó đã được chuyển đổi thành một đối tượng ... hãy chắc chắn rằng bạn biết kiểu dữ liệu nào bạn đang xử lý trước khi thửJSON.parse
Dựa trên câu trả lời của Pumbaa80, tôi đã sửa đổi mã để sử dụng màu console.log (chắc chắn hoạt động trên Chrome) và không phải HTML. Đầu ra có thể được nhìn thấy bên trong giao diện điều khiển. Bạn có thể chỉnh sửa các biến trong hàm thêm một số kiểu.
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);
}
Đây là một bookmarklet bạn có thể sử dụng:
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);
Sử dụng:
var obj = {a:1, 'b':'foo', c:[false,null, {d:{e:1.3e5}}]};
JSONstringify(obj);
Chỉnh sửa: Tôi vừa cố thoát biểu tượng% bằng dòng này, sau khi khai báo biến:
json = json.replace(/%/g, '%%');
Nhưng tôi phát hiện ra rằng Chrome không hỗ trợ% thoát trong bảng điều khiển. Lạ thật ... Có lẽ điều này sẽ hoạt động trong tương lai.
Chúc mừng!
var jsonObj = {"streetLabel": "Avenue Anatole France", "city": "Paris 07", "postalCode": "75007", "countryCode": "FRA", "countryLabel": "France" };
document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj);
Trong trường hợp hiển thị trong HTML, bạn nên thêm một balise <pre></pre>
document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"
Thí dụ:
<pre>
buộc nếu bạn hiển thị JSON trong a <div>
. Nâng cao chỉ cho gợi ý đó!
Tôi sử dụng tiện ích mở rộng JSONView Chrome (nó cũng đẹp như vậy :):
Chỉnh sửa: đã thêm jsonreport.js
Tôi cũng đã phát hành một trình xem in JSON độc lập trực tuyến, jsonreport.js, cung cấp báo cáo HTML5 có thể đọc được mà bạn có thể sử dụng để xem bất kỳ dữ liệu JSON nào.
Bạn có thể đọc thêm về định dạng trong Định dạng Báo cáo HTML5 JavaScript mới .
Bạn có thể sử dụng console.dir()
, đó là một phím tắt cho console.log(util.inspect())
. (Sự khác biệt duy nhất là nó bỏ qua mọi tùy chỉnhinspect()
chức năng được xác định trên một đối tượng.)
Nó sử dụng làm nổi bật cú pháp , thụt lề thông minh , xóa dấu ngoặc kép khỏi các phím và chỉ làm cho đầu ra đẹp như mong muốn.
const object = JSON.parse(jsonString)
console.dir(object, {depth: null, colors: true})
và cho dòng lệnh:
cat package.json | node -e "process.stdin.pipe(new stream.Writable({write: chunk => console.dir(JSON.parse(chunk), {depth: null, colors: true})}))"
Đây là một HTML tuyệt vời của user123444555621 được điều chỉnh cho các thiết bị đầu cuối. Tiện dụng để gỡ lỗi các tập lệnh Node:
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";
}
);
}
Sử dụng:
// thing = any json OR string of json
prettyJ(thing);
Đối với mục đích gỡ lỗi tôi sử dụng:
console.debug ("% o", dữ liệu);
console.debug(data);
(ít nhất) Chrome và Firefox. Nó không hiển thị đại diện JSON data
, chứ đừng nói đến một bản in đẹp.
console.debug("%s: %o x %d", str, data, cnt);
vẫn có thể hữu ích cho ai đó.
console.dir
đó cho phép điều hướng dữ liệu.
Không hài lòng với các máy in đẹp khác cho Ruby, tôi đã tự viết ( NeatJSON ) và sau đó chuyển nó sang JavaScript bao gồm một trình định dạng trực tuyến miễn phí . Mã này là miễn phí theo giấy phép MIT (khá cho phép).
Các tính năng (tất cả tùy chọn):
Tôi sẽ sao chép mã nguồn ở đây để đây không chỉ là một liên kết đến thư viện, nhưng tôi khuyến khích bạn truy cập trang dự án GitHub , vì điều đó sẽ được cập nhật và mã bên dưới sẽ không được cập nhật.
(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);
Cảm ơn rất nhiều @all! Dựa trên các câu trả lời trước, đây là một phương pháp biến thể khác cung cấp các quy tắc thay thế tùy chỉnh làm tham số:
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;
}
Nó hoạt động tốt:
console.table()
Đọc thêm tại đây: https://developer.mozilla.org/pt-BR/docs/Web/API/Console/table
JSON của Douglas Crockford trong thư viện JavaScript sẽ in JSON đẹp thông qua phương thức chuỗi.
Bạn cũng có thể thấy câu trả lời cho câu hỏi cũ hơn này hữu ích: Làm cách nào tôi có thể in JSON đẹp trong tập lệnh shell (unix)?
Hôm nay tôi gặp phải một vấn đề với mã của @ Pumbaa80. Tôi đang cố gắng áp dụng tô sáng cú pháp JSON cho dữ liệu mà tôi đang hiển thị trong chế độ xem Mithril , vì vậy tôi cần tạo các nút DOM cho mọi thứ trong JSON.stringify
đầu ra.
Tôi chia regex thực sự dài thành các phần thành phần của nó là tốt.
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)
Mã trong bối cảnh trên Github tại đây
Đây là một thành phần màu / định dạng JSON đơn giản được viết bằng React:
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>;
};
Xem nó hoạt động trong CodePen này: https://codepen.io/benshope/pen/BxVpjo
Mong rằng sẽ giúp!
Bạn có thể sử dụng JSON.stringify(your object, null, 2)
Tham số thứ hai có thể được sử dụng làm hàm thay thế, lấy khóa và Val làm tham số. Điều này có thể được sử dụng trong trường hợp bạn muốn sửa đổi một cái gì đó trong đối tượng JSON của mình.
tham khảo thêm: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/opesify
Nếu bạn cần điều này để làm việc trong một vùng văn bản, giải pháp được chấp nhận sẽ không hoạt động.
<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;
}
Nếu bạn đang tìm kiếm một thư viện đẹp để làm đẹp json trên trang web ...
Prism.js là khá tốt.
Tôi đã tìm thấy bằng cách sử dụng JSON.opesify (obj, không xác định, 2) để lấy vết lõm, và sau đó sử dụng lăng kính để thêm một chủ đề là một cách tiếp cận tốt.
Nếu bạn đang tải JSON thông qua một cuộc gọi ajax, thì bạn có thể chạy một trong các phương thức tiện ích của Prism để làm đẹp
Ví dụ:
Prism.highlightAll()
Cái này đẹp đấy:
https://github.com/mafffy/json-markup từmafintosh
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>
Biểu định kiểu có thể được tìm thấy ở đây
https://raw.githubusercontent.com/mafintosh/json-markup/master/style.css
Không thể tìm thấy bất kỳ giải pháp nào có tô sáng cú pháp tốt cho bảng điều khiển, vì vậy đây là 2p của tôi
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"]});
Đây là cách bạn có thể in mà không cần sử dụng chức năng gốc.
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
}
}
*/
Cách đơn giản nhất để hiển thị một đối tượng cho mục đích gỡ lỗi:
console.log("data",data) // lets you unfold the object manually
Nếu bạn muốn hiển thị đối tượng trong DOM, bạn nên xem xét rằng nó có thể chứa các chuỗi sẽ được hiểu là HTML. Vì vậy, bạn cần phải thực hiện một số thoát ...
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>
Để làm nổi bật và làm đẹp nó HTML
bằng cách sử dụng 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>";
}
);
}
Tôi khuyên bạn nên sử dụng HighlightJS . Nó sử dụng nguyên tắc giống như câu trả lời được chấp nhận, nhưng cũng hoạt động với nhiều ngôn ngữ khác và có nhiều cách phối màu được xác định trước . Nếu sử dụng RequireJS , bạn có thể tạo mô-đun tương thích với
python3 tools/build.py -tamd json xml <specify other language here>
Thế hệ dựa vào Python3 và Java. Thêm -n
để tạo một phiên bản không rút gọn.