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

Respuestas:

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.

  1. Envuelva su JSON formateado en bloques de código y dele la clase "prettyprint".
  2. Incluya prettify.js en su página.
  3. 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
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
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

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