사람이 쉽게 읽을 수있는 형식으로 JSON을 표시하려면 어떻게해야합니까? 나는 주로 색상 / 글꼴 스타일 등으로 들여 쓰기와 공백을 찾고 있습니다.
<pre>
태그로 묶을 수 있습니다 .
사람이 쉽게 읽을 수있는 형식으로 JSON을 표시하려면 어떻게해야합니까? 나는 주로 색상 / 글꼴 스타일 등으로 들여 쓰기와 공백을 찾고 있습니다.
<pre>
태그로 묶을 수 있습니다 .
답변:
프리티 프린팅은로 기본적으로 구현됩니다JSON.stringify()
. 세 번째 인수는 예쁜 인쇄를 가능하게하고 간격을 사용하도록 설정합니다.
var str = JSON.stringify(obj, null, 2); // spacing level = 2
구문 강조가 필요한 경우 다음과 같은 정규식 마술을 사용할 수 있습니다.
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>';
});
}
jsfiddle의 실제 동작보기
또는 아래에 제공된 전체 스 니펫 :
<pre>
그러나 CSS와 a가 필요하다는 것을 잊지 마십시오 .
#transactionResponse
요소가 white-space: pre;
CSS 스타일 인지 확인하십시오 .
stringify(...)
JSON에서 작동은 개체를 하지 JSON 문자열에. 끈이 있다면 JSON.parse(...)
먼저 해야합니다
Pumbaa80 사용자의 대답은 예쁘게 인쇄하고 싶은 물체 가 있다면 좋습니다 . 예쁘게 인쇄하려는 유효한 JSON 문자열 에서 시작하는 경우 먼저 이를 객체로 변환해야합니다.
var jsonString = '{"some":"json"}';
var jsonPretty = JSON.stringify(JSON.parse(jsonString),null,2);
문자열에서 JSON 객체를 작성한 다음 JSON stringify의 예쁜 글씨를 사용하여 문자열로 다시 변환합니다.
JSON.parse
시켜서로 수정했습니다 JSON.stringify(jsonString, null, 2)
. JSON / Object에 따라 다릅니다.
<pre></pre>
태그 로 묶어야합니다 .
JSON.parse
단지 잘못된 JSON의 STR이 있거나 이미 객체로 변환됩니다 ... 당신이하기 전에 다루고있는 데이터 유형 알고 있는지 확인하면 죽는다JSON.parse
Pumbaa80의 답변을 기반으로 HTML이 아닌 console.log 색상 (Chrome에서 작동 함)을 사용하도록 코드를 수정했습니다. 콘솔 내에서 출력을 볼 수 있습니다. 더 많은 스타일을 추가하여 함수 내에서 _variables를 편집 할 수 있습니다.
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);
}
다음은 사용할 수있는 북마크입니다.
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);
용법:
var obj = {a:1, 'b':'foo', c:[false,null, {d:{e:1.3e5}}]};
JSONstringify(obj);
편집 : 변수 선언 후이 줄로 % 기호를 이스케이프하려고했습니다.
json = json.replace(/%/g, '%%');
그러나 Chrome이 콘솔에서 % 이스케이프를 지원하지 않는 것으로 나타났습니다. 이상해 ... 아마도 이것이 나중에 작동 할 것입니다.
건배!
var jsonObj = {"streetLabel": "Avenue Anatole France", "city": "Paris 07", "postalCode": "75007", "countryCode": "FRA", "countryLabel": "France" };
document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj);
HTML로 표시하는 경우 balise를 추가해야합니다 <pre></pre>
document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"
예:
<pre>
당신이에서 JSON을 보여 주면 필수입니다 <div>
. 그 힌트만을 위해 찬성했습니다!
JSONView Chrome 확장 프로그램을 사용합니다 .
편집 : 추가 jsonreport.js
또한 JSON 데이터를 보는 데 사용할 수있는 사람이 읽을 수있는 HTML5 보고서를 제공하는 온라인 독립형 JSON 프리티 프린트 뷰어 인 jsonreport.js를 출시했습니다.
새 JavaScript HTML5 보고서 형식에서 형식에 대한 자세한 내용을 읽을 수 있습니다 .
console.dir()
바로 가기 인을 사용할 수 있습니다 console.log(util.inspect())
. 유일한 차이점은 inspect()
객체에 정의 된 사용자 정의 함수를 무시한다는 것 입니다.
그것은 사용하는 구문 강조 , 스마트 들여 쓰기 , 키 삭제합니다 따옴표를 그냥 꽤가수록로 출력한다.
const object = JSON.parse(jsonString)
console.dir(object, {depth: null, colors: true})
그리고 커맨드 라인 :
cat package.json | node -e "process.stdin.pipe(new stream.Writable({write: chunk => console.dir(JSON.parse(chunk), {depth: null, colors: true})}))"
터미널에 적합한 user123444555621의 멋진 HTML이 있습니다. 노드 스크립트 디버깅에 편리합니다.
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";
}
);
}
용법:
// thing = any json OR string of json
prettyJ(thing);
디버깅 목적으로 다음을 사용합니다.
console.debug ( "% o", 데이터);
console.debug(data);
적어도 Chrome 및 Firefox에서 수행하는 것과 같습니다 . data
예쁘게 인쇄 된 것 뿐만 아니라의 JSON 표현은 표시하지 않습니다 .
console.debug("%s: %o x %d", str, data, cnt);
은 여전히 누군가에게 도움이 될 수 있습니다.
console.dir
데이터를 탐색 할 수있는 방법 도 살펴보십시오 .
Ruby의 다른 예쁜 프린터에 만족하지 않으면 서 내 자신의 NeatJSON을 작성 하고 무료 온라인 포맷터를 포함 하여 JavaScript 로 포팅했습니다 . 코드는 MIT 라이센스에 따라 무료입니다 (quite permissive).
기능 (모든 옵션) :
여기에 소스 코드를 복사하여 라이브러리에 대한 링크가 아니라 GitHub 프로젝트 페이지 로 이동하는 것이 좋습니다 .GitHub 프로젝트 페이지 는 최신 상태로 유지되며 아래 코드는 그렇지 않습니다.
(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);
감사합니다 @all! 이전 답변을 바탕으로 맞춤 교체 규칙을 매개 변수로 제공하는 또 다른 변형 방법이 있습니다.
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;
}
잘 작동한다:
console.table()
자세한 내용은 https://developer.mozilla.org/pt-BR/docs/Web/API/Console/table을 참조하십시오.
JavaScript 라이브러리의 Douglas Crockford의 JSON은 stringify 메소드를 통해 JSON을 인쇄합니다.
이 오래된 질문에 대한 답변이 유용하다는 것을 알 수 있습니다. 유닉스 쉘 스크립트에서 JSON을 어떻게 인쇄합니까?
@ Pumbaa80의 코드로 오늘 문제가 발생했습니다. Mithril 보기 에서 렌더링하는 데이터에 JSON 구문 강조를 적용하려고 하므로 JSON.stringify
출력의 모든 것에 대해 DOM 노드를 만들어야합니다 .
정말 긴 정규 표현식을 구성 요소 부분으로 나눕니다.
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의 컨텍스트 코드
다음은 React로 작성된 간단한 JSON 형식 / 색상 구성 요소입니다.
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>;
};
이 CodePen에서 작동하는 것을 참조하십시오 : https://codepen.io/benshope/pen/BxVpjo
희망이 도움이됩니다!
당신이 사용할 수있는 JSON.stringify(your object, null, 2)
두 번째 매개 변수는 parameters.This 같은 키와 발은 당신이 당신의 JSON 개체 내에서 뭔가를 수정하려는 경우에 사용할 수있는 소요 대체물 함수로 사용할 수 있습니다.
더 많은 참조 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
텍스트 영역에서이 작업을 수행해야하는 경우 허용 된 솔루션이 작동하지 않습니다.
<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;
}
웹 페이지에서 json을 prettify 할 수있는 멋진 라이브러리를 찾고 있다면 ...
Prism.js는 꽤 좋습니다.
JSON.stringify (obj, undefined, 2)를 사용하여 들여 쓰기를 얻은 다음 프리즘을 사용하여 테마를 추가하는 것이 좋은 접근 방식이었습니다.
ajax 호출을 통해 JSON으로로드하는 경우 Prism의 유틸리티 방법 중 하나를 실행하여 미리 확인할 수 있습니다
예를 들면 다음과 같습니다.
Prism.highlightAll()
이거 좋다:
https://github.com/mafintosh/json-markup 에서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>
스타일 시트 예제는 여기에서 찾을 수 있습니다.
https://raw.githubusercontent.com/mafintosh/json-markup/master/style.css
콘솔의 구문 강조가 좋은 솔루션을 찾을 수 없으므로 여기에 2p가 있습니다.
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 사용을 권장 합니다. 허용되는 답변 과 동일한 원칙 을 사용 하지만 다른 많은 언어 에서도 작동 하며 사전 정의 된 많은 색 구성표가 있습니다. RequireJS를 사용하는 경우 다음을 사용하여 호환 가능한 모듈을 생성 할 수 있습니다
python3 tools/build.py -tamd json xml <specify other language here>
세대는 Python3과 Java에 의존합니다. -n
축소되지 않은 버전을 생성하려면 추가하십시오 .
기본 기능을 사용하지 않고 인쇄하는 방법은 다음과 같습니다.
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
}
}
*/
디버깅 목적으로 객체를 표시하는 가장 간단한 방법 :
console.log("data",data) // lets you unfold the object manually
DOM에 객체를 표시하려면 HTML로 해석되는 문자열을 포함 할 수 있다는 점을 고려해야합니다. 따라서 탈출 해야합니다 ...
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>
HTML
사용하여 강조 표시하고 아름답게하려면 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>";
}
);
}