javascript - मैं जावास्क्रिप्ट का उपयोग कर JSON को कैसे प्रिंट कर सकता हूं?
pretty-print (14)
मैं JSON को आसानी से पढ़ने (मानव पाठकों के लिए) प्रारूप में कैसे प्रदर्शित कर सकता हूं? मैं मुख्य रूप से इंडेंटेशन और व्हाइटस्पेस के लिए देख रहा हूं, शायद रंग / फ़ॉन्ट-शैलियों / आदि के साथ भी।
Pumbaa80 के उत्तर के आधार पर मैंने console.log रंगों का उपयोग करने के लिए कोड को संशोधित किया है (निश्चित रूप से क्रोम पर काम कर रहा है) और 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, '%%');
लेकिन मुझे पता चला है कि क्रोम कंसोल में भागने का% समर्थन नहीं कर रहा है। अजीब ... शायद यह भविष्य में काम करेगा।
चीयर्स!
आप 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})}))"
डीबगिंग उद्देश्य के लिए मैं उपयोग करता हूं:
console.debug("%o", data);
बहुत बहुत धन्यवाद @ सभी! पिछले उत्तरों के आधार पर, पैरामीटर के रूप में कस्टम प्रतिस्थापन नियम प्रदान करने वाला एक और प्रकार का तरीका है:
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;
}
मैं JSONView क्रोम एक्सटेंशन का उपयोग करता हूं (यह उतना सुंदर है जितना यह हो जाता है :):
संपादित करें: jsonreport.js जोड़ा jsonreport.js
मैंने एक ऑनलाइन स्टैंड-अलोन JSON सुंदर प्रिंट व्यूअर, jsonreport.js भी जारी किया है, जो एक मानव पठनीय एचटीएमएल 5 रिपोर्ट प्रदान करता है जिसका उपयोग आप किसी भी JSON डेटा को देखने के लिए कर सकते हैं।
आप नई जावास्क्रिप्ट एचटीएमएल 5 रिपोर्ट प्रारूप में प्रारूप के बारे में अधिक पढ़ सकते हैं।
मैं @ Pumbaa80 के कोड के साथ आज एक मुद्दा में भाग गया। मैं जेएसओएन सिंटैक्स को उस डेटा पर हाइलाइट करने का प्रयास कर रहा हूं जिसे मैं Mithril व्यू में प्रस्तुत कर रहा हूं, इसलिए मुझे JSON.stringify आउटपुट में सबकुछ के लिए डोम नोड्स बनाने की आवश्यकता है।
मैं वास्तव में अपने घटक भागों में वास्तव में लंबे regex विभाजित।
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)
here गीथूब पर संदर्भ में कोड
यदि आप net.sf.json का उपयोग करते हैं, तो आप निम्नानुसार प्रिंट कर सकते हैं (एक 4 स्पेस इंडेंटेशन का उपयोग करके):
JSONObject work = JSONObject.fromObject("{\"hi\":\"there\",\"more\":\"stuff\"}");
log.info("WORK="+work.toString(4));
यदि आप किसी वेब पेज पर जेसन को सुंदर बनाने के लिए एक अच्छी लाइब्रेरी की तलाश में हैं ...
Prism.js बहुत अच्छा है।
मैंने इंडेंटेशन प्राप्त करने के लिए JSON.stringify (obj, अपरिभाषित, 2) का उपयोग करके पाया, और फिर थीम जोड़ने के लिए प्रिज्म का उपयोग करना एक अच्छा तरीका था।
यदि आप एक AJAX कॉल के माध्यम से JSON में लोड हो रहे हैं, तो आप प्रिज्म की उपयोगिता विधियों में से एक को प्रसन्न करने के लिए चला सकते हैं
उदाहरण के लिए:
Prism.highlightAll()
यदि आपको टेक्स्टरेरा में काम करने की ज़रूरत है तो स्वीकार्य समाधान काम नहीं करेगा।
<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;
}
यह अच्छा काम करता है:
console.table()
यहां और पढ़ें: https://developer.mozilla.org/pt-BR/docs/Web/API/Console/table
यहां बताया गया है कि आप देशी फ़ंक्शन का उपयोग किये बिना प्रिंट कैसे कर सकते हैं।
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
}
}
*/
रुबी के लिए अन्य सुंदर प्रिंटर से असंतुष्ट, मैंने अपना खुद का ( NeatJSON ) लिखा और फिर इसे एक मुफ्त ऑनलाइन NeatJSON सहित जावास्क्रिप्ट पर पोर्ट किया । कोड एमआईटी लाइसेंस (काफी अनुमोदित) के तहत नि: शुल्क है।
विशेषताएं (सभी वैकल्पिक):
- एक पंक्ति चौड़ाई सेट करें और इस तरह से लपेटें जो ऑब्जेक्ट्स और सरणी को उसी पंक्ति पर रखता है जब वे फिट होते हैं, जब वे प्रति पंक्ति एक मान को लपेटते हैं।
- यदि आप चाहें तो ऑब्जेक्ट कुंजियां सॉर्ट करें।
- ऑब्जेक्ट कुंजियां संरेखित करें (कोलन को लाइन करें)।
- पूर्णांक को गड़बड़ किए बिना, दशमलव संख्याओं को दशमलव संख्याओं में प्रारूपित करें।
- 'शॉर्ट' रैपिंग मोड मूल्यों के समान लाइन पर खोलने और बंद करने वाले ब्रैकेट / ब्रेसेस रखता है, जो कुछ पसंद करते हैं।
- कोनों और कॉमा से पहले / बाद में, ब्रैकेट के बीच, सरणी और वस्तुओं के लिए दूरी पर ग्रैनुलर नियंत्रण।
- फ़ंक्शन दोनों वेब ब्राउज़र और Node.js. दोनों के लिए उपलब्ध कराया गया है।
मैं यहां स्रोत कोड की प्रतिलिपि बनाउंगा ताकि यह सिर्फ लाइब्रेरी का लिंक न हो, लेकिन मैं आपको NeatJSON पर जाने के लिए प्रोत्साहित करता हूं, क्योंकि इसे अद्यतित रखा जाएगा और नीचे दिया गया कोड नहीं होगा।
(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://.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);
Newtonsoft.Json डीएल का प्रयोग करें। यह आईई और क्रोम में ठीक काम है
इस कोड को अपने रेजर व्यू में रखें
if (Model.YourJsonSting!= null)
{
<pre>
<code style="display:block;white-space:pre-wrap">
@JToken.Parse(Model.YourJsonSting).ToString(Formatting.Indented)
</code>
</pre>
}
var jsonObj = {"streetLabel": "Avenue Anatole France", "city": "Paris 07", "postalCode": "75007", "countryCode": "FRA", "countryLabel": "France" };
document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj);
// एचटीएमएल में प्रदर्शित होने के मामले में, आपको एक बाली <pre> </ pre> जोड़ना चाहिए
document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"
