मैं 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 और एक की जरूरत है मत भूलना ।
#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 स्ट्रिंग के सुंदर प्रिंट का उपयोग करके इसे वापस स्ट्रिंग में कनवर्ट करता है।
JSON.parse
मैंने इसे संशोधित किया JSON.stringify(jsonString, null, 2)
। आपके JSON / ऑब्जेक्ट पर निर्भर करता है।
<pre></pre>
टैग में लपेटने की आवश्यकता होती है ।
JSON.parse
केवल तभी मर जाता है जब आपके पास एक अमान्य JSON स्ट्रॉग होता है या यह पहले से ही किसी ऑब्जेक्ट में परिवर्तित हो जाता है ... सुनिश्चित करें कि आप जानते हैं कि कोशिश करने से पहले आपका डेटाटाइप क्या हो रहा हैJSON.parse
pre
करता है।
Pumbaa80 के उत्तर के आधार पर मैंने सांत्वना का उपयोग करने के लिए कोड को संशोधित किया है। रंग (क्रोम पर काम करना सुनिश्चित करें) और HTML नहीं। कंसोल के अंदर आउटपुट देखा जा सकता है। आप फ़ंक्शन के अंदर _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, '%%');
लेकिन मुझे पता चला है कि क्रोम कंसोल में भागने से% का समर्थन नहीं कर रहा है। अजीब ... शायद यह भविष्य में काम करेगा।
चीयर्स!
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 सुंदर प्रिंट दर्शक, jsonreport.js भी जारी किया है, जो मानव पठनीय HTML5 रिपोर्ट प्रदान करता है जिसका उपयोग आप किसी भी JSON डेटा को देखने के लिए कर सकते हैं।
आप न्यू जावास्क्रिप्ट एचटीएमएल 5 रिपोर्ट प्रारूप में प्रारूप के बारे में अधिक पढ़ सकते हैं ।
आप उपयोग कर सकते हैं 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);
डीबगिंग उद्देश्य के लिए मैं उपयोग करता हूं:
कंसोल.डबग ("% o", डेटा);
console.debug(data);
(कम से कम) क्रोम और फ़ायरफ़ॉक्स में करने के बराबर है । यह एक JSON प्रतिनिधित्व नहीं दिखाता है data
, अकेले एक सुंदर मुद्रित करें।
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)
यहाँ Github पर संदर्भ में कोड
यहाँ एक साधारण 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>;
};
इसे इस कोड में काम करते हुए देखें: 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 में काम करने के लिए इसकी आवश्यकता है तो स्वीकृत समाधान काम नहीं करेगा।
<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, अपरिभाषित, 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
एचटीएमएल
<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 का उपयोग करने की सलाह देता हूं । यह स्वीकृत उत्तर के रूप में एक ही सिद्धांत का उपयोग करता है , लेकिन कई अन्य भाषाओं के लिए भी काम करता है , और कई पूर्व-निर्धारित रंग योजनाएं हैं । आवश्यकताएँ का उपयोग करते हुए , आप के साथ एक संगत मॉड्यूल उत्पन्न कर सकते हैं
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>";
}
);
}