Demo
El popular formato para el intercambio de datos JSON (JavaScript Object Notation) fue creado en un inicio para que funcione solo en JavaScript, pero muchos otros Lenguajes de Programación como Go, PHP, Python, Java, entre otros, utilizan este formato para compartir datos entre el cliente y el servidor, en JavaScript existen los métodos JSON.stringify y JSON.parse los cuales pueden ser utilizados en ciertas situaciones las cuales te compartiré en este Post.
Antes de continuar con este Post te invito a escuchar el Podcast: Si No Tienes Experiencia Para Un Puesto De Trabajo, Créala !
Sound Cloud:
Spotify:
Bien ahora continuemos con el Post: 5 situaciones en donde podemos usar JSON.stringify y JSON.parse
Las situaciones en donde podemos usar los métodos JSON.stringify y JSON.parse son muchas, esto varia según el proyecto que se este realizando, vamos a conocer un poco sobre estos 2 métodos:
JSON.stringify()
Este método convierte un objeto o valor en una cadena de texto JSON, opcionalmente reemplaza valores si se indica una función de reemplazo, o si se especifican las propiedades mediante un array de reemplazo.
JSON.parse()
Este método analiza una cadena de texto como JSON, transformando opcionalmente el valor producido por el análisis.
A continuación te presento 5 situaciones interesantes.
Almacenar y leer datos de localStorage o sessionStorage
Las propiedades localStorage y sessionStorage nos permiten guardar pares de clave – valor en un Navegador Web. La propiedad localStorage solo puede guardar Strings, por lo que si necesitamos almacenar objetos debemos de convertirlos a Strings usando el método JSON.stringify.
No podemos pedirle a localStorage que almacene un objeto directamente porque almacenará [object Object].
Asimismo debemos usar el método JSON.parse al obtener los datos de localStorage, veamos el siguiente ejemplo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const usuario = { nombres: "Pedro Antonio", apellidos: "Perez Torres", edad: 29 } // Almacenar en localStorage localStorage.setItem("datosUsuario", JSON.stringify(usuario)); // Obtener los datos desde localStorage const datosUsuario = JSON.parse(localStorage.getItem('datosUsuario')); console.log(datosUsuario); // Ver datos en la consola del Navegador Google Chrome |
Si hago un console.log(datosUsuario); obtendré los datos del usuario almacenado en localStorage.
Obtener datos de un servidor con XMLHttpRequest
El objeto XMLHttpRequest nos permite obtener datos de una API REST alojada en un servidor, los datos que obtenemos son Strings, para poder leerlos neesitamos pasarle el método JSON.parse, veamos el siguiente ejemplo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var request = new XMLHttpRequest(); request.open("GET", "json/postres.json"); // URL desde donde obtendré una listado de datos request.send(); request.onload = () => { if (request.status === 200) { const postres = JSON.parse(request.response); console.log(postres); // Ver datos en la consola del Navegador Google Chrome } else { console.log('error ${request.status} ${request.statusText}'); } } |
Si ejecuto console.log(postres); obtendré los datos desde la ruta o URL que he especificado.
JSON.stringify al cuerpo de una solicitud POST
Cuando enviamos una solicitud al servidor utilizando el método POST, en algunas ocasiones necesitamos pasarle el método JSON.stringify, como en el siguiente ejemplo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
(async () => { const respuesta = await fetch('json/postres.json', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ title: 'Solicitud al servidor con el método POST' }) }); const contenido = await respuesta.json(); console.log(contenido); // Ver datos en la consola del Navegador Google Chrome })(); |
Si ejecuto console.log(contenido); en la consola del Navegador Google Chrome, obtendré una lista de datos desde la ruta o URL especifica, haciendo uso del método POST.
Copiado profundo de un Objeto JavaScript
A veces copiar objetos en JavaScript puede ser complicado, existen diferentes maneras de realizar una copia superficial, que es el comportamiento predeterminado en la mayoría de los casos. Pero puede ser mucho más difícil hacer una copia profundo de un objeto.
Haciendo uso del método JSON.stringify podemos crear una copia profunda de un objeto en JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const postre = { nombre: "Torta de Chocolate", precio: 3.50, stock: 43 } const copiarPostre = JSON.parse(JSON.stringify(postre)); postre.nombre = "Torta de Chocolate"; console.log(postre); console.log(copiarPostre); |
Si ejecuto console.log(postre); y console.log(copiarPostre); en la consola de Google Chrome obtendré los valores de la variable postres y una copia de la variable postres. Con solo indicar el nombre del postre se crea una copia con todos los valores correspondientes.
Convertir cualquier tipo de Datos en un String
Con el método JSON.stringify podemos convertir cualquier tipo de datos en un String, a continuación varios tipos de datos que se convierten a String:
|
1 2 3 4 5 6 7 8 9 |
JSON.stringify(20); // Lo convierte a String: "20" JSON.stringify(true); // Lo convierte a String: "true" JSON.stringify(null); // Lo convierte a String: "null" JSON.stringify(undefined); // Lo convierte a String: "undefined" JSON.stringify(NaN); // Lo convierte a String: "null" JSON.stringify([42, 32, 14, 65, 96]); // Lo convierte a String: "[42, 32, 14, 65, 96]" JSON.stringify({nombres: "Carlos Tomas", apellidos: "Paredes Blanco" }); // Lo convierte a String: "{"nombres":"Carlos Tomas", "apellidos":"Paredes Blanco"}" |
Cuando se desarrolla una aplicación con JavaScript en algunas ocasiones es necesario serializar los datos en Strings para almacenarlos en una Base de Datos o para enviarlos a una API REST. Los datos tienen que esas en formato de Strings.
Te invito a leer los artículos Que es API REST + Mejores Prácticas y Tipos de Datos que podemos usar en JSON, para que estés más familiarizado con esta tecnología.
Conclusión
Si eres sabio le puedes sacar provecho a los métodos JSON.stringify y JSON.parse, los cuales pueden ser muy útiles cuando el código de una aplicación se presta para su uso.
Nota(s)
- Los métodos y pasos mencionados en este este Post, pueden quedar descontinuados, continuar o ser modificadas, esto no dependen de mí si no de los Desarrolladores que dan soporte a JavaScript.
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenido.