ජාවාස්ක්‍රිප්ට් භාවිතයෙන් JSON ලස්සනට මුද්‍රණය කරන්න


2441

JSON පහසුවෙන් කියවිය හැකි (මිනිස් පා readers කයින් සඳහා) ආකෘතියකින් පෙන්වන්නේ කෙසේද? මම මූලික වශයෙන් වර්ණ / අකුරු-මෝස්තර / යනාදිය සහිත ඉන්ඩෙන්ටේෂන් සහ වයිට්ස්පේස් සඳහා සොයමි.




4
ඔබ html වෙත ප්‍රතිදානය කරන්නේ නම්, ඔබට එය ටැගයකින් ඔතා ගත හැකිය <pre>.
රයන් වෝකර්

Answers:


5083

ලස්සන මුද්‍රණය දේශීයව ක්‍රියාත්මක වේ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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    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

නැතහොත් සම්පූර්ණ ස්නිපටයක් පහත දක්වා ඇත:


23
සුපිරි නියමයි. නිදොස් කිරීම සඳහා නව කවුළුවක මෙය විවෘත කිරීම සඳහා මම ශ්‍රිතයක් එක් කළෙමි: var json = syntaxHighlight (JSON.stringify (obj, undefined, 4);); var w = window.open (); var html = "<head> <style> පෙර {දළ සටහන: 1px # න #ccc; පෑඩින්: 5px; ආන්තිකය: 5px;}. ස්ට්‍රිං {වර්ණය: කොළ;}"; html + = ".නම්බර් {වර්ණය: අඳුරු තැඹිලි;} .බූලියන් {වර්ණය: නිල්;} .නූල් {වර්ණය: මැජෙන්ටා;} .කී {වර්ණය: රතු;} </style> </head> <body>"; html + = "<pre>" + json + "</pre>"; w.document.writeln (html);
ජේ ක්‍රොස්ලර්

16
හොඳයි. එයට css සහ a අවශ්‍ය බව අමතක නොකරන්න <pre>.
NoBugs

4
කිසියම් හේතුවක් නිසා, මම එය අනතුරු ඇඟවූ විට, එය ඇත්ත වශයෙන්ම ආකෘතිගත කර ඇති බව පෙන්වයි, නමුත් මම එය jQuery හරහා div එකකට කෙළ ගසන විට තවමත් පැතලි නූලක් පෙන්වයි: $ ("# ගනුදෙනු ප්‍රතිචාරය"). පෙන්වන්න (). html (prettifyObject (දත්ත), null, '\ t'); එහිදී prettifyObject යනු මා විසින් නිර්මාණය කරන ලද ක්‍රමයක් වන අතර එය ඉහත ඔබේ පළමු පේළි දෙක අඩංගු වේ.
PositiveGuy

5
FCoffeeAddict ඔබේ #transactionResponseඅංගය white-space: pre;CSS ශෛලියක් ඇති බවට වග බලා ගන්න .
user123444555621

73
JSON නූල් මත නොව stringify(...)JSON වස්තු මත ක්‍රියා කරන බව සලකන්න . ඔබට නූලක් තිබේ නම්, ඔබ JSON.parse(...)මුලින්ම කළ යුතුය
Vihung

272

ඔබට ලස්සන මුද්‍රණය කිරීමට අවශ්‍ය වස්තුවක් තිබේ නම් පරිශීලක Pumbaa80 ගේ පිළිතුර විශිෂ්ටයි . ඔබ වලංගු JSON සිට ආරම්භ කරන්නේ නම් , සංගීත ඔබ ලස්සන මුද්රණය කිරීමට අවශ්ය බව, ඔබ මුලින්ම වස්තුවක් බවට පත් කිරීමට අවශ්ය:

var jsonString = '{"some":"json"}';
var jsonPretty = JSON.stringify(JSON.parse(jsonString),null,2);  

මෙය නූලෙන් JSON වස්තුවක් සාදයි, පසුව එය JSON stringify හි ලස්සන මුද්‍රණය භාවිතා කර එය නැවත නූලකට පරිවර්තනය කරයි.


11
මෙය මට වැඩ කළ නමුත් භාවිතා කරමින් දෝෂයක් ඇති වූ JSON.parseනිසා මම එය වෙනස් කළෙමි JSON.stringify(jsonString, null, 2). ඔබගේ JSON / වස්තුව මත රඳා පවතී.
ජැසි

15
නූල ප්‍රදර්ශනය කිරීමේදී ඔබට එය <pre></pre>ටැග් වලින් ඔතා තැබිය යුතු බව සලකන්න .
අවලංගු කිරීම

6
Az ජැසි JSON.parseමිය යන්නේ ඔබට අවලංගු JSON str එකක් තිබේ නම් හෝ එය දැනටමත් වස්තුවක් බවට පරිවර්තනය කර ඇත්නම් පමණි ... උත්සාහ කිරීමට පෙර ඔබ ගනුදෙනු කරන්නේ කුමන දත්ත සමුදායක් දැයි දැන ගැනීමට වග බලා ගන්නJSON.parse
Kolob Canyon

8
Az ජැසි ඔබට එය කිරීමට සිදුවුවහොත්, ඔබට JSON නූලක් නොතිබුණි, ඔබට සාමාන්‍ය වස්තුවක් තිබුණි. JSON සෑම විටම නූලකි. එය ජාවාස්ක්‍රිප්ට් වස්තුවක නූල් මත පදනම් වූ නිරූපණයකි.
ක්ලෝන්කෙක්ස්

37

වඩා හොඳ ක්‍රමය.

ජාවාස්ක්‍රිප්ට් හි JSON අරා ලස්සන කරන්න

JSON.stringify(jsonobj,null,'\t')

3
ස්තූතියි! මෙම විසඳුම මා පෞද්ගලිකව සොයන දෙය නම්, මට ඉන්ඩෙන්ට් කරන ලද JSON එකක් <textarea>
ටර්බෝ

2
මෙය වඩා හොඳ වන්නේ ඔබ වැඩිපුර ගණනය කිරීම් අවශ්‍ය නොවන මූලික ජාවාස්ක්‍රිප්ට් ශ්‍රිතයක් පමණක් භාවිතා කරන නිසා ක්‍රියාකාරිත්වය බොහෝ වාරයක් පුනරාවර්තනය වුවහොත් කාර්ය සාධන ගැටළු ඇති විය හැකි බැවිනි. මෙය වැඩ කිරීමට මට අස්ථානගත වී ඇත්තේ <pre> ටැග් පමණි.
සීඑල්

පරිපූර්ණ හා හරියටම මා සොයන දේ! කෙටි, පැණිරස හා කාරණයට.
ජෝන්

29

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, '%%');

නමුත් ක්‍රෝම් කොන්සෝලය තුළ% ගැලවීමට සහය නොදක්වන බව මම සොයා ගතිමි. අමුතුයි ... සමහර විට මෙය අනාගතයේදී ක්‍රියාත්මක වනු ඇත.

චියර්ස්!

රූප විස්තරය මෙහි ඇතුළත් කරන්න


1
මම ur ර් කේතය භාවිතා කළ නමුත් මම ප්‍රතිදානය json ආකෘතියෙන් ලබා ගත්තද මට වර්ණය ලැබෙන්නේ නැත. අන්තිමට මට වර්ණ ටැගය ලැබෙන්නේ මෙය ප්‍රතිදානය {"දෝෂය": code "කේතය": 0, "පණිවිඩය": "ඕ"}}, වර්ණය: රතු, වර්ණය: රතු, වර්ණය: අඳුරු තැඹිලි
ramesh027

26
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>"

උදාහරණයක්:


1
"බැලිස්" යනු කුමක්ද?
ඩෑන් ඩස්කල්ස්කු

එහි තේරුම ප්‍රංශ භාෂාවෙන් "ටැග්" යන්නයි
අයිමරික් බූසි අයිබික්

මෙම <pre>ඔබ තුළ JSON පෙන්වන්නේ නම්, අත්යාවශ්යය <div>. එම ඉඟිය සඳහා පමණක් ඉහළට!
මැනුවෙල්

23

මම JSONView Chrome දිගුව භාවිතා කරමි (එය ලැබෙන තරමටම ලස්සනයි :):

සංස්කරණය කරන්න: එකතු කරන ලදි jsonreport.js

ඕනෑම JSON දත්ත බැලීමට ඔබට භාවිතා කළ හැකි මානව කියවිය හැකි HTML5 වාර්තාවක් සපයන JSON ලස්සන මුද්‍රණ නරඹන්නෙකු වන jsonreport.js ද මම නිකුත් කර ඇත්තෙමි.

නව ජාවාස්ක්‍රිප්ට් HTML5 වාර්තා ආකෘතියෙන් ඔබට ආකෘතිය ගැන වැඩිදුර කියවිය හැකිය .


1
මට ජාවාස්ක්‍රිප්ට් * .js පුස්තකාලයක් අවශ්‍ය වූ අතර එය HTML මූලද්‍රව්‍ය සහ පන්ති එකතු කරමින් JSON නූලක් මුද්‍රණය කළ හැකිය. Var result = beautifulPrint වැනි දෙයක් ('key "key": "value"}');
මාර්ක්

21

ඔබට භාවිතා කළ හැකිය 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})}))"


එය පුළුල් කිරීමට පටන් ගන්නා බැවින් එය ලබා ගැනීමට ක්‍රමයක් තිබේද?
ඩැනියෙල් සොකොලොව්ස්කි

ඔබ අදහස් කරන්නේ an ඩැනියෙල් සොකොලොව්ස්කි?
adius

ක්‍රෝම් සංවර්ධක මෙවලම් තුළ මම වස්තු යතුරු ලබා ගැනීමට කුඩා ත්‍රිකෝණය ක්ලික් කළ යුතුය, එය ස්වයංක්‍රීයව පුළුල් කිරීමට ක්‍රමයක් තිබේද? snag.gy/7wPqsl.jpg
ඩැනියෙල්

එම්. හොඳ ප්රශ්නයක්. මම එකක් ගැන නොදනිමි, නමුත් එය සැබවින්ම ප්‍රයෝජනවත් වනු ඇත…
adius

9

මෙන්න පරිශීලක 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);

7

නිදොස්කරණය සඳහා මම භාවිතා කරන්නේ:

console.debug ("% o", දත්ත);

3
-1; මෙය console.debug(data);(අවම වශයෙන්) ක්‍රෝම් සහ ෆයර්ෆොක්ස් වල සිදු කිරීමට සමාන වේ. එය dataලස්සන ලෙස මුද්‍රණය කළ එකක් පමණක් නොව JSON නිරූපණයක් පෙන්වන්නේ නැත .
මාර්ක් අමරි

1
ArkMarkAmery 2 year ago මෙම විශේෂාංගය බ්‍රව්සරයට අළුත් වූ අතර මා විස්තර කළ පරිදි පමණක් ක්‍රියා කරයි. ඔබ ඉතා තරුණ නම් - මම ඔබ ගැන සතුටු වෙමි! සින්ටැක්ස් වැනි console.debug("%s: %o x %d", str, data, cnt);යමෙකුට තවමත් ප්‍රයෝජනවත් විය හැකිය.
gavenkoa

2
console.dirදත්ත සැරිසැරීමට ඉඩ සලසන දේ සොයා බලන්න .
ක්‍රිස්ටෝෆ් රූසි

7

රූබි සඳහා වෙනත් ලස්සන මුද්‍රණ යන්ත්‍ර ගැන සෑහීමකට පත් නොවී, මම මගේම ( NeatJSON ) ලියා පසුව නොමිලේ මාර්ගගත ආකෘතියක් ඇතුළුව ජාවාස්ක්‍රිප්ට් වෙත ගෙන ගියෙමි . කේතය MIT බලපත්‍රය යටතේ නොමිලේ (තරමක් අවසර ඇත).

විශේෂාංග (සියල්ල අත්‍යවශ්‍ය නොවේ):

  • රේඛා පළලක් සකසා වස්තූන් සහ අරා ඒවා ගැලපෙන විට එකම රේඛාවක තබා ගන්නා ආකාරයට ඔතා තබන්න.
  • ඔබ කැමති නම් වස්තු යතුරු වර්ග කරන්න.
  • වස්තු යතුරු පෙළගස්වන්න (කොලෝන් පෙළගස්වන්න).
  • පූර්ණ සංඛ්‍යා අවුල් නොකර පාවෙන ලක්ෂ්‍ය සංඛ්‍යා නිශ්චිත දශම සංඛ්‍යාවට ආකෘතිකරණය කරන්න.
  • 'කෙටි' එතීමේ මාදිලිය අගයන් මෙන් එකම පේළියේ වරහන් / වරහන් විවෘත කිරීම සහ වැසීම සිදු කරයි, සමහරු කැමති ආකෘතියක් සපයයි.
  • අරා සහ වස්තූන් සඳහා වරහන් අතර, කොලොන් සහ කොමාවන්ට පෙර / පසු පරතරය පාලනය කිරීම.
  • වෙබ් බ්‍රව්සර් සහ Node.js යන දෙකටම ක්‍රියාකාරීත්වය ලබා දී ඇත.

මූලාශ්‍ර කේතය මම මෙහි පිටපත් කරමි, මෙය පුස්තකාලයකට සබැඳියක් පමණක් නොව, 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);

5

ගොඩක් ස්තූතියි @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 '&nbsp';
          }
       } 

    ],

    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;
 }

"Rr" තර්කය යනු කුමක්ද?
manking

1
@ manking ... rules = $ .extend (නීති, ('object' === typeof rr)? rr: {}); ... එය රීල්සෙට් වස්තුවකින් රීසෙට් එක දිගු කිරීමයි. (සමහර විට ඔබට යාවත්කාලීනයන් සොයාගත හැකිය: github.com/frdl/-Flow/blob/master/api-d/4/js-api/library.js/… )
වෙබ්ෆාන්


4

ජාවාස්ක්‍රිප්ට් පුස්තකාලයේ ඩග්ලස් ක්‍රොක්ෆර්ඩ්ගේ JSON දැඩි ක්‍රමවේදය හරහා JSON මුද්‍රණය කරනු ඇත.

මෙම පැරණි ප්‍රශ්නයට පිළිතුරු ඔබට ප්‍රයෝජනවත් විය හැකිය : JSON (යුනික්ස්) ෂෙල් ස්ක්‍රිප්ටයේ මුද්‍රණය කරන්නේ කෙසේද?


4

මම අද @ 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)

ගිතුබ් පිළිබඳ සන්දර්භය තුළ කේතය මෙහි ඇත


4

ප්‍රතික්‍රියා ලෙස ලියා ඇති සරල 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

උපකාරවත් වන බලාපොරොත්තුව!


4

ඔබට භාවිතා කළ හැකිය JSON.stringify(your object, null, 2) දෙවන පරාමිතිය යතුර සහ අගය පරාමිතීන් ලෙස ගන්නා ප්‍රතිස්ථාපක ශ්‍රිතයක් ලෙස භාවිතා කළ හැකිය. ඔබේ JSON වස්තුව තුළ යමක් වෙනස් කිරීමට අවශ්‍ය නම් මෙය භාවිතා කළ හැකිය.

වැඩි විස්තර: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify


3

ඔබට පෙළපොතක වැඩ කිරීමට මෙය අවශ්‍ය නම් පිළිගත් විසඳුම ක්‍රියා නොකරනු ඇත.

<textarea id='textarea'></textarea>

$("#textarea").append(formatJSON(JSON.stringify(jsonobject),true));

function formatJSON(json,textarea) {
    var nl;
    if(textarea) {
        nl = "&#13;&#10;";
    } else {
        nl = "<br>";
    }
    var tab = "&#160;&#160;&#160;&#160;";
    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;
}

3

ඔබ වෙබ් පිටුවක json මවාපෑමට ලස්සන පුස්තකාලයක් සොයන්නේ නම් ...

Prism.js සෑහෙන්න හොඳයි.

http://prismjs.com/

ඉන්ඩෙන්ටේෂන් ලබා ගැනීම සඳහා මම JSON.stringify (obj, undefined, 2) භාවිතා කළ අතර පසුව තේමාවක් එක් කිරීමට ප්‍රිස්ම භාවිතා කිරීම හොඳ ප්‍රවේශයකි.

ඔබ අජැක්ස් ඇමතුමක් හරහා JSON වෙත පූරණය කරන්නේ නම්, එවිට ඔබට ප්‍රිස්මයේ උපයෝගීතා ක්‍රමවලින් එකක් ධාවනය කළ හැකිය

උදාහරණයක් වශයෙන්:

Prism.highlightAll()

1

මෙය කදිමයි:

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

1

කොන්සෝලය සඳහා හොඳ සින්ටැක්ස් ඉස්මතු කරන විසඳුමක් සොයාගත නොහැකි විය, එබැවින් මෙන්න මගේ 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"]});

ප්‍රතිදානය


0

දේශීය ශ්‍රිතය භාවිතා නොකර මුද්‍රණය කළ හැකි ආකාරය මෙන්න.

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
    }
  }
*/

0

නිදොස් කිරීමේ අරමුණු සඳහා වස්තුවක් ප්‍රදර්ශනය කිරීමට ඇති සරලම ක්‍රමය:

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

0
<!-- 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>

0

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>";
        }
    );
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.