JSON de impressão bonita usando JavaScript

2427

Como posso exibir JSON em um formato fácil de ler (para leitores humanos)? Estou procurando principalmente recuo e espaço em branco, talvez até com cores / estilos de fonte / etc.

Marca
fonte
3
Possível duplicata de Como posso embelezar JSON programaticamente?
Hippietrail 02/03
2
@hippietrail meta.stackoverflow.com/q/251938/3853934
Michał Perłakowski
4
Se você está apenas produzindo para html, pode envolvê-lo em uma <pre>tag.
Ryan Walker

Respostas:

5059

A impressão bonita é implementada nativamente noJSON.stringify() . O terceiro argumento permite uma impressão bonita e define o espaçamento a ser usado:

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

Se você precisar de destaque de sintaxe, poderá usar um pouco de mágica de regex como:

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

Veja em ação aqui: jsfiddle

Ou um snippet completo fornecido abaixo:

user123444555621
fonte
23
Super incrível. Eu adicionei uma função para abrir isso em uma nova janela para depuração: var json = syntaxHighlight (JSON.stringify (obj, undefined, 4);); var w = window.open (); var html = "<head> <style> pre {esboço: 1px sólido #ccc; padding: 5px; margem: 5px;} .string {color: green;}"; html + = ".número {color: darkorange;} .booleano {color: blue;} .null {color: magenta;} .key {color: red;} </style> </head> <body>"; html + = "<pre>" + json + "</pre>"; w.document.writeln (html);
JayCrossler
16
Agradável. Não esqueça que ele precisa de css e a <pre>.
NoBugs #
4
por algum motivo, quando eu o alerta, ele realmente mostra formatado, mas ainda mostra uma sequência simples quando eu cuspo em uma div via jQuery: $ ("# transactionResponse"). show (). html (prettifyObject (data), nulo, '\ t'); onde prettifyObject é um método que eu criei que contém suas duas primeiras linhas acima.
PositiveGuy
5
@CoffeeAddict Verifique se o seu #transactionResponseelemento possui white-space: pre;um estilo CSS.
user123444555621
72
Observe que stringify(...)funciona em objetos JSON , não em cadeias JSON. Se você tem uma string, você precisa JSON.parse(...)primeiro
Vihung
271

A resposta do usuário Pumbaa80 é ótima se você tem um objeto que deseja imprimir bastante. Se você estiver iniciando a partir de uma sequência JSON válida que deseja imprimir, precisará convertê-la em um objeto primeiro:

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

Isso cria um objeto JSON a partir da string e depois o converte novamente em uma string usando a bonita impressão de JSON stringify.

Rick Hanlon II
fonte
11
Isso funcionou para mim, mas gerou um erro usando, JSON.parseentão eu o modifiquei para ser JSON.stringify(jsonString, null, 2). Depende do seu JSON / Objeto.
Jazzy
15
Observe que, ao exibir a string, você precisa envolvê-la em <pre></pre>tags.
Undistraction
6
@Jazzy JSON.parseúnica morre se você tem um str JSON inválida ou já é convertido em um objeto ... certifique-se que você sabe que tipo de dados você está lidando com antes de tentarJSON.parse
Kolob Canyon
7
@Jazzy Se você tivesse que fazer isso, não tinha uma string JSON, tinha um objeto normal. JSON é sempre uma string. É apenas uma representação baseada em string de um objeto Javascript.
Clonkex
37

Melhor maneira.

Prettify JSON Array em Javascript

JSON.stringify(jsonobj,null,'\t')
Charmie
fonte
3
Obrigado! Esta solução é o que eu estava pessoalmente procurando porque eu queria simplesmente colocar um recuado JSON em um <textarea>
Turbo
2
Isso é melhor porque você usa apenas a função javascript básica que não requer computação adicional, o que pode causar problemas de desempenho se a operação for repetida várias vezes. Só faltava que eu trabalhasse com tags <pre>.
CL
Perfeito e exatamente o que eu estava procurando! Curto, doce e direto ao ponto.
John
Uau! obrigado! É muito útil para mim.
judian
29

Com base na resposta de Pumbaa80, modifiquei o código para usar as cores console.log (trabalhando no Chrome com certeza) e não HTML. A saída pode ser vista dentro do console. Você pode editar as variáveis ​​_ dentro da função, adicionando um pouco mais 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);
}

Aqui está um bookmarklet que você pode 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);

Edit: Eu apenas tentei escapar do símbolo% com esta linha, após a declaração das variáveis:

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

Mas descubro que o Chrome não suporta% de escape no console. Estranho ... Talvez isso funcione no futuro.

Felicidades!

insira a descrição da imagem aqui

Milen Boev
fonte
1
Eu usei o código ur, mas estou obtendo a saída no formato json, mas não estou obtendo a cor e também no último estou obtendo a tag de cor, esta é a saída {"error": {"code": 0, "message": "O"}}, cor: vermelho ,, cor: vermelho ,, cor: 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);

No caso de exibição em HTML, você deve adicionar um balise <pre></pre>

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

Exemplo:

Adel MANI
fonte
1
O que é um "balise"?
Dan Dascalescu
que significa "tag" em francês
Aymeric Bouzy aybbyk
A <pre>é uma obrigação se você mostrar o JSON em um <div>. Votado apenas para essa dica!
Manuel
23

Eu uso a extensão JSONView Chrome (é a mais bonita possível :):

Editar: adicionado jsonreport.js

Também liberei um visualizador de impressão bonita JSON independente on-line, jsonreport.js, que fornece um relatório HTML5 legível por humanos, que você pode usar para visualizar quaisquer dados JSON.

Você pode ler mais sobre o formato em Novo formato de relatório HTML5 JavaScript .

mythz
fonte
1
Eu precisava de uma biblioteca Javascript * .js que pudesse imprimir uma string JSON adicionando elementos e classes html. Algo como var result = prettyPrint ('{"key": "value"}');
Mar
21

Você pode usar console.dir(), que é um atalho para console.log(util.inspect()). (A única diferença é que ela ignora qualquer inspect()função personalizada definida em um objeto.)

Ele usa realce de sintaxe , recuo inteligente , remove aspas das chaves e apenas torna a saída a mais bonita possível.

const object = JSON.parse(jsonString)

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

e para a linha de comando:

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

adius
fonte
Alguma maneira de obtê-lo para que ele comece expandido?
Daniel Sokolowski
O que você quer dizer @DanielSokolowski?
adius 21/07
nas Ferramentas para desenvolvedores do Chrome, preciso clicar no pequeno triângulo para acessar as chaves dos objetos, de alguma forma para expandi-lo automaticamente? snag.gy/7wPqsl.jpg
Daniel Sokolowski
Mh. Boa pergunta. Eu não estou ciente de um, mas seria realmente útil ...
adius
9

Aqui está o incrível HTML de user123444555621 adaptado para terminais. Útil para depurar scripts de Nó:

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);
James Heazlewood
fonte
7

Para fins de depuração, eu uso:

console.debug ("% o", dados);
gavenkoa
fonte
3
-1; isso é equivalente a apenas fazer console.debug(data);(pelo menos) Chrome e Firefox. Ele não mostra uma representação JSON de data, muito menos uma bem impressa.
Mark # Amery #
1
@MarkAmery Há 2 anos, esse recurso era novo para o navegador e funcionava apenas como eu descrevi. Se você é jovem demais - estou feliz por você! Também sintaxe como console.debug("%s: %o x %d", str, data, cnt);ainda pode ser útil para alguém.
Gavenkoa 31/05
2
Veja também o console.dirque permite navegar pelos dados.
Christophe Roussy
7

Insatisfeito com outras impressoras bonitas para Ruby, escrevi o meu ( NeatJSON ) e depois o transportei para JavaScript, incluindo um formatador online gratuito . O código é gratuito sob licença do MIT (bastante permissivo).

Recursos (todos opcionais):

  • Defina uma largura de linha e agrupe de maneira a manter objetos e matrizes na mesma linha quando eles se ajustarem, quebrando um valor por linha quando não o fizerem.
  • Classifique as chaves do objeto, se quiser.
  • Alinhe as chaves do objeto (alinhe os dois pontos).
  • Formate números de ponto flutuante para um número específico de casas decimais, sem bagunçar os números inteiros.
  • O modo de quebra automática 'curto' coloca colchetes de abertura e fechamento na mesma linha que os valores, fornecendo um formato que alguns preferem.
  • Controle granular do espaçamento entre matrizes e objetos, entre colchetes, antes / depois de dois pontos e vírgulas.
  • A função é disponibilizada para navegadores da web e Node.js.

Copiarei o código fonte aqui para que este não seja apenas um link para uma biblioteca, mas encorajo você a ir para a página do projeto GitHub , pois ele será mantido atualizado e o código abaixo não.

(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);
Phrogz
fonte
5

Muito obrigado @todos! Com base nas respostas anteriores, aqui está outro método variante que fornece regras de substituição 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;
 }
webfan
fonte
O que é o argumento "rr"?
manking
1
@manking ... rules = $ .extend (rules, ('objeto' === tipo de rr)? rr: {}); ... é estender o conjunto de regras por um objeto rulset. (talvez você encontre atualizações: github.com/frdl/-Flow/blob/master/api-d/4/js-api/library.js/… )
webfan
4

O JSON de Douglas Crockford na biblioteca JavaScript imprimirá bastante o JSON através do método stringify.

Você também pode achar úteis as respostas para essa pergunta mais antiga: Como imprimir JSON em um shell script (unix)?

zcopley
fonte
4

Hoje encontrei um problema com o código do @ Pumbaa80. Estou tentando aplicar o destaque da sintaxe JSON aos dados que estou renderizando em uma exibição do Mithril , portanto, preciso criar nós DOM para tudo noJSON.stringify saída.

Também divido o regex muito longo em seus 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 em contexto no Github aqui

Just Jake
fonte
4

Aqui está um simples formato JSON / componente de cor escrito em 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>;
};

Veja-o trabalhando neste CodePen: https://codepen.io/benshope/pen/BxVpjo

Espero que ajude!

benshope
fonte
3

Se você precisar que isso funcione em uma área de texto, a solução aceita não 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;
}
Kolob Canyon
fonte
3

Se você está procurando uma boa biblioteca para fazer json em uma página da web ...

Prism.js é muito bom.

http://prismjs.com/

Eu descobri que usar JSON.stringify (obj, undefined, 2) para obter o recuo e, em seguida, usar o prisma para adicionar um tema foi uma boa abordagem.

Se você estiver carregando no JSON por meio de uma chamada ajax, poderá executar um dos métodos utilitários do Prism para pretender

Por exemplo:

Prism.highlightAll()
chim
fonte
1

Isso é legal:

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>

A folha de estilo de exemplo pode ser encontrada aqui

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

Não foi possível encontrar nenhuma solução que tivesse um bom destaque de sintaxe para o console, então aqui está o meu 2p

Instalar e adicionar dependência cli-realce

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

Usar

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

resultado

Snovelli
fonte
0

Aqui está como você pode imprimir sem usar a função 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
    }
  }
*/
everlasto
fonte
0

A maneira mais simples de exibir um objeto para fins de depuração:

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

Se você deseja exibir o objeto no DOM, considere que ele pode conter seqüências de caracteres que seriam interpretadas como HTML. Portanto, você precisa fazer algumas escapadas ...

var s = JSON.stringify(data,null,2) // format
var e = new Option(s).innerHTML // escape
document.body.insertAdjacentHTML('beforeend','<pre>'+e+'</pre>') // display
nobar
fonte
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>
Louie
fonte
0

Para realçar e embelezá-lo 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>";
        }
    );
}
Mahdyfo
fonte
-1

Eu recomendo usar o HighlightJS . Ele usa o mesmo princípio da resposta aceita, mas funciona também para muitos outros idiomas e possui muitos esquemas de cores predefinidos . Se estiver usando o RequireJS , você poderá gerar um módulo compatível com

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

A geração depende de Python3 e Java. Adicionar -npara gerar uma versão não minificada.

Rok Strniša
fonte