javascript

Codificar y decodificar JSON con JavaScript

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.

Codificar y decodificar JSON en JavaScript y Node JS

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.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

1 semana hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.