Llevando stringify a otro nivel 🚀
La función prettyJson presenta una manera de mostrar código de manera agradable al ojo humano, todo listo para incrustar en un documento html.
Incluya la siguiente etiqueta script a su documento y llame al método prettyJson() incluyendo el objeto a parsear.
<script src="https://crystal-moon.github.io/prettyJson/js/prettyJson_v-0.2.0.min.js"></script>prettyJson(myObject [,config [,color]]);-
myObject
El objeto JSON a parsear. -
config |
opcional
Opcional. Un objeto de configuración cuyas propiedades afectaran al resultado visual. Para mas detalles sobre este parámetro consulte aquí. -
color |
opcional
Opcional. Un objeto que describirá los colores elegidos para cada parte del resultado. Para saber mas sobre este parámetro consulte aquí -
Retorno
Este método retornara un elemento<div>listo para ser insertado en el documento html.
prettyJson analiza cada propiedad del objeto y en base a su tipo de valor crea elementos <span> y <div> preparando un árbol DOM que representara de la mejor manera y a todo color su código.
Puede copiar y ejecutar el siguiente ejemplo, jugando con las propiedades de myobj, para probar distintas posibilidades.
<!DOCTYPE html>
<html>
<head></head>
<body>
<p id="myCode"></p>
<script src="https://crystal-moon.github.io/prettyJson/js/prettyJson_v-0.2.0.min.js"></script>
<script>
let myCode = document.querySelector('#myCode');
let myobj = {
propA:'Hello World',
propB: 1234,
propC: true
}
let prettyDiv = prettyJson(myobj);
myCode.appendChild(prettyDiv);
</script>
</body>
</html>El resultado sera:
Emmm... Bueno... hasta aqui nada nuevo, no? Se puede conseguir un resultado similar con JSON.stringify(), porque usar prettyJson()?
Al igual que stringify, prettyJson admite una función o matriz de valores que afectara al objeto resultante. 😊
prettyJson puede colocar el numero de linea en el margen izquerdo del código y customizar el tamaño de las tabulaciones para darle un aspecto mas 'code' 😉
El resultado de prettyJson no se limita a presentarse en etiquetas <pre> y/o <code> como otras librerías, puede ser incrustado en cualquiera que funcione como bloque, ya que cuenta con su propio conjunto de clases CSS para mantener el orden visual.
Use prettyJson para diseñar su documentación API. Personalize como se ven las respuestas HTTP/HTTPS para una eficaz guía de usuario 📗📙
Como es de común conocimiento, al usar stringify, los valores de tipo function,Symbol,NaN, entre otros, son convertidos a null. Pero prettyJson puede evitarlo y "prettyfiarlos" a todo color por usted!! 😳
Porque permitir el parseo de funciones no alcanzaba, prettyJson también puede convertir functions a arrow functions y viceversa 😱 Presente su código entendible para programadores de ayer, de hoy y de mañana!
El simple monospace ya no va... Elije tu propia fuente unica y diferente! 😬😬😬
(Por defecto prettyJson usa la fuente Ubuntu-Mono proporcionada por GoogleFonts ®)
Puedes elejir el color de cada tipo de valor, de operadores, hasta elejir el color de las palabras reservadas de Javascript. 🎨
Consulta todas estas opciones y mas en los detalles del parámetro config.
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 45+ | 22+ | 32+ | 12+ | 10.1+ |
🎠 Todo proyecto de mi autoría es de libre uso y mejora para quién desee hacerlo 
Hecho con amor por CrystalMoon ❤️