Exibir JSON como HTML [fechado]

178

Alguma recomendação sobre como incorporar JSON em uma página HTML com o JSON formatado em um estilo legível por humanos? Por exemplo, quando você visualiza o XML em um navegador, a maioria dos navegadores exibe o XML formatado (recuo, quebras de linha apropriadas etc.). Eu gostaria do mesmo resultado final para JSON.

O destaque da sintaxe da cor seria um bônus.

obrigado

html json John Muchow
fonte
tohtml.com/javaProperties funcionou muito bem para mim; torna o estilo "inline"; muito útil para copiar e colar simples em outra coisa.
Andrew Bucklin
Confira minha biblioteca azimi.me/json-formatter-js
Mohsen

Respostas:

147

Você pode usar a função JSON.stringify com JSON não formatado. Ele produz de forma formatada.

JSON.stringify({ foo: "sample", bar: "sample" }, null, 4)

Isso vira

{ "foo": "sample", "bar": "sample" }

para dentro

 {
     "foo": "sample", 
     "bar": "sample" 
 }

Agora, os dados estão em um formato legível. Você pode usar o Google Code Prettify script conforme sugerido por @A. Taxa para codificá-la em cores.

Vale acrescentar que o IE7 e navegadores mais antigos não suportam o método JSON.stringify .

John
fonte
4
Para navegadores que não suportam JSON.stringify (vamos dizer o que é, antigo IE), existe um excelente polyfill que você pode usar para obter a funcionalidade ( json.org/js.html ). Basta incluir isso e você estará coberto praticamente em todos os lugares.
John Munsch
1
Outro truque é se você colocar um <br> em vez do campo travessão (4), você vai ter agradáveis quebras de linha
Jonathan
5
melhor resposta, faça o trabalho e não precisa incluir uma biblioteca de terceiros.
BlaShadow
1
Usei isso com grande efeito para um caso de uso em que o JSON formatado por humanos tinha que ser exibido em um elemento HTML <textarea>. Parecia fazer o trabalho simplesmente ótimo.
CSSian
1
Coloque isso em <pre. e pronto, pelo menos para fins de depuração, quando você não pode usar console.log ()
sparklos
93

Se você o estiver exibindo deliberadamente para o usuário final, coloque o texto JSON <PRE>e as <CODE>tags, por exemplo:

<html>
<body>
<pre>
<code>
[
    {
        color: "red",
        value: "#f00"
    },
    {
        color: "green",
        value: "#0f0"
    },
    {
        color: "blue",
        value: "#00f"
    },
    {
        color: "cyan",
        value: "#0ff"
    },
    {
        color: "magenta",
        value: "#f0f"
    },
    {
        color: "yellow",
        value: "#ff0"
    },
    {
        color: "black",
        value: "#000"
    }
]

</code>
</pre>
</body>
</html>

Caso contrário, eu usaria o JSON Viewer .

RedFilter
fonte
10
e se a string estiver toda em uma linha? como ele faz isso bem formatado assim?
Ge194
2
Você é demais. Esta é a resposta mais simples para o que tem sido uma pergunta muito complexa - como imprimir bonito python json em html. obrigado.
Marc Cenedella
1
Não sei como isso não tem mais votos positivos. Solução simples e fácil.
Anthv123
9
@ geowa4, JSON.stringify(jsonObj, null, ' ')irá embelezá-lo com 2 espaços. Sei que é tarde, mas achei que essa dica seria útil.
hIpPy
2
O firefox adverte com: O site a seguir pode conter programas perigosos quando você entra no codeplex.com
JRichardsz 18/01
65

Para realçar a sintaxe, use o código prettify . Acredito que é isso que o StackOverflow usa para destacar o código.

  1. Coloque seu JSON formatado em blocos de código e forneça a classe "prettyprint".
  2. Inclua prettify.js na sua página.
  3. Verifique se a etiqueta do corpo do documento chama prettyPrint()quando carrega

Você terá a sintaxe JSON destacada no formato definido em sua página. Veja aqui um exemplo . Então, se você tivesse um bloco de código como este:

<code class="prettyprint">
    var jsonObj = {
        "height" : 6.2,
        "width" : 7.3,
        "length" : 9.1,
        "color" : {
            "r" : 255,
            "g" : 200,
            "b" : 10
        }
    }
</code>

Seria assim:

var jsonObj = {
    "height" : 6.2,
    "width" : 7.3,
    "length" : 9.1,
    "color" : {
        "r" : 255,
        "g" : 200,
        "b" : 10
    }
}

Isso não ajuda no recuo, mas as outras respostas parecem abordar isso.

A. Levy
fonte
1
Agora que todos os repositórios do Google Code estão congelados, devemos apontar novos usuários diretamente para o novo repositório do GitHub: https://github.com/google/code-prettify
adelriosantiago
Como você pode fazer isso funcionar com o retorno do AJAX? O código não existe na carga do corpo, mas somente após a chamada do ajax.
toddmo
@toddmo, você poderá seguir meus 3 passos na função manipulador de respostas para o retorno AJAX. Portanto, o manipulador chamará prettyPrint em vez do método body onLoad. Espero que funcione.
A. Levy
A resposta de Janus Troelsen caiu e simplesmente funcionou, então eu fui com isso. Você deve dar uma olhada em PHP-> HTML, tão fácil.
precisa saber é o seguinte
40

Eu acho que você quis dizer algo assim: Visualização JSON

Não sei se você pode usá-lo, mas você pode perguntar ao autor.

Peter Örneholm
fonte
Irreal! Ótimo! Eu não sei o que dizer ... muito obrigado
fdrv
Realmente uma boa ferramenta!
David Lilljegren
5

Aqui está uma solução leve, fazendo apenas o que o OP solicitou, incluindo o destaque, mas nada mais: Como posso imprimir JSON usando JavaScript?

Janus Troelsen
fonte
uma função superior, e não apenas para mim, se tudo o que você quer fazer é PHP -> HTML, e aqui está o porquê: É muito leve, muito mais simples do que o Google para usar, muito menor e não requer confiança em uma mega empresa . Você pode realmente olhar para o código e entendê-lo.
precisa saber é o seguinte
1

O SyntaxHighlighter é um marcador de sintaxe de código independente, totalmente funcional, desenvolvido em JavaScript. Para ter uma idéia do que o SyntaxHighlighter é capaz, dê uma olhada napágina de demonstração .

themihai
fonte
0

Se você está procurando fazer isso do ponto de vista de depuração, pode usar um plug-in do Firefox como o JSONovich para visualizar o conteúdo do JSON.

A nova versão do Firefox atualmente em beta está programada para suportar nativamente isso (bem como XML)

AvatarKava
fonte
0

Sua melhor aposta será usar as ferramentas de seu idioma de back-end para isso. Que linguagem você está usando? Para Ruby, tente json_printer .

rfunduk
fonte
-2

Primeiro, pegue a string JSON e crie objetos reais com ela. Faça um loop em todas as propriedades do objeto, colocando os itens em uma lista não ordenada. Toda vez que você chegar a um novo objeto, faça uma nova lista.

geowa4
fonte