JavaScript Pretty Print JSON

Este artigo descreve como imprimir JSON em JavaScript.

Use JSON.stringify() para Pretty Print JSON em JavaScript

O argumento JSON.stringify() permite que o conteúdo seja exibido em letras bonitas e permite ao usuário definir o espaçamento que se adapta à sua legibilidade.

Você pode fazer isso definindo uma variável de string da seguinte maneira.

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

Destaque a sintaxe JSON

Se você precisa destacar uma sintaxe JSON, você precisa criar uma função e incluir o código regex.

function prettyString(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 str1 = 'number';
        if (/^"/.test(match)) {
          if (/:$/.test(match)) {
            str1 = 'key';
          } else {
            str1 = 'string';
          }
        } else if (/true|false/.test(match)) {
          str1 = 'boolean';
        } else if (/null/.test(match)) {
          str1 = 'null';
        }
        return '<span class="' + str1 + '">' + match + '</span>';
      });
}

Use JSON.parse() para Pretty Print JSON em JavaScript

O método acima usa json.stringify() e funciona muito bem em objetos JSON, mas não em strings JSON. Para fornecer uma impressão bonita de uma string JSON, você precisará primeiro convertê-la em um objeto.

var string1 = '{"program":"code"}';
var prettyPrint = JSON.stringify(JSON.parse(string1), null, 2);

Certifique-se de envolver a string nas tags HTML <pre> e </pre> para que possa ser exibida corretamente.

Use um array JSON

Como alternativa, você pode usar um array JSON em JavaScript. É simples e não requer computação extra, o que pode tornar o programa lento, especialmente se for repetido várias vezes.

Por exemplo:

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

Isso também deve ser usado nas tags <pre> e </pre>.