Skip to content

Latest commit

 

History

History
104 lines (77 loc) · 4.91 KB

README.md

File metadata and controls

104 lines (77 loc) · 4.91 KB
Raw

PrettyJson

Llevando stringify a otro nivel 🚀

status readme version techs

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.

Instalación

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>

Sintaxis

prettyJson(myObject [,config [,color]]);

Parametros

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

Descripción

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.

Ejemplo simple

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:

prettyJsonSimple

Emmm... Bueno... hasta aqui nada nuevo, no? Se puede conseguir un resultado similar con JSON.stringify(), porque usar prettyJson()?

💣 Parametro "replacer"

Al igual que stringify, prettyJson admite una función o matriz de valores que afectara al objeto resultante. 😊

💣 Numero de linea y tabulaciones

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

💣 En cualquier etiqueta

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.

💣 Ideal API Rest

Use prettyJson para diseñar su documentación API. Personalize como se ven las respuestas HTTP/HTTPS para una eficaz guía de usuario 📗📙

💣 Valores no permitidos

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

💣 arrow functions

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!

💣 Fuente personalizable

El simple monospace ya no va... Elije tu propia fuente unica y diferente! 😬😬😬 (Por defecto prettyJson usa la fuente Ubuntu-Mono proporcionada por GoogleFonts ®)

💣 A todo color!!

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.

Compatibilidad con navegadores

chrome firefox opera Edge safari
45+ 22+ 32+ 12+ 10.1+

⚠️ prittyJson NO es compatible con Internet Explorer, ni lo será 💩💩

🎠 Todo proyecto de mi autoría es de libre uso y mejora para quién desee hacerlo :octocat:
Hecho con amor por CrystalMoon ❤️