tabla - Mostrar JSON como HTML
mostrar json en html (12)
¿Alguna recomendación sobre cómo incrustar JSON en una página HTML con el JSON formateado en un estilo legible para los humanos? Por ejemplo, cuando ve XML en un navegador, la mayoría de los navegadores muestran el formato XML (indentados, 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
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 estilos 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
Aquí hay una solución ligera, haciendo solo lo que OP pidió, incluyendo resaltado pero nada más: ¿Cómo puedo imprimir bastante JSON usando JavaScript?
Creo que quisiste decir algo como esto: visualización JSON
No sé si podrías usarlo, pero podrías preguntarle al autor.
Para el resaltado de sintaxis, use el código de embellecer . Creo que esto es lo que usa para resaltar el código.
- Envuelve tu JSON formateado en bloques de código y dales la clase "prettyprint".
- Incluye prettify.js en tu página.
- Asegúrese de que la etiqueta del cuerpo de su documento invoca
prettyPrint()cuando se carga
Tendrá la sintaxis resaltada JSON en el formato que ha establecido en su página. Vea aquí para un ejemplo . Entonces, si tuvieras 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 abordar eso.
Podría usar JSON2HTML para transformarlo en una lista HTML con buen formato ... puede ser un poco más poderoso de lo que realmente necesita
Primero toma la cadena JSON y crea objetos reales a partir de ella. Bucle a través de todas las propiedades del objeto, colocando los elementos en una lista desordenada. Cada vez que llegas a un objeto nuevo, crea una nueva lista.
Puede usar la función JSON.stringify con JSON sin formato. Lo muestra de forma formateada.
JSON.stringify({ foo: "sample", bar: "sample" }, null, 4)
Esto gira
{ "foo": "sample", "bar": "sample" }
dentro
{
"foo": "sample",
"bar": "sample"
}
Ahora que los datos son legibles, puede usar el script Prettify de Google Code tal como lo sugiere @A. Levy para codificar el color.
Vale la pena agregar que los navegadores IE7 y anteriores no son compatibles con el método JSON.stringify .
Si lo muestra deliberadamente para el usuario final, ajuste el texto JSON en etiquetas <PRE> y <CODE> , 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 .
Si solo desea 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 se encuentra actualmente en versión beta está diseñada para admitir de forma nativa esto (al igual que XML)
Su mejor opción será usar las herramientas de su lenguaje de back-end para esto. Qué idioma estás usando? Para Ruby, prueba json_printer .
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, echa un vistazo a la página de demo .