JSON en JavaScript sirve para muchísimas cosas. En los casos más comunes, al hacer peticiones AJAX viene bien codificar los datos como JSON antes de enviarlos.
Por otro lado, si tenemos a JavaScript del lado del servidor, igualmente podríamos decodificar los datos que un cliente mande; o codificarlos antes de hacer otra petición.
Otros usos, que si bien no son los mejores, son para comparar objetos en profundidad.
Hoy veremos cómo codificar y decodificar JSON en JavaScript sin usar eval ni librerías extras.
Requisitos y recomendaciones
Mira aquí cómo instalar Node.JS. Si quieres, puedes descargar los ejemplos aquí mostrados y ejecutarlos con node archivo.js
.
También recomiendo leer la diferencia entre var y let, para que sepas por qué usamos let.
Codificar objetos de JavaScript a JSON
De hecho, JSON significa JavaScript Object Notation, me parece. O sea que nace de JavaScript y su representación tan simple pero eficaz de representar todo tipo de objetos complejos.
En JavaScript podemos codificar todo tipo de datos; desde los primitivos hasta los arreglos u objetos. Para esto, llamamos a JSON.stringify y le pasamos la variable, así de simple. Aquí vemos algunos ejemplos:
/*
Demostrar codificación de JSON en JavaScript
@author parzibyte
*/
// Datos primitivos
let nombre = "Luis",
edad = 50,
mayorDeEdad = true;
console.log(JSON.stringify(nombre)); // "Luis"
console.log(JSON.stringify(edad)); // 50
console.log(JSON.stringify(mayorDeEdad)); // true
// Algo complejos
let libros = ["¿Sueñan los androides con ovejas eléctricas?", "El Jilguero", "El resplandor", "La rebelión de Atlas"];
console.log(JSON.stringify(libros));
//["¿Sueñan los androides con ovejas eléctricas?","El Jilguero","El resplandor","La rebelión de Atlas"]
let mascota = {
nombre: "Guayaba",
edad: 1,
amigos: [{
nombre: "Maggie",
edad: 2
}, {
nombre: "Bichi",
edad: 1
}]
};
console.log(JSON.stringify(mascota));
//{"nombre":"Guayaba","edad":1,"amigos":[{"nombre":"Maggie","edad":2},{"nombre":"Bichi","edad":1}]}
Se llama a console.log
para imprimir los resultados, pero recuerda que es para ejemplificar. De ahí bien se podría guardar el resultado en otra variable, así:
let codificado = JSON.stringify(valor)
Como se puede observar, la representación en JavaScript y en JSON no cambia casi en nada, únicamente en los espacios; ya que al codificarlo se eliminan los espacios y saltos de línea; de ahí sigue siendo lo mismo.
Decodificar JSON en JavaScript
Para decodificar una cadena o dato de JSON en JavaScript se llama a JSON.parse. Algunas veces se dice que igualmente se puede usar eval, pero no, porque es un riesgo de seguridad que trataré en otro post.
El punto es que se llama a JSON.parse, función que devolverá una variable cuyo tipo no sabemos, y depende de lo que la cadena en JSON represente.
Veamos algunos ejemplos:
/*
Decodificar JSON en JavaScript
@author parzibyte
*/
let mascotaComoJSON = '{"nombre":"Guayaba","edad":1,"amigos":[{"nombre":"Maggie","edad":2},{"nombre":"Bichi","edad":1}]}';
let mascota = JSON.parse(mascotaComoJSON);
// Ahora ya es un objeto, podemos acceder a él
console.log("Los amigos de mascota son: ", mascota.amigos);
//Los amigos de mascota son: [ { nombre: 'Maggie', edad: 2 }, { nombre: 'Bichi', edad: 1 } ]
// Lo mismo pasa con los arreglos
let librosComoJSON = '["¿Sueñan los androides con ovejas eléctricas?","El Jilguero","El resplandor","La rebelión de Atlas"]';
let libros = JSON.parse(librosComoJSON);
// Y ya podemos acceder al arreglo
console.log("Libro en la posición 1: ", libros[1]);
//Libro en la posición 1: El Jilguero
En el primer ejemplo, devuelve un objeto. En el segundo, un arreglo. No debemos preocuparnos, pues JavaScript se encarga de definir el tipo de dato de la variable. Ahí lo hicimos con objetos y arreglos, pero puede ser igualmente con primitivos.
Otros usos de JSON en JavaScript
Si codificamos a dos objetos como JSON, los podemos comparar como cadenas y ver si son iguales o no. Tal vez sea un poco lento, pero funciona.
Por cierto, aunque los ejemplos de aquí parezcan sencillos, en la vida real la mayoría de API’s que usan JSON se comunican de esta manera.
Ya vimos que con JavaScript podemos convertir a JSON cadenas, números, objetos, arreglos y más cosas.
Pingback: Fetch API en JavaScript: peticiones HTTP con promesas - Parzibyte's blog
Pingback: Node.Js + Express: ejemplo de creación de proyecto - Parzibyte's blog
Pingback: Aplicación web para tomar notas con JavaScript, Vue.js, Bootstrap y localStorage - Parzibyte's blog
Pingback: Generador de diagramas de clase UML con JavaScript - Parzibyte's blog
Pingback: Parsear o decodificar JSON con Java, JSONObject y JSONArray - Parzibyte's blog
Pingback: Codificar y decodificar JSON en PHP: todo lo que necesitas saber - Parzibyte's blog