JSON පහසුවෙන් කියවිය හැකි (මිනිස් පා readers කයින් සඳහා) ආකෘතියකින් පෙන්වන්නේ කෙසේද? මම මූලික වශයෙන් වර්ණ / අකුරු-මෝස්තර / යනාදිය සහිත ඉන්ඩෙන්ටේෂන් සහ වයිට්ස්පේස් සඳහා සොයමි.
<pre>
.
JSON පහසුවෙන් කියවිය හැකි (මිනිස් පා readers කයින් සඳහා) ආකෘතියකින් පෙන්වන්නේ කෙසේද? මම මූලික වශයෙන් වර්ණ / අකුරු-මෝස්තර / යනාදිය සහිත ඉන්ඩෙන්ටේෂන් සහ වයිට්ස්පේස් සඳහා සොයමි.
<pre>
.
Answers:
ලස්සන මුද්රණය දේශීයව ක්රියාත්මක වේ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>
.
#transactionResponse
අංගය white-space: pre;
CSS ශෛලියක් ඇති බවට වග බලා ගන්න .
stringify(...)
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 / වස්තුව මත රඳා පවතී.
<pre></pre>
ටැග් වලින් ඔතා තැබිය යුතු බව සලකන්න .
JSON.parse
මිය යන්නේ ඔබට අවලංගු JSON str එකක් තිබේ නම් හෝ එය දැනටමත් වස්තුවක් බවට පරිවර්තනය කර ඇත්නම් පමණි ... උත්සාහ කිරීමට පෙර ඔබ ගනුදෙනු කරන්නේ කුමන දත්ත සමුදායක් දැයි දැන ගැනීමට වග බලා ගන්නJSON.parse
Pumbaa80 හි පිළිතුර මත පදනම්ව මම HTML නොව, console.log වර්ණ භාවිතා කිරීමට කේතය වෙනස් කර ඇත (නිසැකවම Chrome හි වැඩ කරයි). ප්රතිදානය කොන්සෝලය තුළ දැකිය හැකිය. ශ්රිතය තුළ ඇති _ විචල්යතාවයන් ඔබට තවත් මෝස්තර කිහිපයක් එකතු කළ හැකිය.
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, '%%');
නමුත් ක්රෝම් කොන්සෝලය තුළ% ගැලවීමට සහය නොදක්වන බව මම සොයා ගතිමි. අමුතුයි ... සමහර විට මෙය අනාගතයේදී ක්රියාත්මක වනු ඇත.
චියර්ස්!
var jsonObj = {"streetLabel": "Avenue Anatole France", "city": "Paris 07", "postalCode": "75007", "countryCode": "FRA", "countryLabel": "France" };
document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj);
HTML හි දර්ශනය වන විට, ඔබ බැලස් එකක් එකතු කළ යුතුය <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 ද මම නිකුත් කර ඇත්තෙමි.
නව ජාවාස්ක්රිප්ට් 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})}))"
මෙන්න පරිශීලක 123444555621 හි නියමයි 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);
(අවම වශයෙන්) ක්රෝම් සහ ෆයර්ෆොක්ස් වල සිදු කිරීමට සමාන වේ. එය data
ලස්සන ලෙස මුද්රණය කළ එකක් පමණක් නොව JSON නිරූපණයක් පෙන්වන්නේ නැත .
console.debug("%s: %o x %d", str, data, cnt);
යමෙකුට තවමත් ප්රයෝජනවත් විය හැකිය.
console.dir
දත්ත සැරිසැරීමට ඉඩ සලසන දේ සොයා බලන්න .
රූබි සඳහා වෙනත් ලස්සන මුද්රණ යන්ත්ර ගැන සෑහීමකට පත් නොවී, මම මගේම ( NeatJSON ) ලියා පසුව නොමිලේ මාර්ගගත ආකෘතියක් ඇතුළුව ජාවාස්ක්රිප්ට් වෙත ගෙන ගියෙමි . කේතය MIT බලපත්රය යටතේ නොමිලේ (තරමක් අවසර ඇත).
විශේෂාංග (සියල්ල අත්යවශ්ය නොවේ):
මූලාශ්ර කේතය මම මෙහි පිටපත් කරමි, මෙය පුස්තකාලයකට සබැඳියක් පමණක් නොව, 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
ජාවාස්ක්රිප්ට් පුස්තකාලයේ ඩග්ලස් ක්රොක්ෆර්ඩ්ගේ JSON දැඩි ක්රමවේදය හරහා JSON මුද්රණය කරනු ඇත.
මෙම පැරණි ප්රශ්නයට පිළිතුරු ඔබට ප්රයෝජනවත් විය හැකිය : JSON (යුනික්ස්) ෂෙල් ස්ක්රිප්ටයේ මුද්රණය කරන්නේ කෙසේද?
මම අද @ Pumbaa80 කේතය සමඟ ගැටලුවකට මුහුණ දුන්නා. මම මිත්රිල් දර්ශනයකින් විදහා දක්වන දත්ත වලට 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)
ගිතුබ් පිළිබඳ සන්දර්භය තුළ කේතය මෙහි ඇත
ප්රතික්රියා ලෙස ලියා ඇති සරල JSON ආකෘතිය / වර්ණ සං component ටකය මෙන්න:
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>;
};
මෙම කෝඩ්පෙන් හි එය ක්රියාත්මක වන ආකාරය බලන්න: https://codepen.io/benshope/pen/BxVpjo
උපකාරවත් වන බලාපොරොත්තුව!
ඔබට භාවිතා කළ හැකිය JSON.stringify(your object, null, 2)
දෙවන පරාමිතිය යතුර සහ අගය පරාමිතීන් ලෙස ගන්නා ප්රතිස්ථාපක ශ්රිතයක් ලෙස භාවිතා කළ හැකිය. ඔබේ 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 මවාපෑමට ලස්සන පුස්තකාලයක් සොයන්නේ නම් ...
Prism.js සෑහෙන්න හොඳයි.
ඉන්ඩෙන්ටේෂන් ලබා ගැනීම සඳහා මම JSON.stringify (obj, undefined, 2) භාවිතා කළ අතර පසුව තේමාවක් එක් කිරීමට ප්රිස්ම භාවිතා කිරීම හොඳ ප්රවේශයකි.
ඔබ අජැක්ස් ඇමතුමක් හරහා JSON වෙත පූරණය කරන්නේ නම්, එවිට ඔබට ප්රිස්මයේ උපයෝගීතා ක්රමවලින් එකක් ධාවනය කළ හැකිය
උදාහරණයක් වශයෙන්:
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"]});
දේශීය ශ්රිතය භාවිතා නොකර මුද්රණය කළ හැකි ආකාරය මෙන්න.
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>";
}
);
}