stampa JSON con JavaScript


2427

Come posso visualizzare JSON in un formato di facile lettura (per lettori umani)? Sto cercando principalmente rientri e spazi bianchi, forse anche con colori / stili di carattere / ecc.




4
Se stai solo trasmettendo a HTML, puoi avvolgerlo in un <pre>tag.
Ryan Walker,

Risposte:


5059

La stampa graziosa è implementata in modo nativo inJSON.stringify() . Il terzo argomento abilita la stampa carina e imposta la spaziatura da usare:

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

Se hai bisogno di evidenziare la sintassi, potresti usare un po 'di magia regex in questo modo:

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

Guarda in azione qui: jsfiddle

O uno snippet completo fornito di seguito:


23
Super fantastico. Ho aggiunto una funzione per aprirla in una nuova finestra per il debug: var json = syntaxHighlight (JSON.stringify (obj, undefined, 4);); var w = window.open (); var html = "<head> <style> pre {outline: 1px solido #ccc; imbottitura: 5px; margine: 5px;} .string {color: verde;}"; 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,

16
Bello. Non dimenticare che ha bisogno di CSS e A <pre>, però.
NoBugs,

4
per qualche motivo, quando lo avverto, mostra effettivamente formattato ma mostra ancora una stringa piatta quando lo sputo su un div tramite jQuery: $ ("# transazioneResponse"). show (). html (prettifyObject (data), null, '\ t'); dove prettifyObject è un metodo che ho creato che contiene le prime due righe sopra.
Positivo

5
@CoffeeAddict Assicurati che il tuo #transactionResponseelemento abbia white-space: pre;uno stile CSS.
user123444555621

72
Nota che stringify(...)funziona su oggetti JSON , non su stringhe JSON. Se hai una stringa, devi JSON.parse(...)prima
Vihung

271

La risposta dell'utente Pumbaa80 è ottima se hai un oggetto che desideri stampare piuttosto. Se stai partendo da una stringa JSON valida che desideri stampare piuttosto, devi prima convertirla in un oggetto:

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

Questo crea un oggetto JSON dalla stringa e poi lo converte in una stringa usando la bella stampa di JSON stringify.


11
Questo ha funzionato per me, ma ha generato un errore e JSON.parsequindi l'ho modificato JSON.stringify(jsonString, null, 2). Dipende dal tuo JSON / Object.
Jazzy,

15
Nota che quando visualizzi la stringa devi avvolgerla nei <pre></pre>tag.
Disdetta

6
@Jazzy JSON.parsemuore solo se hai una str JSON non valida o è già convertita in un oggetto ... assicurati di sapere con quale tipo di dati hai a che fare prima di provareJSON.parse
Kolob Canyon

7
@Jazzy Se avessi dovuto farlo, non avevi una stringa JSON, avevi un oggetto normale. JSON è sempre una stringa. È solo una rappresentazione basata su stringhe di un oggetto Javascript.
Clonkex,

37

Modo migliore.

Prettify JSON Array in Javascript

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

3
Grazie! Questa soluzione è ciò che cercavo personalmente perché volevo semplicemente inserire un JSON rientrato in una <textarea>
Turbo

2
Questo è meglio perché si utilizza solo la funzione javascript di base che non richiede calcoli aggiuntivi che potrebbero causare problemi di prestazioni se l'operazione viene ripetuta più volte. L'unica cosa che mancava per me funzionava erano i tag <pre>.
CL,

Perfetto ed esattamente quello che stavo cercando! Breve, dolce e al punto.
Giovanni

Wow! grazie! Mi è molto utile.
Judian,

29

Sulla base della risposta di Pumbaa80 ho modificato il codice per utilizzare i colori console.log (lavorando su Chrome di sicuro) e non HTML. L'output può essere visto all'interno della console. Puoi modificare le _variabili all'interno della funzione aggiungendo altro stile.

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

Ecco un bookmarklet che puoi usare:

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

Uso:

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

Modifica: ho appena provato a sfuggire al simbolo% con questa riga, dopo la dichiarazione delle variabili:

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

Ma scopro che Chrome non supporta l'escaping% nella console. Strano ... Forse questo funzionerà in futuro.

Saluti!

inserisci qui la descrizione dell'immagine


1
Ho usato il tuo codice ur ma sto ottenendo l'output in formato json ma non sto ottenendo il colore e anche nell'ultimo ho ricevuto il tag colore questo è l'output {"errore": {"codice": 0, "messaggio": "O"}}, colore: rosso ,, colore: rosso ,, colore: darkorange
ramesh027

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

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

In caso di visualizzazione in HTML, è necessario aggiungere una balise <pre></pre>

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

Esempio:


1
Che cos'è una "balise"?
Dan Dascalescu il

significa "tag" in francese
Aymeric Bouzy aybbyk

È <pre>obbligatorio se si mostra JSON in a <div>. Eseguito l'upgrade solo per quel suggerimento!
Manuel,

23

Uso l' estensione JSONView per Chrome (è carina come sembra :):

Modifica: aggiunto jsonreport.js

Ho anche rilasciato un visualizzatore di stampe piuttosto indipendente online JSON, jsonreport.js, che fornisce un rapporto HTML5 leggibile dall'uomo che puoi utilizzare per visualizzare qualsiasi dato JSON.

Puoi leggere ulteriori informazioni sul formato in Nuovo formato report HTML5 HTML .


1
Avevo bisogno di una libreria Javascript * .js in grado di stampare una stringa JSON aggiungendo elementi e classi html. Qualcosa come var result = prettyPrint ('{"key": "value"}');
Segna il

21

Puoi usare console.dir(), che è una scorciatoia per console.log(util.inspect()). (L'unica differenza è che ignora qualsiasi inspect()funzione personalizzata definita su un oggetto.)

Utilizza l' evidenziazione della sintassi , il rientro intelligente , rimuove le virgolette dalle chiavi e rende l'output più bello che mai.

const object = JSON.parse(jsonString)

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

e per la riga di comando:

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


Un modo per ottenerlo in modo che inizi ad espandersi?
Daniel Sokolowski,

Cosa intendi con @DanielSokolowski?
adius

in Chrome Developer Tools devo fare clic sul triangolino per accedere alle chiavi degli oggetti, in qualche modo per farlo espandere automaticamente? snag.gy/7wPqsl.jpg
Daniel Sokolowski il

Mh. Buona domanda. Non ne sono consapevole, ma sarebbe davvero utile ...
adius

9

Ecco il fantastico HTML di user123444555621 adattato per i terminali. Comodo per il debug degli script Node:

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

Uso:

// thing = any json OR string of json
prettyJ(thing);

7

3
-1; questo equivale a fare solo console.debug(data);(almeno) in Chrome e Firefox. Non mostra una rappresentazione JSON di data, figuriamoci una bella stampa.
Mark Amery,

1
@MarkAmery 2 anni fa questa funzione era nuova per il browser e funziona solo come ho descritto. Se sei troppo giovane, sono felice per te! Anche la sintassi come console.debug("%s: %o x %d", str, data, cnt);può essere ancora utile per qualcuno.
gavenkoa,

2
Guarda anche in console.dirquale ti permette di navigare i dati.
Christophe Roussy,

7

Insoddisfatto di altre belle stampanti per Ruby, ho scritto il mio ( NeatJSON ) e l' ho portato su JavaScript incluso un formatter online gratuito . Il codice è gratuito con licenza MIT (abbastanza permissivo).

Caratteristiche (tutte opzionali):

  • Imposta una larghezza della linea e avvolgi in modo da mantenere gli oggetti e le matrici sulla stessa linea quando si adattano, avvolgendo un valore per linea quando non lo fanno.
  • Ordina le chiavi dell'oggetto se vuoi.
  • Allinea i tasti oggetto (allinea i due punti).
  • Formatta numeri in virgola mobile su un numero specifico di decimali, senza incasinare gli interi.
  • La modalità di avvolgimento "breve" inserisce parentesi / parentesi graffe di apertura e chiusura sulla stessa riga dei valori, fornendo un formato che alcuni preferiscono.
  • Controllo granulare su spaziatura per matrici e oggetti, tra parentesi, due punti prima / dopo e virgole.
  • La funzione è resa disponibile per entrambi i browser Web e Node.js.

Copierò qui il codice sorgente in modo che questo non sia solo un collegamento a una libreria, ma ti incoraggio ad andare alla pagina del progetto GitHub , poiché sarà aggiornato e il codice sottostante non lo farà.

(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

Grazie mille a tutti! Sulla base delle risposte precedenti, ecco un altro metodo di variante che fornisce regole di sostituzione personalizzate come parametro:

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

Qual è l'argomento "rr"?
Manking

1
@manking ... rules = $ .extend (rules, ('object' === typeof rr)? rr: {}); ... è per estendere il set di regole di un oggetto ruleset. (forse trovi gli aggiornamenti: github.com/frdl/-Flow/blob/master/api-d/4/js-api/library.js/… )
webfan



4

Ho riscontrato un problema oggi con il codice di @ Pumbaa80. Sto cercando di applicare l'evidenziazione della sintassi JSON ai dati che sto visualizzando in una vista Mithril , quindi ho bisogno di creare nodi DOM per tuttoJSON.stringify nell'output.

Ho diviso la regex molto lunga anche nelle sue parti componenti.

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)

Codice nel contesto di Github qui


4

Ecco un semplice componente formato / colore JSON scritto in React:

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

Guardalo funzionare in questo codice: https://codepen.io/benshope/pen/BxVpjo

Spero che aiuti!



3

Se è necessario che funzioni in un'area di testo, la soluzione accettata non funzionerà.

<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

Se stai cercando una bella libreria per prettify json su una pagina web ...

Prism.js è abbastanza buono.

http://prismjs.com/

Ho scoperto che usare JSON.stringify (obj, undefined, 2) per ottenere il rientro, e quindi usare il prisma per aggiungere un tema è stato un buon approccio.

Se stai caricando in JSON tramite una chiamata Ajax, puoi eseguire uno dei metodi di utilità di Prism per eseguire la preimpostazione

Per esempio:

Prism.highlightAll()

1

Questo è carino:

https://github.com/mafintosh/json-markup damafintosh

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>

Esempio di foglio di stile può essere trovato qui

https://raw.githubusercontent.com/mafintosh/json-markup/master/style.css

1

Non sono riuscito a trovare alcuna soluzione che avesse una buona evidenziazione della sintassi per la console, quindi ecco il mio 2p

Installa e aggiungi dipendenza cli-highlight

npm install cli-highlight --save

Definire logjson a livello globale

const highlight = require('cli-highlight').highlight
console.logjson = (obj) => console.log(
                               highlight( JSON.stringify(obj, null, 4), 
                                          { language: 'json', ignoreIllegals: true } ));

Uso

console.logjson({foo: "bar", someArray: ["string1", "string2"]});

produzione


0

Ecco come è possibile stampare senza utilizzare la funzione nativa.

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

Il modo più semplice per visualizzare un oggetto a scopo di debug:

console.log("data",data) // lets you unfold the object manually

Se si desidera visualizzare l'oggetto nel DOM, è necessario considerare che potrebbe contenere stringhe che potrebbero essere interpretate come HTML. Pertanto, devi fare un po 'di fuga ...

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

Per evidenziarlo e abbellirlo HTMLusando 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>";
        }
    );
}

-1

Consiglio di usare HighlightJS . Utilizza lo stesso principio della risposta accettata, ma funziona anche per molte altre lingue e ha molte combinazioni di colori predefinite . Se si utilizza RequireJS , è possibile generare un modulo compatibile con

python3 tools/build.py -tamd json xml <specify other language here>

La generazione si basa su Python3 e Java. Aggiungi -nper generare una versione non ridotta.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.