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.
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.
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.
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.
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.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.
Ver comentarios