Mostrar JSON como HTML [cerrado]

178

¿Alguna recomendación sobre cómo incrustar JSON en una página HTML con JSON formateado en un estilo legible para humanos? Por ejemplo, cuando ve XML en un navegador, la mayoría de los navegadores muestran el formato XML (sangría, saltos de línea adecuados, etc.). Me gustaría el mismo resultado final para JSON.

El resaltado de sintaxis de color sería una ventaja.

Gracias

html json

— John Muchow
fuente

tohtml.com/javaProperties funcionó muy bien para mí; hace que el estilo sea "en línea"; muy útil para copiar y pegar en otra cosa.

— Andrew Bucklin

Echa un vistazo a mi biblioteca azimi.me/json-formatter-js

— Mohsen

147

Puede usar la función JSON.stringify con JSON sin formato. Lo emite de forma formateada.

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

Esto da vuelta

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

dentro

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

Ahora los datos son un formato legible, puede usar la secuencia de comandos de Google Code Prettify como lo sugiere @A. Levy para codificarlo por colores.

Vale la pena agregar que los navegadores IE7 y anteriores no son compatibles con el método JSON.stringify .

— Juan
fuente

44

Para los navegadores que no son compatibles con JSON.stringify (salgamos y digámoslo, IE antiguo) hay un polyfill excelente que puede usar para obtener la funcionalidad ( json.org/js.html ). Solo incluye eso y estarás cubierto prácticamente en todas partes.

— John Munsch

1

otro truco es que si pones un <br> en lugar del campo de sangría (4), obtendrás buenos saltos de línea

— Jonathan

55

La mejor respuesta es hacer el trabajo y no es necesario incluir una biblioteca de terceros.

— BlaShadow

1

Usé esto con gran efecto para un caso de uso donde el JSON con formato humano tenía que mostrarse en un elemento HTML <textarea>. Parecía hacer el trabajo simplemente genial.

— CSSian

1

Pon esto en <pre. y está configurado, al menos para fines de depuración, cuando no puede usar console.log ()

— sparklos

94

Si lo está mostrando deliberadamente para el usuario final, ajuste el texto JSON <PRE>y las <CODE>etiquetas, por ejemplo:

<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>

De lo contrario, usaría JSON Viewer .

— RedFilter
fuente

10

¿Y si la cadena está toda en una línea? ¿Cómo lo hace bien formateado así?

— geowa4

2

Tú Molas. Esta es la respuesta más simple a lo que ha sido una pregunta muy compleja: cómo imprimir Python Json en html. gracias.

— Marc Cenedella

1

No sé cómo esto no tiene más votos a favor. Solución simple, fácil.

— anthv123

9

@ geowa4, JSON.stringify(jsonObj, null, ' ')lo embellecerá con 2 espacios. Sé que es tarde, pero pensé que este consejo sería útil.

— FELIZ

2

Firefox advierte con: El sitio que se encuentra a continuación puede contener programas dañinos cuando ingresas a codeplex.com

— JRichardsz

65

Para el resaltado de sintaxis, use el código prettify . Creo que esto es lo que StackOverflow usa para resaltar el código.

Envuelva su JSON formateado en bloques de código y dele la clase "prettyprint".
Incluya prettify.js en su página.
Asegúrese de que la etiqueta del cuerpo de su documento llame prettyPrint()cuando se carga

Tendrá la sintaxis resaltada JSON en el formato que ha establecido en su página. Ver aquí para un ejemplo . Entonces, si tuviera un bloque 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>

Se vería así:

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

Esto no ayuda con la sangría, pero las otras respuestas parecen estar abordando eso.

— A. Levy
fuente

1

Ahora que todos los repositorios de Google Code están congelados, deberíamos estar señalando a los nuevos usuarios directamente al nuevo repositorio de GitHub: https://github.com/google/code-prettify

— adelriosantiago

¿Cómo puede hacer que esto funcione dentro de AJAX return? El código no está allí en la carga corporal, sino solo después de una llamada ajax.

— toddmo

@toddmo, debería poder seguir mis 3 pasos en la función del controlador de respuestas para el retorno de AJAX. Por lo tanto, el controlador llamará a prettyPrint en lugar del método body onLoad. Espero que eso funcione.

— A. Levy

La respuesta de Janus Troelsen cayó y simplemente funcionó, así que seguí con eso. Deberías comprobarlo para PHP-> HTML, tan fácil.

— toddmo

40

Creo que quisiste decir algo como esto: visualización JSON

No sé si podría usarlo, pero puede preguntarle al autor.

— Peter Örneholm
fuente

¡Irreal! ¡Excelente! No sé qué decir ... muchas gracias

— fdrv

Realmente una buena herramienta!

— David Lilljegren

29

algo como esto ??

bonita-json

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

muestra en vivo:

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

— guerras
fuente

5

Aquí hay una solución ligera, que hace solo lo que OP le pidió, incluido el resaltado, pero nada más: ¿Cómo puedo imprimir JSON usando JavaScript?

— Janus Troelsen
fuente

una función superior, y no solo para mí, si todo lo que quiere hacer es PHP -> HTML, y he aquí por qué: es muy liviano, mucho más simple que Google para usar, mucho más pequeño y no requiere confiar en una mega compañía . De hecho, puedes mirar el código y entenderlo.

— toddmo

3

Podría usar JSON2HTML para transformarlo en una lista HTML bien formateada ... aunque puede ser un poco más potente de lo que realmente necesita

http://json2html.com

— Chad
fuente

1

lo siento parece que el sitio del complemento jquery se ha ido adiós ... intente json2html.com

— Chad Brown

pruebe el mío: github.com/viscocent/JSON2HTML para problemas más simples

— Viscocent

pensé que actualizaría esto con la herramienta de visualización visualizer.json2html.com

— Chad Brown

1

SyntaxHighlighter es un resaltador de sintaxis de código autónomo totalmente funcional desarrollado en JavaScript. Para tener una idea de lo que es capaz SyntaxHighlighter, eche un vistazo a lapágina de demostración .

— themihai
fuente

0

Si solo está buscando hacer esto desde el punto de vista de la depuración, puede usar un complemento de Firefox como JSONovich para ver el contenido de JSON.

La nueva versión de Firefox que está actualmente en beta está programada para admitir esto de forma nativa (al igual que XML)

— AvatarKava
fuente

0

Aquí hay una herramienta javasript que convertirá JSON a XML y viceversa, lo que debería mejorar su legibilidad. Luego puede crear una hoja de estilo para colorearla o hacer una transformación completa a HTML.

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

— Wayne Hartman
fuente

0

Su mejor opción será utilizar las herramientas de su lenguaje de fondo para esto. Qué idioma estás usando? Para Ruby, intente json_printer .

— rfunduk
fuente

-2

Primero tome la cadena JSON y haga objetos reales con ella. Recorre todas las propiedades del objeto, colocando los elementos en una lista desordenada. Cada vez que llegue a un nuevo objeto, haga una nueva lista.

— geowa4
fuente