Pytanie Jak mogę wydrukować JSON przy użyciu JavaScript?


Jak wyświetlić JSON w łatwym do odczytania formacie (dla czytelników ludzkich)? Szukam głównie wcięcia i białych znaków, z być może nawet kolorów / stylów czcionek / itp.


1666
2018-01-26 22:33


pochodzenie


Możliwy duplikat Jak programowo upiększyć JSON? - hippietrail
@hippietrail meta.stackoverflow.com/q/251938/3853934 - Michał Perłakowski
Jeśli po prostu wyświetlasz kod HTML, możesz go zawinąć w <pre> etykietka. - Ryan Walker


Odpowiedzi:


Ładne drukowanie jest realizowane w trybie natywnym JSON.stringify(). Trzeci argument umożliwia ładne drukowanie i ustawia odstępy:

var str = JSON.stringify(obj, null, 2); // spacing level = 2

Jeśli potrzebujesz podświetlania składni, możesz użyć jakiejś magii regexowej:

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

Zobacz w akcji tutaj: jsfiddle

Lub pełny opis podany poniżej:

function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

function syntaxHighlight(json) {
    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>';
    });
}

var obj = {a:1, 'b':'foo', c:[false,'false',null, 'null', {d:{e:1.3e5,f:'1.3e5'}}]};
var str = JSON.stringify(obj, undefined, 4);

output(str);
output(syntaxHighlight(str));
pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }


3709
2017-08-28 10:56



Super niesamowite. Dodałem funkcję otwierania tego w nowym oknie debugowania: var json = syntaxHighlight (JSON.stringify (obj, undefined, 4);); var w = window.open (); var html = "<head> <style> pre {outline: 1px solid #ccc; padding: 5px; margin: 5px;} .string {color: green;}"; html + = ".number {color: darkorange;} .boolean {color: blue;} .null {color: magenta;} .key {color: red;} </ style> </ head> <body>"; html + = "<pre>" + json + "</ pre>"; w.document.writeln (html); - JayCrossler
Miły. Nie zapominaj, że potrzebuje css i <pre>, chociaż. - NoBugs
z jakiegoś powodu, kiedy go ostrzegam, to rzeczywiście pokazuje sformatowany, ale nadal pokazuje płaski ciąg, gdy wypluję go do div za pośrednictwem jQuery: $ ("# transactionResponse"). show (). html (prettifyObject (dane), null, '\ t'); gdzie prettifyObject jest metodą, którą utworzyłem, która zawiera twoje pierwsze dwie linie powyżej. - PositiveGuy
@ Coffee Addict Upewnij się, że twój #transactionResponse element ma white-space: pre; jako styl CSS. - user123444555621
Zauważ, że stringify(...) działa na JSON obiekty, nie na łańcuchach JSON. Jeśli masz ciąg, musisz JSON.parse(...) pierwszy - Vihung


Odpowiedź użytkownika Pumbaa80 jest świetna, jeśli masz obiekt chcesz dość wydrukowane. Jeśli zaczynasz od prawidłowego JSON strunowy chcesz dość drukować, musisz najpierw przekonwertować go na obiekt:

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

To buduje obiekt JSON z łańcucha, a następnie konwertuje go z powrotem do łańcucha za pomocą ładnego druku JSON stringify.


181
2018-06-21 20:35



To zadziałało, ale użyłem błędu JSON.parse więc go zmodyfikowałem JSON.stringify(jsonString, null, 2). Zależy od twojego JSON / obiektu. - Jazzy
Zwróć uwagę, że podczas wyświetlania napisu musisz go zawinąć <pre></pre> tagi. - Undistraction
@Zgrzytliwy JSON.parse tylko umiera, jeśli masz nieprawidłowy ciąg JSON lub jest on już konwertowany na obiekt ... upewnij się, że znasz typ danych, z którym masz do czynienia, zanim spróbujesz JSON.parse - Kolob Canyon
@Undistraction Twój komentarz był dla mnie przydatny, sprawdzę potrzebę sprawdzenia, co dokładnie pre robi. - Dhaval Jardosh
@ Jazzy Jeśli musiałeś to zrobić, nie masz łańcucha JSON, masz normalny obiekt. JSON jest zawsze ciąg znaków. Jest to tylko oparte na łańcuchach przedstawienie obiektu JavaScript. - Clonkex


Opierając się na odpowiedzi Pumbaa80, zmodyfikowałem kod, aby użyć kolorów console.log (działa na pewno w Chrome), a nie HTML. Dane wyjściowe można zobaczyć w konsoli. Możesz edytować _wartości w funkcji dodając trochę więcej stylizacji.

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

Oto bookmarklet, którego możesz użyć:

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

Stosowanie:

var obj = {a:1, 'b':'foo', c:[false,null, {d:{e:1.3e5}}]};
JSONstringify(obj);

Edycja: Właśnie próbowałem uciec symbol% ​​z tym wierszem, po deklaracji zmiennych:

json = json.replace(/%/g, '%%');

Ale dowiaduję się, że Chrome nie obsługuje% escaping w konsoli. Dziwne ... Może to zadziała w przyszłości.

Twoje zdrowie!

enter image description here


23
2018-01-29 13:16



Użyłem kodu ur, ale otrzymuję dane wyjściowe w formacie json, ale nie otrzymuję koloru, a także w ostatniej otrzymuję tag koloru to jest wynik {"error": {"code": 0, "message": "O"}}, kolor: czerwony, kolor: czerwony, kolor: ciemnyzmienić - ramesh027
+1 za sugerowanie użycia jako bookmarkletu! dzięki - Renato Gama


używam Rozszerzenie JSONView do Chrome (jest tak piękny, jak to robi :):

Edytuj: dodano jsonreport.js

Wydałem również samodzielną samodzielną przeglądarkę JSON online, jsonreport.js, która zapewnia czytelny dla człowieka raport HTML5, który można wykorzystać do przeglądania dowolnych danych JSON.

Możesz przeczytać więcej o formacie w Nowy format raportu HTML5 JavaScript.


20
2018-01-26 22:37



Potrzebowałem biblioteki JavaScript * .js, która mogłaby całkiem wydrukować łańcuch JSON dodając elementy i klasy html. Coś jak wynik var = prettyPrint ("{" key ":" value "} '); - Mark
To jest świetne, ponieważ można je łatwo dodać. Możesz nawet zmienić ustawienia kolorów <3 - Luca Steeb


Możesz użyć console.dir(), który jest skrótem dla console.log(util.inspect()). (Jedyną różnicą jest to, że omija wszelkie niestandardowe inspect() funkcja zdefiniowana w obiekcie.)

To używa Podświetlanie składni, inteligentne wcięcie, usuwa cytaty z kluczy i po prostu sprawia, że ​​wyjście jest tak piękne, jak to tylko możliwe.

const object = JSON.parse(jsonString)

console.dir(object, {depth: null, colors: true})

i dla linii poleceń:

cat package.json | node -e "process.stdin.pipe(new stream.Writable({write: chunk => console.dir(JSON.parse(chunk), {depth: null, colors: true})}))"


16
2017-11-14 09:46



Jakikolwiek sposób to zrobić, aby zaczął się rozszerzać? - Daniel Sokolowski
Co masz na myśli: @DanielSokolowski? - adius
w Narzędziach dla programistów w przeglądarce Chrome muszę kliknąć mały trójkąt, aby uzyskać klucze obiektów, w jaki sposób można je automatycznie rozszerzyć? snag.gy/7wPqsl.jpg - Daniel Sokolowski
Mh. Dobre pytanie. Nie jestem tego świadomy, ale byłoby to pomocne ... - adius


Lepszy sposób.

Prettify JSON Array w JavaScript

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

11
2017-10-21 10:19



Lepsze niż co i jak? - Dan Dascalescu
@DanDascalescu Lepsze niż wszystkie powyższe? - adamj


var jsonObj = {"streetLabel": "Avenue Anatole France", "city": "Paris 07",  "postalCode": "75007", "countryCode": "FRA",  "countryLabel": "France" };

document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj);

W przypadku wyświetlania w HTML, powinieneś dodać balisę <pre></pre>

document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"

Przykład:

var jsonObj = {"streetLabel": "Avenue Anatole France", "city": "Paris 07",  "postalCode": "75007", "countryCode": "FRA",  "countryLabel": "France" };

document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj);

document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"
div { float:left; clear:both; margin: 1em 0; }
<div id="result-before"></div>
<div id="result-after"></div>


7
2018-03-01 15:42





Do celów debugowania używam:

console.debug ("% o", dane);

5
2018-01-10 14:11



-1; jest to równoważne po prostu robieniu console.debug(data); w (przynajmniej) Chrome i Firefox. Nie pokazuje reprezentacji JSON data, nie mówiąc już o bardzo zadrukowanym. - Mark Amery
@MarkAmery 2 lata temu ta funkcja była nowa dla przeglądarki i działa tylko tak, jak opisałem. Jeśli jesteś za młody - cieszę się z twojego powodu! Również składnia jak console.debug("%s: %o x %d", str, data, cnt); może nadal być pomocne dla kogoś. - gavenkoa
Zobacz też console.dir co pozwala nawigować po danych. - Christophe Roussy


Niezadowolony z innych ładnych drukarek dla Ruby, napisałem własne (NeatJSON) i wtedy przeniesione do JavaScript włącznie z darmowy formatator online. Kod jest darmowy na licencji MIT (dość permisywny).

Funkcje (wszystkie opcjonalne):

  • Ustaw szerokość linii i zawijanie w taki sposób, aby obiekty i tablice znajdowały się na tej samej linii, gdy się zmieściły, zawijając jedną wartość na linię, gdy nie pasują.
  • Sortuj klucze obiektów, jeśli chcesz.
  • Wyrównaj klucze obiektów (wyrównaj dwukropki).
  • Formatuj liczby zmiennoprzecinkowe do określonej liczby miejsc po przecinku, bez mieszania liczb całkowitych.
  • "Krótki" tryb owijania umieszcza nawiasy otwierające i zamykające w tym samym wierszu, co wartości, zapewniając format preferowany przez niektórych.
  • Szczegółowa kontrola odstępów między tablicami i obiektami, między nawiasami, przed / po dwukropkami i przecinkami.
  • Funkcja jest dostępna zarówno dla przeglądarek internetowych, jak i dla Node.js.

Skopiuję tutaj kod źródłowy, aby nie był to tylko link do biblioteki, ale zachęcam do przejścia do Strona projektu GitHub, ponieważ będzie ono aktualizowane, a poniższy kod nie będzie.

(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);

4
2018-04-19 21:49





Wielkie dzięki! W oparciu o poprzednie odpowiedzi, oto kolejna odmiana metody zapewniająca niestandardowe reguły wymiany jako parametr:

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

3
2017-09-09 07:40



Co to jest argument "rr"? - manking
@manking ... rules = $ .extend (rules, ('object' === typeof rr)? rr: {}); ... polega na rozszerzeniu zestawu reguł o obiekt ruleta. (może znajdziesz aktualizacje: github.com/frdl/-Flow/blob/master/api-d/4/js-api/library.js/... ) - webfan