json-to-div

Una función simple para renderizar un objeto JSON dentro de un elemento HTML de forma expandible y personalizar fácilmente los estilos usando variables CSS.

Demo

Características

• Visualización estructurada de JSON
• Expandir y contraer objetos y arrays
• Personalización mediante variables CSS
• Fácil de integrar en cualquier proyecto

Instalación

npm install json-to-div

O puedes importarlo directamente en tu proyecto.

@import "https://unpkg.com/json-to-div/json-to-div.css";

import {jsonToDiv} from "https://unpkg.com/json-to-div/json-to-div.js";

Uso

La función principal es:

/**
 * Crea la vista del JSON dentro de un elemento HTML
 * @param {HTMLElement} div Elemento que renderiza el json
 * @param {Object} json Objeto que se mostrará
 */
function json-to-div(div, json)

Ejemplo básico

<div id="json"></div>

import { jsonToDiv } from "json-to-div/json-to-div.js";
const data = {
  nombre: "Juan",
  edad: 30,
  activo: true,
  direccion: {
    ciudad: "Madrid",
    cp: 28001
  }
};

const contenedor = document.getElementById("json");

jsonToDiv(contenedor, data);

@import "json-to-div/json-to-div.css";

Esto generará una vista interactiva del JSON, permitiendo expandir o contraer objetos y arrays.

Personalización de estilos

Puedes personalizar la apariencia fácilmente usando variables CSS.

Solo necesitas definir una clase con las variables:

.variables-json{
    --jv-color-mas: blue;
    --jv-color-menos: blue;
    --jv-simbolo-expandir: "[+] ";
    --jv-simbolo-contraer: "[-] ";

    --jv-color-string: black;
    --jv-color-val-null: blue;
    --jv-color-val-cadena: green;
    --jv-color-val-numero: blue;
    
    --jv-simbolo-array: "[...]";
    --jv-simbolo-array-exp: "[";
    --jv-simbolo-array-cerrar: "]";
    --jv-simbolo-obj: "{...}";
    --jv-simbolo-obj-exp: "{";
    --jv-simbolo-obj-cerrar: "}";
    --jv-color-no-expandir: black;
    --jv-color-expandir: black;

    --jv-font-family: monospace;
    --jv-font-size: 12px;
    
    --jv-linea-tipo: dotted;
    --jv-linea-size: 1px;
    --jv-linea-color: black; 
}

Aplicar los estilos

Solo añade la clase al contenedor:

<div id="json" class="variables-json"></div>

Esto te permite Personalizar:

• Colores del JSON
• El tipo de Font y tamaño
• Símbolos de expansión

EJEMPLO

Ejemplo completo

<style>
    @import "https://unpkg.com/json-to-div/json-to-div.css";
</style>

<div id="json" class="variables-json"></div>

<script>
import { jsonToDiv } from "https://unpkg.com/json-to-div/json-to-div.js";
const json = {
  usuario: "Carlos",
  edad: 25,
  lenguajes: ["JavaScript", "Python", "Go"],
  activo: true
};

const contenedor = document.getElementById("json");

jsonToDiv(contenedor, json);
</script>