Seleccionar página

jsonAunque normalmente el método JSON.stringify() hace el trabajo que necesitamos, podemos encontrarnos algunos casos donde la transformación de los objetos en cadenas con formato JSON que realiza este método no se ajuste a nuestras necesidades. Podemos desarrollar nuestra propia función para construir la cadena JSON, pero muy probablemente tendremos que rehacer un trabajo bastante complejo que JSON.stringify() hace eficientemente. Podemos hacer algo más interesante: modificar o implementando el método toJSON() en los objetos que queremos personalizar.

Date.prototype.toJSON

Los objetos de tipo Date disponen de un método toJSON() que establece de que forma codificará JSON.stringify() los objetos de este tipo. Si lo necesitamos podemos reescribir este método y personalizar la generación de las cadenas JSON para los objetos tipo Date.

Por ejemplo, si queremos incluir solo la fecha, eliminado la parte correspondiente a la hora, en los mensajes JSON, sólo tenemos que reescribir el método toJSON() de la siguiente forma:

Aviso: modificar un objeto predefinido de Javascript no es muy buena idea, ya que afecta a todas las librerías y programas que utilicemos a partir de este momento. Se incluye aquí sólo para explicar lo que se puede hacer, pero no recomendamos su utilización.

Date.prototype.toJSON = function () {
    return    this.getUTCFullYear() 
            + '-' 
            + ('0' + (this.getUTCMonth() + 1)).substr(-2) 
            + '-' 
            + ('0' + this.getUTCDate()).substr(-2);
}

A partir de este momento, todas los objetos tipo Date serán convertidos por JSON.stringify() sólo con la fecha, por ejemplo:

var biblioteca = {
    autores: [
        {    nombre: 'Miguel de Cervantes',
            nacimiento: new Date(1547, 8, 29),
            lugar: 'Alcalá de Henares, Madrid, España'
        },
        {    nombre: 'William Shakespeare',
            bautizo: new Date(1564, 3, 26),
            lugar: 'Stratford-upon-Avon, Warwickshire, Reino Unido'
        }
    ]
}
console.log(JSON.stringify(biblioteca));

Devuelve:

{"autores":[{"nombre":"Miguel de Cervantes","nacimiento":"1547-09-28","lugar":"Alcalá de Henares, Madrid, España"},{"nombre":"William Shakespeare","bautizo":"1564-04-25","lugar":"Stratford-upon-Avon, Warwickshire, Reino Unido"}]}

en vez del formato por defecto que es:

{"autores":[{"nombre":"Miguel de Cervantes","nacimiento":"1547-09-28T22:00:00.000Z","lugar":"Alcalá de Henares, Madrid, España"},{"nombre":"William Shakespeare","bautizo":"1564-04-25T22:00:00.000Z","lugar":"Stratford-upon-Avon, Warwickshire, Reino Unido"}]}

Añadir el método toJSON a nuestros objetos

De forma similar podemos crear nuestros propios métodos toJSON() para personalizar la forma en la que JSON.stringify() codificará nuestros objetos. Basta con añadir un método con el nombre toJSON para tengamos el nivel de personalización que deseemos.

Por ejemplo, en este caso vamos a crear un objeto que queremos enviar todo como una sola cadena y no con cada una de las propiedades (no es un ejemplo muy práctico, pero nos sirve para mostrar como funciona).

Primero veamos como quedaría con el comportamiento por defecto:

function Persona(nombre, apellido1, apellido2) {
    this.nombre = nombre || null;
    this.apellido1 = apellido1 || null;
    this.apellido2 = apellido2 || null;
}
var cervantes = new Persona('Miguel', 'de Cervantes', 'Saavedra');
console.log(JSON.stringify(cervantes)); // {"nombre":"Miguel","apellido1":"de Cervantes","apellido2":"Saavedra"}

Ahora añadimos el método toJSON() y personalizados la salida:

function Persona(nombre, apellido1, apellido2) {
    this.nombre = nombre || null;
    this.apellido1 = apellido1 || null;
    this.apellido2 = apellido2 || null;
    this.toJSON = function() {
        return '"nombre":"' + this.nombre + ' ' + this.apellido1 + ' ' + this.apellido2 + '"';
    }
}
var cervantes = new Persona('Miguel', 'de Cervantes', 'Saavedra');
console.log(JSON.stringify(cervantes)); // {"nombre":"Miguel de Cervantes Saavedra"}

Conclusión

La implementación personalizada del método toJSON() nos permitirá configurar el funcionamiento JSON.stringify() y de esta forma gestionar la serialización de nuestros objetos de forma precisa y sencilla.

Novedades

Observables en Javascript con Proxies

Observables en Javascript con Proxies

En esta charla, organizada por MadridJS, Pablo Almunia nos habla de la observación reactiva de objetos en Javascript por medio de Proxy. Se describe paso a paso cómo funcionan los Proxies y en que casos pueden ser nuestro mejor aliado. Veremos que no hay que tenerles miedo, son bastante sencillos de utilizar, y nos ofrecen una gran abanico de posibilidades.

Aplicaciones JAMStack, SEO friendly y escalables con NextJS

Aplicaciones JAMStack, SEO friendly y escalables con NextJS

En esta charla de Madrid JS, Rafael Ventura nos describe las funcionalidades clave de NextJS, nos muestra en vivo cómo desarrollar una completa aplicación JAMStack con Server Side Rendering (SSR) y Static Site Generation (SSG) y termina mostrando como publicar esta aplicación en Vercel.

Stencil JS: mejora el Time To Market de tu producto, por Rubén Aguilera

Stencil JS: mejora el Time To Market de tu producto, por Rubén Aguilera

En esta charla Rubén Aguilera nos cuenta los problemas que tienen muchas empresas a la hora de sacar productos accesibles, vistosos y usables en el Time To Market que requiere Negocio y cómo podemos minimizar este tiempo gracias al DevUI con StencilJS para adecuar una aplicación de Angular a las exigencias del mercado en tiempo record.

Svelte JS: por qué dedicarle tiempo, por Jesús Cuesta

Svelte JS: por qué dedicarle tiempo, por Jesús Cuesta

Jesús Cuesta cuenta qué es Svelte, para qué sirve, cómo compite contra aplicaciones construidas con React o Vuejs, si sirve para desarrollar web components, si la curva de aprendizaje es muy alta, y sobre todo si está suficiente maduro para utilizarlo. Si quieres conocer Svelte no puedes perderte esta introducción.