আমি কীভাবে সহজেই পঠনযোগ্য (মানব পাঠকদের জন্য) ফর্ম্যাটে JSON প্রদর্শন করতে পারি? আমি মূলত ইনডেন্টেশন এবং হোয়াইটস্পেসের জন্য খুঁজছি, সম্ভবত এমনকি রঙ / ফন্ট-স্টাইল / ইত্যাদি with
<pre>
ট্যাগে মুড়িয়ে রাখতে পারেন ।
আমি কীভাবে সহজেই পঠনযোগ্য (মানব পাঠকদের জন্য) ফর্ম্যাটে JSON প্রদর্শন করতে পারি? আমি মূলত ইনডেন্টেশন এবং হোয়াইটস্পেসের জন্য খুঁজছি, সম্ভবত এমনকি রঙ / ফন্ট-স্টাইল / ইত্যাদি with
<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>
যদিও এটি সিএসএস এবং এ দরকার , তবে ভুলবেন না ।
#transactionResponse
উপাদানটি white-space: pre;
সিএসএস শৈলী হিসাবে রয়েছে তা নিশ্চিত করুন ।
stringify(...)
JSON অবজেক্টে কাজ করে JSON স্ট্রিংগুলিতে নয়, । আপনার যদি স্ট্রিং থাকে তবে আপনাকে JSON.parse(...)
প্রথমে দরকার
ব্যবহারকারী পুমবা 80 এর উত্তরটি দুর্দান্ত যদি আপনার কোনও জিনিস থাকে যা আপনি প্রিন্ট করতে চান। আপনি যদি একটি কার্যকর 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.parse
pre
করে তা যাচাই করার দরকার যাচাই করব ।
পুম্বা ৮০ এর উত্তরের ভিত্তিতে আমি কনসোল.লগ রঙগুলি (নিশ্চিতভাবে ক্রোমে কাজ করা) এবং এইচটিএমএল ব্যবহার করার জন্য কোডটি পরিবর্তন করেছি। কনসোলের ভিতরে আউটপুট দেখা যায়। আপনি আরও কিছু স্টাইল যুক্ত করে ফাংশনের অভ্যন্তরে _ পরিবর্তনগুলি সম্পাদনা করতে পারেন।
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);
এইচটিএমএল প্রদর্শিত হয় ক্ষেত্রে, আপনি একটি বলিস যোগ করা উচিত <pre></pre>
document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"
উদাহরণ:
<pre>
একটি আবশ্যক আপনি একটি মধ্যে তাদেরকে JSON দেন <div>
। উত্সাহিত ঠিক সেই ইঙ্গিতটির জন্য!
আমি জেএসনভিউ ক্রোম এক্সটেনশনটি ব্যবহার করি (এটি যতটা সুন্দর হয় :):
সম্পাদনা: যুক্ত হয়েছে 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})}))"
এখানে ব্যবহারকারীর 123444555621 এর দুর্দান্ত এইচটিএমএলটি টার্মিনালের জন্য অভিযোজিত। নোড স্ক্রিপ্টগুলি ডিবাগ করার জন্য কার্যকর:
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);
(অন্তত) Chrome এবং ফায়ারফক্সে করার সমান equivalent এটি কোনও JSON এর প্রতিনিধিত্ব দেখায় না data
, একটি সুন্দর-প্রিন্টেড যাক।
console.debug("%s: %o x %d", str, data, cnt);
কারও কারও পক্ষে সহায়ক হতে পারে।
console.dir
ডেটা নেভিগেট করতে পারবেন যা দেখুন ।
রুবির অন্যান্য প্রিন্টারের সাথে অসন্তুষ্ট, আমি আমার নিজের ( NeatJSON ) লিখেছিলাম এবং তারপরে একটি নিখরচায় অনলাইন ফর্ম্যাটার সহ জাভাস্ক্রিপ্টে পোর্ট করেছি । কোডটি এমআইটি লাইসেন্সের অধীনে বিনামূল্যে (বেশ অনুমতিপ্রাপ্ত) perm
বৈশিষ্ট্য (সমস্ত alচ্ছিক):
আমি এখানে উত্স কোডটি অনুলিপি করব যাতে এটি কেবল একটি লাইব্রেরির লিঙ্ক নয়, তবে আমি আপনাকে গিটহাব প্রকল্পের পৃষ্ঠায় যেতে উত্সাহিত করব , কারণ এটি আপ টু ডেট থাকবে এবং নীচের কোডটি না থাকবে।
(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);
সমস্ত অনেক ধন্যবাদ! পূর্ববর্তী উত্তরের উপর ভিত্তি করে, এখানে প্যারামিটার হিসাবে কাস্টম প্রতিস্থাপনের নিয়ম সরবরাহকারী আরও একটি বৈকল্পিক পদ্ধতি রয়েছে:
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.stringify
আউটপুটটির প্রতিটি ।
আমি সত্যিই দীর্ঘ উপাদানটিকে এর উপাদানগুলির অংশগুলিতেও বিভক্ত করেছি।
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 ফর্ম্যাট / রঙের উপাদান:
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)
দ্বিতীয় প্যারামিটারটি একটি replacer ফাংশন হিসাবে ব্যবহার করা যেতে পারে যা কী এবং ভ্যালাকে প্যারামিটার হিসাবে নেয় his এটি আপনার JSON অবজেক্টের মধ্যে কিছু সংশোধন করতে চাইলে এটি ব্যবহার করা যেতে পারে।
আরও রেফারেন্স: https://developer.mozilla.org/en-US/docs/Web/ জাভা স্ক্রিপ্ট / রেফারেন্স / গ্লোবাল_অবজেক্টস / জেএসএন / স্ট্রিংফাইটি
আপনার যদি কোনও পাঠ্যর ক্ষেত্রে এটি প্রয়োজন হয় তবে গৃহীত সমাধানটি কাজ করবে না।
<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.stringify (অবজেক্ট, অপরিজ্ঞাত, ২) ব্যবহার করে খুঁজে পেয়েছি এবং তারপরে একটি থিম যুক্ত করতে প্রিজম ব্যবহার করা ভাল পন্থা ছিল।
আপনি যদি একটি আজাক্স কলের মাধ্যমে জেএসএন-এ লোড করছেন, তবে আপনি প্রিজমের একটি ইউটিলিটি পদ্ধতি প্রিটিটিভিং করতে চালাতে পারেন
উদাহরণ স্বরূপ:
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
কনসোলটির জন্য ভাল সিনট্যাক্স হাইলাইট করার কোনও সমাধান খুঁজে পেল না, সুতরাং আমার 2 পি
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>
জেনারেশন পাইথন 3 এবং জাভার উপর নির্ভর করে। -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
আপনি যদি ডিওমে অবজেক্টটি প্রদর্শন করতে চান তবে আপনাকে বিবেচনা করা উচিত যে এটিতে এমন স্ট্রিং থাকতে পারে যা এইচটিএমএল হিসাবে ব্যাখ্যা করা যেতে পারে। অতএব, আপনাকে কিছু পালানোর দরকার ...
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>";
}
);
}