Dominando los JSON con JSON.stringify()

El uso de APIs es muy frecuente en el desarrollo de sitios web. El recurso más popular para transmitir esta información es JavaScript Object Notation, conocido como JSON. En este artículo, te explicamos cómo usar sus características.

El JavaScript Object Notation (Notación de Objeto JavaScript), mayormente conocido como JSON, es un formato ligero, y completamente libre, de almacenamiento y transmisión de información. Si bien sus orígenes se remontan a los años 2000, no es hasta 2013 donde es estandarizado, y se convierte en un excelente reemplazo para las respuestas XML en peticiones asíncronas.

Debido a su popularidad, es necesario saber cómo operar con un JSON cuando se trabaja consumiendo una API desde un sitio web, para verificar que la misma funcione correctamente. Una de las funciones que nos facilita esta tarea en JavaScript, es el método JSON.stringify().

El método JSON.stringify()

JSON.stringify()convierte un objeto o valor de JavaScript en una cadena de texto JSON, lo que lo hace más legible al ojo humano. Además, al ser una función, JSON.stringify() tiene otras características que alcanzamos a través de los parámetros.

El segundo parámetro, como array

JSON.stringify() nos permite colocar un segundo parámetro, el cual permite retornar directamente un índice del JSON. Tomemos como ejemplo el siguiente JSON:

const usuario = {
  id: 47,
  nombre: 'Sebastián Freitez',
  edad: 26,
  cargo: 'Desarrollador',
  altura: '1.85m',
  peso: '90kg',
  color_cabello: 'cafe',
  color_ojos: 'cafe',
  departamento: 'Desarrollo',
  habilidades: ['PHP', 'JS', 'HTML', 'CSS', 'MYSQL']
};

Para obtener un índice específico del JSON, escribimos la función de la siguiente manera:

const usuario = {
  id: 47,
  nombre: 'Sebastián Freitez',
  edad: 26,
  cargo: 'Desarrollador',
  altura: '1.85m',
  peso: '90kg',
  color_cabello: 'cafe',
  color_ojos: 'cafe',
  departamento: 'Desarrollo',
  habilidades: ['PHP', 'JS', 'HTML', 'CSS', 'MYSQL']
};

console.log(JSON.stringify(usuario, ['nombre']));

//Resultado: {'nombre': 'Sebastián Freitez'}

El segundo parámetro, como function()

El segundo parámetro también puede ser pasado como una función, permitiendo así procesar cada uno de los índices del JSON, y retornando una respuesta de acuerdo a la función. Reutilizamos el JSON usuario, y le aplicaremos una función que retorne los índices cuyo valor no sean string:

const usuario = {
  id: 47,
  nombre: 'Sebastián Freitez',
  edad: 26,
  cargo: 'Desarrollador',
  departamento: 'Desarrollo',
  misc: [007, 'jb']
}

console.log(JSON.stringify(usuario, (indice, valor) => {
  if(typeof valor === 'string') {
    return undefined;
  }
  return valor;
}));

//Resultado: {'id':47, 'edad':26, 'misc':[7,null]}

Como podemos ver, JSON.stringify() incluso evalúa los valores que se encuentran dentro de un array en nuestro JSON, aplicando la regla de la función y retornando los valores que son diferentes de un string.

El tercer argumento, como int

El tercer argumento en JSON.stringify(), controla el espaciado en el string que se genera por la función. Al utilizar un int, como tercer argumento, cada nivel de la stringificación se identará con con la cantidad de caracteres que represente el número.

const usuario = {
  id: 47,
  nombre: 'Sebastián Freitez',
  edad: 26,
  cargo: 'Desarrollador',
}

console.log(JSON.stringify(usuario, null, 2));

//Resultado: 
//{
//  "id": 47,
//  "nombre": "Sebastián Freitez",
//  "edad": 26,
//  "cargo": "Desarrollador"
//}

El tercer argumento, como string

En caso de que el tercer argumento fuese un string, reemplazará los espacios por el string que hayas asignado en la función:

const usuario = {
  id: 47,
  nombre: 'Sebastián Freitez',
  edad: 26,
  cargo: 'Desarrollador'
}

console.log(JSON.stringify(usuario, null,'--'));

//Resultado: 
//{
//--"id": 47,
//--"nombre": "Sebastián Freitez",
//--"edad": 26,
//--"cargo": "Desarrollador"
//}

El método toJson

El método toJson puede ser parte de cada objeto, como una propiedad, y JSON.stringify() retorna el resultado de esta función, stringificándolo, en vez de convertir todo el objeto en un string:

const usuario = {
  id: 47,
  nombre: 'Sebastián',
  apellido: 'Freitez',
  toJSON(){
    return {
      nombreCompleto: this.nombre + ' ' + this.apellido
    }
  }
}

console.log(JSON.stringify(usuario));

//Resultado: {"nombreCompleto":"Sebastián Freitez"}

Conquistando los JSON en Javascript

Hoy en día, con tantas empresas volcando sus esperanzas en Javascript, es importante dominar el formato . En pos de eso, aprender a utilizar el método JSON a la hora de desarrollar/consumir una JSON.stringify() resultará en una gran ventaja para los desarrolladores que tengan a Javascript y sus derivados como framework.

Originally published at https://blog.ida.cl on September 10, 2020.