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

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.

Coloque seu JSON formatado em blocos de código e forneça a classe "prettyprint".
Inclua prettify.js na sua página.
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

29

algo assim ??

pretty-json

https://github.com/warfares/pretty-json

amostra ao vivo:

http://warfares.github.com/pretty-json/

— warfares
fonte

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

3

Poderia usar JSON2HTML para transformá-lo em uma lista HTML bem formatada. Pode ser um pouco mais poderoso do que você realmente precisa

http://json2html.com

— Chade
fonte

1

desculpe parece que o site do plug-in jquery foi embora, adeus .. tente json2html.com

— Chad Brown

tente o meu: github.com/viscocent/JSON2HTML para problemas mais simples

— Viscocent

Pensei em atualizar isso com a ferramenta visualizador visualizer.json2html.com

— Chad Brown

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

Aqui está uma ferramenta javasript que converterá JSON em XML e vice-versa, o que deve melhorar sua legibilidade. Você pode criar uma folha de estilos para colori-la ou fazer uma transformação completa em HTML.

http://www.xml.com/pub/a/2006/05/31/converting-between-xml-and-json.html

— Wayne Hartman
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