JSON de impresión bonita usando JavaScript

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

preguntado el 26 de enero de 11 a las 19:01

Si solo está enviando a html, puede envolverlo en un <pre> etiqueta. -

todas las respuestas funcionarán, pero debe usar javascript :: var str = JSON.stringify (obj, null, 2); en html // -

26 Respuestas

Pretty-printing se implementa de forma nativa en JSON.stringify(). El tercer argumento permite una impresión bonita y establece el espaciado que se utilizará:

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

Si necesita resaltado de sintaxis, puede usar algo de magia de expresiones regulares como esta:

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

Vea en acción aquí: jsFiddle

O un fragmento completo proporcionado a continuación:

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

contestado el 31 de mayo de 17 a las 11:05

Muy impresionante. Agregué una función para abrir esto en una nueva ventana para depurar: var json = syntaxHighlight (JSON.stringify (obj, undefined, 4);); var w = ventana.open (); var html = " 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; } "; html + =" "+ json +" "; w.document.writeln (html); - jaycrossler

Lindo. No olvide que necesita CSS y un <pre>, aunque. - Sin errores

por alguna razón, cuando lo alerté, de hecho se muestra formateado, sin embargo, todavía muestra una cadena plana cuando la escupo en un div a través de jQuery: $ ("# transactionResponse"). show (). html (prettifyObject (data), nulo, '\ t'); donde prettifyObject es un método que creé que contiene sus dos primeras líneas arriba. - ChicoPositivo

@CoffeeAddict Asegúrese de que su #transactionResponse elemento tiene white-space: pre; como estilo CSS. - user123444555621

Tenga en cuenta que stringify(...) funciona en JSON objetos, no en cadenas JSON. Si tiene una cuerda, necesita JSON.parse(...) primero - Vihung

La respuesta del usuario Pumbaa80 es genial si tienes un objeto quieres bastante impreso. Si está comenzando desde un JSON válido cadena que desea imprimir bastante, primero debe convertirlo en un objeto:

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

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

Respondido el 14 de enero de 16 a las 03:01

Esto funcionó para mí, pero arrojó un error al usar JSON.parse así que lo modifiqué para que fuera JSON.stringify(jsonString, null, 2). Depende de su JSON / Object. - Llamativo

Tenga en cuenta que al mostrar la cadena debe envolverla <pre></pre> etiquetas. - Distracción

@Llamativo JSON.parse solo muere si tiene un JSON str inválido o si ya está convertido en un objeto ... asegúrese de saber con qué tipo de datos está tratando antes de intentar JSON.parse - Cañón de Kolob

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

Mejor manera.

Embellecer la matriz JSON en Javascript

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

Respondido 21 Oct 17, 11:10

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

Esto es mejor porque solo usa la función básica de JavaScript que no requiere cálculos adicionales, lo que podría causar problemas de rendimiento si la operación se repite muchas veces. Lo único que me faltaba para que esto funcionara era etiquetas. - CL

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

Me preguntaba que \t representado, aparentemente es un [tab]. - Rounín

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:

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>

Respondido 12 Jul 18, 04:07

¿Qué es una "baliza"? - Dan Dascalescu

significa "etiqueta" en francés - Aymeric Bouzy aybbyk

La <pre> es imprescindible si muestra el JSON en un <div>. ¡Votado solo por esa pista! - Manuel

¡Este es un riesgo extremo de XSS! Pegar en la consola: document.querySelector('body').innerHTML = '<pre>' + JSON.stringify({ xss: '<img src=\'https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico\' onload=\'document.querySelector(&quot;body&quot;).innerHTML = &quot;XSS Lives Here!&quot;;\';/>' }, null, 2) + '</pre>'; - Daniel F

Cualquier cosa configurada usando innerHTML DEBE ser HTML escapado si no confía en los datos (que es el caso habitual). - Daniel F

Basado en la respuesta de Pumbaa80, modifiqué el código para usar los colores de console.log (trabajando en Chrome seguro) y no HTML. La salida se puede ver dentro de la consola. Puede editar las _variables dentro de la función agregando más 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 bookmarklet 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: Intenté 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% de escape en la consola. Extraño ... Quizás esto funcione en el futuro.

¡Aclamaciones!

enter image description here

Respondido el 19 de diciembre de 16 a las 22:12

Usé tu código pero obtengo la salida en formato json pero no obtengo el color y también en la última obtengo la etiqueta de color, esta es la salida {"error": {"código": 0, "mensaje": "O"}}, color: rojo ,, color: rojo ,, color: naranja oscuro - ramesh027

Yo uso el Extensión JSONView Chrome (es tan bonito como se pone :):

Editar: agregado jsonreport.js

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

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

Respondido 11 Jul 14, 01:07

Necesitaba una biblioteca Javascript * .js que pudiera imprimir bastante una cadena JSON agregando elementos y clases html. Algo como var result = prettyPrint ('{"clave": "valor"}'); - Mark

Puedes usar el console.dir(), que es un atajo para console.log(util.inspect()). (La única diferencia es que pasa por alto cualquier costumbre inspect() función definida en un objeto.)

Utiliza resaltado de sintaxis, sangría inteligente, elimina las comillas de las claves y 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})}))"

contestado el 02 de mayo de 16 a las 14:05

¿Alguna forma de conseguirlo para que empiece a expandirse? - daniel sokolowski

¿Qué quieres decir con @DanielSokolowski? - adio

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

Aquí está el increíble HTML de user123444555621 adaptado para terminales. Útil 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);

Respondido 13 Jul 18, 08:07

Respondido el 10 de enero de 13 a las 14:01

-1; esto es equivalente a simplemente hacer console.debug(data); en (al menos) Chrome y Firefox. No muestra una representación JSON de data, por no hablar de una bonita impresa. - marca amery

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

También mira en console.dir que permite navegar por los datos. - christophe roussy

Insatisfecho con otras impresoras bonitas para Ruby, escribí la mía propia (OrdenadoJSON) y entonces lo porté a JavaScript incluso 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 los objetos y matrices se mantengan en la misma línea cuando encajen, ajustando un valor por línea cuando no lo hagan.
  • Ordene las claves de objeto si lo desea.
  • Alinear las teclas de los objetos (alinear los dos puntos).
  • Formatee los números de punto flotante a un número específico de decimales, sin estropear los números enteros.
  • El modo de ajuste 'corto' coloca los corchetes / llaves de apertura y cierre en la misma línea que los valores, proporcionando un formato que algunos prefieren.
  • Control granular sobre el espaciado de matrices y objetos, entre paréntesis, antes / después de dos puntos y comas.
  • La función está disponible para navegadores web y Node.js.

Copiaré el código fuente aquí para que no sea solo un enlace a una biblioteca, pero te animo a que vayas al Página del proyecto de GitHub, ya que se mantendrá actualizado y el código a continuación no.

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

Respondido 19 Abr '15, 22:04

¡Muchas gracias @todos! Según las respuestas anteriores, aquí hay otro método de 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;
 }

respondido 29 nov., 16:23

¿Qué es el argumento "rr"? - Manejar

@manking ... reglas = $ .extend (reglas, ('objeto' === tipo de rr)? rr: {}); ... es extender el conjunto de reglas mediante un objeto rulset. (tal vez encuentre actualizaciones: github.com/frdl/-Flow/blob/master/api-d/4/js-api/library.js/… ) - fans de la web

Funciona bien:

console.table()

Lee más aquí: https://developer.mozilla.org/pt-BR/docs/Web/API/Console/table

respondido 15 mar '17, 11:03

console.table () usa bien el desarrollo, trabajo con él - user5044606

Aquí hay un componente de formato / color JSON simple 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 funcionando en este CodePen: https://codepen.io/benshope/pen/BxVpjo

Espero que ayude!

contestado el 13 de mayo de 18 a las 08:05

JSON de Douglas Crockford en la biblioteca de JavaScript imprimirá bastante JSON a través del método stringify.

También puede encontrar útiles las respuestas a esta pregunta anterior: ¿Cómo puedo imprimir JSON en un script de shell (unix)?

contestado el 23 de mayo de 17 a las 13:05

Hoy encontré un problema con el código de @ Pumbaa80. Estoy tratando de aplicar el resaltado de sintaxis JSON a los datos que estoy representando en un Mithril vista, por lo que necesito crear nodos DOM para todo en el JSON.stringify salida.

También dividí la expresión regular realmente larga en sus partes componentes.

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í

Respondido 03 ago 17, 05:08

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

Utiliza

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

salida

Respondido el 08 de enero de 19 a las 18:01

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

Respondido 05 Abr '17, 01:04

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

Prism.js es bastante bueno.

http://prismjs.com/

Descubrí que usar JSON.stringify (obj, undefined, 2) para obtener la sangría, y luego usar prisma para agregar un tema era 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()

respondido 19 nov., 17:16

Esto es bonito:

https://github.com/mafintosh/json-markup del 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>

Puede encontrar una hoja de estilo de ejemplo aquí

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

Respondido el 22 de diciembre de 16 a las 22:12

Puedes usar el JSON.stringify(your object, null, 2) El segundo parámetro se puede usar como una función de reemplazo que toma key y Val como parámetros. Esto se puede usar en caso de que desee modificar algo dentro de su objeto JSON.

más referencia: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

Respondido el 28 de diciembre de 18 a las 08:12

Esta respuesta es un duplicado de la respuesta principal con más de 5400 votos. - fatalidad

Para resaltarlo y embellecerlo en HTML usar 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>";
        }
    );
}

Respondido el 17 de diciembre de 19 a las 04:12

Así es como puede imprimir sin utilizar 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
    }
  }
*/

respondido 24 nov., 17:20

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 considerar que podría contener cadenas que se interpretarían como HTML. Por lo tanto, necesita hacer un poco de escape...

var s = JSON.stringify(data,null,2) // format
var e = new Option(s).innerHTML // escape
document.body.insertAdjacentHTML('beforeend','<pre>'+e+'</pre>') // display

Respondido 04 Jul 18, 04:07

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

Respondido 31 Jul 19, 21:07

Me gustaria mostrar mi jsonAnalyze método aquí, hace un bonita impresión de la estructura JSON solamente, pero en algunos casos puede ser más útil que imprimir el JSON completo.

Digamos que tiene un JSON complejo como este:

let theJson = {
'username': 'elen',
'email': 'elen@test.com',
'state': 'married',
'profiles': [
    {'name': 'elenLove', 'job': 'actor' },
    {'name': 'elenDoe', 'job': 'spy'}
],
'hobbies': ['run', 'movies'],
'status': {
    'home': { 
        'ownsHome': true,
        'addresses': [
            {'town': 'Mexico', 'address': '123 mexicoStr'},
            {'town': 'Atlanta', 'address': '4B atlanta 45-48'},
        ]
    },
    'car': {
        'ownsCar': true,
        'cars': [
            {'brand': 'Nissan', 'plate': 'TOKY-114', 'prevOwnersIDs': ['4532354531', '3454655344', '5566753422']},
            {'brand': 'Benz', 'plate': 'ELEN-1225', 'prevOwnersIDs': ['4531124531', '97864655344', '887666753422']}
        ]
    }
},
'active': true,
'employed': false,
};

Entonces el método devolverá la estructura así:

username
email
state
profiles[]
    profiles[].name
    profiles[].job
hobbies[]
status{}
    status{}.home{}
        status{}.home{}.ownsHome
        status{}.home{}.addresses[]
            status{}.home{}.addresses[].town
            status{}.home{}.addresses[].address
    status{}.car{}
        status{}.car{}.ownsCar
        status{}.car{}.cars[]
            status{}.car{}.cars[].brand
            status{}.car{}.cars[].plate
            status{}.car{}.cars[].prevOwnersIDs[]
active
employed

Entonces este es el jsonAnalyze() código:

function jsonAnalyze(obj) {
        let arr = [];
        analyzeJson(obj, null, arr);
        return logBeautifiedDotNotation(arr);

    function analyzeJson(obj, parentStr, outArr) {
        let opt;
        if (!outArr) {
            return "no output array given"
        }
        for (let prop in obj) {
            opt = parentStr ? parentStr + '.' + prop : prop;
            if (Array.isArray(obj[prop]) && obj[prop] !== null) {
                    let arr = obj[prop];
                if ((Array.isArray(arr[0]) || typeof arr[0] == "object") && arr[0] != null) {                        
                    outArr.push(opt + '[]');
                    analyzeJson(arr[0], opt + '[]', outArr);
                } else {
                    outArr.push(opt + '[]');
                }
            } else if (typeof obj[prop] == "object" && obj[prop] !== null) {
                    outArr.push(opt + '{}');
                    analyzeJson(obj[prop], opt + '{}', outArr);
            } else {
                if (obj.hasOwnProperty(prop) && typeof obj[prop] != 'function') {
                    outArr.push(opt);
                }
            }
        }
    }

    function logBeautifiedDotNotation(arr) {
        retStr = '';
        arr.map(function (item) {
            let dotsAmount = item.split(".").length - 1;
            let dotsString = Array(dotsAmount + 1).join('    ');
            retStr += dotsString + item + '\n';
            console.log(dotsString + item)
        });
        return retStr;
    }
}

jsonAnalyze(theJson);

Respondido 02 Feb 21, 14:02

basado en @ user123444555621, solo un poco más moderno.

const clsMap = [
    [/^".*:$/, "key"],
    [/^"/, "string"],
    [/true|false/, "boolean"],
    [/null/, "key"],
    [/.*/, "number"],
]

const syntaxHighlight = obj => JSON.stringify(obj, null, 4)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => `<span class="${clsMap.find(([regex]) => regex.test(match))[1]}">${match}</span>`);

también puede especificar los colores dentro de js (no se necesita CSS)

const clsMap = [
    [/^".*:$/, "red"],
    [/^"/, "green"],
    [/true|false/, "blue"],
    [/null/, "magenta"],
    [/.*/, "darkorange"],
]

const syntaxHighlight = obj => JSON.stringify(obj, null, 4)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => `<span style="color:${clsMap.find(([regex]) => regex.test(match))[1]}">${match}</span>`);

y una versión con menos expresiones regulares

const clsMap = [
    [match => match.startsWith('"') && match.endsWith(':'), "red"],
    [match => match.startsWith('"'), "green"],
    [match => match === "true" || match === "false" , "blue"],
    [match => match === "null", "magenta"],
    [() => true, "darkorange"],
];
    
const syntaxHighlight = obj => JSON.stringify(obj, null, 4)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => `<span style="color:${clsMap.find(([fn]) => fn(match))[1]}">${match}</span>`);

Respondido el 02 de junio de 21 a las 10:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.