Exibir JSON como HTML

votos
135

Quaisquer recomendações sobre como incorporar JSON em uma página HTML com o JSON formatado em um estilo legível? Por exemplo, quando você exibir XML em um navegador, a maioria dos navegadores exibir o XML formatado (recuados, quebras de linha apropriados, etc). Eu gostaria que o mesmo resultado final para JSON.

Cor destaque de sintaxe seria um bônus.

obrigado

Publicado 19/05/2009 em 18:09
fonte usuário
Em outras línguas...                            


12 respostas

votos
112

Você pode usar a função JSON.stringify com JSON formatado. Ele produz isso de uma maneira formatada.

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

Isso transforma

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

para dentro

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

Agora os dados são um formato legível você pode usar o Google Code Prettify script como sugerido por @A. Levy ao código de cor-lo.

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

Respondeu 28/11/2011 em 11:35
fonte usuário

votos
53

Para o destaque de sintaxe, uso de código embelezar . Eu acredito que este é o que StackOverflow utiliza para a sua Realce de código.

  1. Envolva seu formatado JSON em blocos de código e dar-lhes a classe "prettyprint".
  2. Incluir prettify.js em sua página.
  3. Certifique-se de tag corpo do seu documento chama prettyPrint()quando ele carrega

Você terá sintaxe destacada JSON no formato que você estabeleceu 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>

Ele ficaria assim:

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

Isto não ajuda com o recuo, mas as outras respostas parecem estar a resolver isso.

Respondeu 19/05/2009 em 18:22
fonte usuário

votos
53

Se você está exibindo isso deliberadamente para o usuário final, quebrar o texto JSON em <PRE>e <CODE>marcas, 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 iria usar JSON Visualizador .

Respondeu 19/05/2009 em 18:11
fonte usuário

votos
34

Eu acho que você quis dizer algo como isto: JSON Visualization

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

Respondeu 19/05/2009 em 18:13
fonte usuário

votos
27

algo assim ??

pretty-json

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

amostra viva:

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

Respondeu 21/12/2012 em 19:23
fonte usuário

votos
5

Aqui está uma solução leve, fazendo apenas o OP pediu, inclusive destacando mas nada mais: Como posso JSON pretty-print usando JavaScript?

Respondeu 07/03/2012 em 15:20
fonte usuário

votos
3

Poderia usar JSON2HTML para transformá-lo à lista HTML bem formatado .. pode ser um pouco mais poderoso do que você realmente precisa embora

http://json2html.com

Respondeu 23/06/2011 em 20:02
fonte usuário

votos
1

SyntaxHighlighter é um código marcador sintaxe auto-suficiente totalmente funcional desenvolvido em JavaScript. Para se ter uma idéia do que SyntaxHighlighter é capaz de, ter um olhar para a demonstração página.

Respondeu 11/06/2011 em 06:25
fonte usuário

votos
0

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

Respondeu 19/05/2009 em 18:18
fonte usuário

votos
0

Aqui está uma ferramenta javasript que irá converter JSON para XML e vice-versa, o que deverá reforçar a sua legibilidade. Você poderia, então, criar uma folha de estilo para colori-la ou fazer transformar um completo para HTML.

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

Respondeu 19/05/2009 em 18:17
fonte usuário

votos
0

Se você está olhando apenas para fazer isso do ponto de vista de depuração, você pode usar um plugin do Firefox, como JSONovich para ver o conteúdo JSON.

A nova versão do Firefox que está atualmente em beta está previsto para suportar nativamente este (muito parecido com XML)

Respondeu 19/05/2009 em 18:11
fonte usuário

votos
-2

Tire primeiro a string JSON e fazer objetos reais fora dele. Loop embora 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.

Respondeu 19/05/2009 em 18:14
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more