JSON de impresión bonita usando JavaScript


2427

¿Cómo puedo mostrar JSON en un formato fácil de leer (para lectores humanos)? Estoy buscando principalmente sangría y espacios en blanco, tal vez incluso con colores / estilos de fuente / etc.




44
Si solo está exportando a html, puede envolverlo en una <pre>etiqueta.
Ryan Walker

Respuestas:


5059

Pretty-printing se implementa de forma nativa enJSON.stringify() . El tercer argumento permite una impresión bonita y establece el espacio para usar:

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

Si necesita resaltar la sintaxis, puede usar algo de magia regex así:

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

Ver en acción aquí: jsfiddle

O un fragmento completo proporcionado a continuación:


23
Muy impresionante. Agregué una función para abrir esto en una nueva ventana para la depuración: 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

16
Agradable. Sin embargo, no olvides que necesita css y a <pre>.
NoBugs

44
por alguna razón, cuando lo alerta, de hecho se muestra formateado, pero aún muestra una cadena plana cuando lo escupo a un div a través de jQuery: $ ("# transactionResponse"). show (). html (prettifyObject (data), nulo, '\ t'); donde prettifyObject es un método que creé que contiene las dos primeras líneas anteriores.
PositiveGuy

55
@CoffeeAddict Asegúrese de que su #transactionResponseelemento tenga white-space: pre;un estilo CSS.
user123444555621

72
Tenga en cuenta que stringify(...)funciona en objetos JSON , no en cadenas JSON. Si tiene una cadena, JSON.parse(...)primero debe hacerlo
Vihung

271

La respuesta del usuario Pumbaa80 es excelente si tiene un objeto que desea imprimir bastante. Si está comenzando desde una cadena JSON válida que desea imprimir bastante, primero debe convertirla en un objeto:

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

Esto construye un objeto JSON a partir de la cadena y luego lo convierte de nuevo en una cadena usando la bonita impresión de JSON stringify.


11
Esto funcionó para mí, pero arrojó un error usando, JSON.parseasí que lo modifiqué para que sea JSON.stringify(jsonString, null, 2). Depende de su JSON / Objeto.
Jazzy

15
Tenga en cuenta que al mostrar la cadena debe envolverla en <pre></pre>etiquetas.
Desvío

66
@Jazzy JSON.parsesolo muere si tiene un str JSON no válido o si ya está convertido en un objeto ... asegúrese de saber con qué tipo de datos está tratando antes de intentarloJSON.parse
Kolob Canyon

77
@Jazzy Si tuviera que hacer eso, no tenía una cadena JSON, tenía un objeto normal. JSON es siempre una cadena. Es solo una representación basada en cadenas de un objeto Javascript.
Clonkex

37

Mejor manera.

Prettify JSON Array en Javascript

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

3
¡Gracias! Esta solución es lo que estaba buscando personalmente porque quería simplemente poner un JSON sangrado en un <textarea>
Turbo

2
Esto es mejor porque usa solo la función básica de JavaScript que no requiere un cálculo adicional que podría causar problemas de rendimiento si la operación se repite muchas veces. Lo único que me faltaba para que esto funcionara eran las etiquetas <pre>.
CL

¡Perfecto y exactamente lo que estaba buscando! Corto, dulce y al punto.
John

¡Guauu! ¡gracias! Es muy útil para mi.
Judian

29

Basado en la respuesta de Pumbaa80, modifiqué el código para usar los colores de console.log (seguro que funciona en Chrome) y no HTML. La salida se puede ver dentro de la consola. Puede editar las _variables dentro de la función agregando un poco más de estilo.

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

Aquí hay un marcador que puede usar:

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

Editar: acabo de intentar escapar del símbolo% con esta línea, después de la declaración de variables:

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

Pero descubro que Chrome no admite el% de escape en la consola. Extraño ... Tal vez esto funcione en el futuro.

¡Salud!

ingrese la descripción de la imagen aquí


1
Usé su código pero estoy obteniendo la salida en formato json pero no obtengo el color y también en la última vez que recibo la etiqueta de color esta es la salida {"error": {"código": 0, "mensaje": "O"}}, color: rojo ,, color: rojo ,, color: 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);

En caso de mostrar en HTML, debe agregar una baliza <pre></pre>

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

Ejemplo:


1
¿Qué es un "balise"?
Dan Dascalescu

que significa "etiqueta" en francés
Aymeric bouzy aybbyk

El <pre>es una necesidad si usted muestra el JSON en una <div>. ¡Votado solo por esa pista!
Manuel

23

Uso la extensión JSONView Chrome (es tan bonita como parece :):

Editar: agregado jsonreport.js

También he lanzado un visor de impresión bonita JSON independiente en línea, jsonreport.js, que proporciona un informe HTML5 legible por humanos que puede usar para ver cualquier información JSON.

Puede leer más sobre el formato en Nuevo formato de informe HTML5 de JavaScript .


1
Necesitaba una biblioteca Javascript * .js que pudiera imprimir una cadena JSON agregando elementos y clases html. Algo así como var result = prettyPrint ('{"key": "value"}');
Marcar el

21

Puede usar console.dir(), que es un atajo para console.log(util.inspect()). (La única diferencia es que omite cualquier inspect()función personalizada definida en un objeto).

Utiliza resaltado de sintaxis , sangría inteligente , elimina las comillas de las claves y simplemente hace que la salida sea lo más bonita posible.

const object = JSON.parse(jsonString)

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

y para la línea de comando:

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


¿Alguna forma de obtenerlo para que comience a expandirse?
Daniel Sokolowski

¿A qué te refieres con @DanielSokolowski?
adius

en Chrome Developer Tools, debo hacer clic en el pequeño triángulo para obtener las teclas de los objetos, ¿alguna forma de expandirlo automáticamente? snag.gy/7wPqsl.jpg
Daniel Sokolowski

Mh Buena pregunta. No estoy al tanto de uno, pero sería útil de hecho ...
Adius

9

Aquí está el impresionante HTML de user123444555621 adaptado para terminales. Práctico para depurar scripts de nodo:

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; Esto es equivalente a hacerlo console.debug(data);en (al menos) Chrome y Firefox. No muestra una representación JSON de data, y mucho menos una bonita impresión.
Mark Amery

1
@MarkAmery Hace 2 años, esta característica era nueva para el navegador y funcionaba solo como lo describí. Si eres demasiado joven, ¡me alegro por ti! También la sintaxis como console.debug("%s: %o x %d", str, data, cnt);puede ser útil para alguien.
gavenkoa

2
También busque en lo console.dirque permite navegar por los datos.
Christophe Roussy

7

Insatisfecho con otras impresoras bonitas para Ruby, escribí el mío ( NeatJSON ) y luego lo porté a JavaScript, incluido un formateador en línea gratuito . El código es gratuito bajo licencia MIT (bastante permisivo).

Características (todas opcionales):

  • Establezca un ancho de línea y ajuste de manera que mantenga los objetos y las matrices en la misma línea cuando quepan, ajustando un valor por línea cuando no lo hagan.
  • Ordena las claves de objeto si quieres.
  • Alinee las teclas de objeto (alinee los dos puntos).
  • Formatee números de coma flotante a un número específico de decimales, sin desordenar los enteros.
  • El modo de ajuste 'corto' coloca los corchetes de apertura y cierre en la misma línea que los valores, proporcionando un formato que algunos prefieren.
  • Control granular sobre el espaciado para matrices y objetos, entre paréntesis, antes / después de dos puntos y comas.
  • La función está disponible tanto para los navegadores web como para Node.js.

Copiaré el código fuente aquí para que este no sea solo un enlace a una biblioteca, sino que lo aliento a que vaya a la página del proyecto GitHub , ya que se mantendrá actualizado y el código a continuación no lo hará.

(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

¡Muchas gracias a todos! Basado en las respuestas anteriores, aquí hay otro método variante que proporciona reglas de reemplazo personalizadas como parámetro:

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

¿Qué es el argumento "rr"?
manking

1
@manking ... rules = $ .extend (rules, ('object' === typeof rr)? rr: {}); ... es extender el conjunto de reglas por un objeto rulset. (tal vez encuentre actualizaciones: github.com/frdl/-Flow/blob/master/api-d/4/js-api/library.js/… )
webfan



4

Me encontré con un problema hoy con el código de @ Pumbaa80. Estoy tratando de aplicar el resaltado de sintaxis JSON a los datos que estoy procesando en una vista Mithril , por lo que necesito crear nodos DOM para todo lo que aparece en la JSON.stringifysalida.

Dividí la expresión regular realmente larga en sus partes componentes también.

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)

Código en contexto en Github aquí


4

Aquí hay un simple formato JSON / componente de color escrito en 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>;
};

Véalo trabajando en este CodePen: https://codepen.io/benshope/pen/BxVpjo

¡Espero que ayude!



3

Si necesita que esto funcione en un área de texto, la solución aceptada no funcionará.

<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

Si está buscando una buena biblioteca para embellecer json en una página web ...

Prism.js es bastante bueno.

http://prismjs.com/

Encontré que usar JSON.stringify (obj, undefined, 2) para obtener la sangría, y luego usar prisma para agregar un tema fue un buen enfoque.

Si está cargando en JSON a través de una llamada ajax, puede ejecutar uno de los métodos de utilidad de Prism para embellecer

Por ejemplo:

Prism.highlightAll()

1

Esto es bonito:

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

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>

Ejemplo de hoja de estilo se puede encontrar aquí

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

1

No se pudo encontrar ninguna solución que tuviera un buen resaltado de sintaxis para la consola, así que aquí está mi 2p

Instalar y agregar dependencia de cli-highlight

npm install cli-highlight --save

Definir logjson globalmente

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

Utilizar

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

salida


0

Aquí es cómo puede imprimir sin usar la función 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

La forma más sencilla de mostrar un objeto con fines de depuración:

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

Si desea mostrar el objeto en el DOM, debe tener en cuenta que podría contener cadenas que se interpretarían como HTML. Por lo tanto, debes escapar un poco ...

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

Para resaltarlo y embellecerlo 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

Recomiendo usar HighlightJS . Utiliza el mismo principio que la respuesta aceptada, pero funciona también para muchos otros idiomas y tiene muchos esquemas de color predefinidos . Si usa RequireJS , puede generar un módulo compatible con

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

La generación se basa en Python3 y Java. Agregar -npara generar una versión no minificada.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.