Comprendiendo JSON: Guía básica

JSON (JavaScript Object Notation) es un formato de datos derivado de la notación de objetos de JavaScript. Pero es independiente del lenguaje, lo que significa que muchos lenguajes de programación, incluidos C++, Python, entre otros, pueden leer y generar datos en formato JSON.

Este formato es especialmente útil porque es fácil de entender tanto para humanos como para máquinas.

En la práctica, JSON se utiliza para representar datos como estructuras de objetos similares a los de JavaScript, lo que facilita su manipulación y acceso. Cuando se necesitan estos datos, simplemente se convierten de la estructura JSON a un objeto nativo del lenguaje en uso, como JavaScript.

Javascript tiene funciones integradas para convertir una cadena JSON a objetos Javascript con JSON.parse() y viceversa, convertir un objeto en una cadena JSON, con JSON.stringify(). Esto nos permite almacenar datos en formato de texto.

Reglas de sintaxis JSON

Los objetos están dentro de llaves y los arrays dentro de corchetes [].

Los datos JSON se escriben como pares de clave/valor.

Las claves deben estar entre comillas dobles y debe ser única en cada estructura de objeto.

Los valores pueden ser de tipo string, número, objeto, arreglo, booleano o null. Si es un string, también debe ir entre comillas dobles y si es un número no debe tener ceros a la izquierda. Pero no pueden ser de tipo función, fecha ni undefined.

Los caracteres especiales, como utilizar una comilla doble en un string, necesitan ser escapados utilizando el carácter de barra invertida \.

Los datos deben estar separados por comas, excepto el último.

El tipo de archivo para archivos JSON es .json y el tipo MIME para el texto JSON es "application/json".

JSON no admite comentarios, por lo que cualquier comentario en un archivo JSON causará un error.

{
    "name": "John Doe",
    "age": 30,
    "isStudent": true,
    "isEmployed": null,
    "hobbies": ["reading", "coding", "running"],
    "address": {
      "street": "123 Main St",
      "city": "Anytown",
      "state": "NY"
    }
  }

Dado que la sintaxis de los datos JSON derivan de los objetos de Javascript, al parsear un json, se puede trabajar fácilmente con los datos. Aunque no hay que cometer el error de creer que un JSON es un objeto, sino que es un formato de cadena y recién al convertirlo en una variable de Javascript es un objeto de Javascript.

Funciones y fechas en JSON

Un dato interesante es que JSON no permite funciones como valores. Pero de ser necesario, se escribe la función como string y luego se utiliza la función eval() para obtenerla nuevamente.

La función eval() en JavaScript es una función global que evalúa un string como código JavaScript y ejecuta las instrucciones que contiene ese string.

Aunque es una herramienta poderosa, su uso es ampliamente desaconsejado por varias razones, principalmente debido a cuestiones de seguridad, al poder verse afectado por un elemento malicioso que terminará siendo ejecutado; y de rendimiento, ralentizando la ejecución del programa, especialmente si se usa repetidamente."

Por otro lado, si estamos trabajando con un objeto de Javascript donde un valor es de tipo función y utilizamos JSON.stringify(), entonces se eliminará tanto la clave como el valor, por lo que se debería convertir la función en string (podemos usar toString()) antes de ejecutar JSON.stringify().

const jsonText = '{ "name": "John Doe", "age": "function() { return 30; }"';
  
const obj = JSON.parse(jsonText);

obj.age = eval('(' + obj.age + ')');

console.log(obj.age()); // 30

De la misma manera, JSON no admite fechas como tipo de dato. Si necesitamos trabajar este tipo, se escribe la fecha como string y luego creamos la nueva fecha.

Al trabajar con un objeto de Javascript donde tenemos un valor de tipo fecha y utilizamos JSON.stringify(), el valor se convertirá en un string con el valor de la fecha.

// De JSON a objeto de Javascript

const jsonText = '{ "name": "John Doe", "isEmployed": true, "employmentStartDate": "2024-05-22"}';
  
const obj = JSON.parse(jsonText, function (key, value) {
  if (key === 'employmentStartDate') {
    // Convertimos el valor del string de una fecha en un objeto Date de Javascript
    return new Date(value);
  } else {
    // Para todas las otras propiedades, devolvemos el valor sin modificar
    return value;
  }
});

// De objeto de Javascript a JSON

const person = {
  name: 'John Doe',
  isEmployed: true,
  update: new Date()
};

const myJSON = JSON.stringify(person);

console.log(myJSON);
// Resultado: {"name":"John Doe","isEmployed":true,"update":"2024-05-22T00:00:00.000Z"}

Almacenar datos

Al almacenar datos, es crucial que estos se encuentren en un formato específico. Una de las formas más universales y aceptadas para guardar información es en formato de texto. JSON facilita el almacenamiento de objetos de JavaScript en forma de texto. Esto no solo asegura la compatibilidad entre diferentes sistemas y plataformas, sino que también simplifica el proceso de intercambio y manipulación de datos en aplicaciones web y móviles.

Veamos un ejemplo de almacenamiento en el localStorage.

const person = {
    name: 'John Doe',
    age: 30,
    isStudent: true,
    isEmployed: null,
    hobbies: ['reading', 'coding', 'running'],
    address: {
      street: '123 Main St',
      city: 'Anytown',
      state: 'NY'
    }
  };

  const myJSON = JSON.stringify(person);

  localStorage.setItem('person', myJSON);
  
  // Ahora podemos buscar en el localStorage en el browser la key 'person' y ver el dato almacenado

Ahora recuperemos este dato desde el localStorage:

const jsonText = localStorage.getItem('person');
  const person = JSON.parse(jsonText);

  console.log(person);
  // Resultado: {name: "John Doe", age: 30, isStudent: true, isEmployed: null, hobbies: Array(3), …}

Utilizar JSON en nuestro HTML

Como hemos visto, los datos en formato JSON se pueden convertir a objetos de JavaScript. Esto nos permite utilizarlos para insertar HTML dinámicamente en una página web. Para obtener estos datos JSON, empleamos XMLHttpRequest, que facilita la realización de solicitudes al servidor permitiendo actualizar secciones específicas de la página sin necesidad de recargar completamente.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta viewport="width=device-width, initial-scale=1.0">
   <title>Obtener Usuarios</title>
</head>
<body>
   <h1>Lista de Usuarios</h1>
   <div id="demo"></div>

   <script>
       // Crear el objeto XMLHttpRequest
       const xmlhttp = new XMLHttpRequest();
       xmlhttp.onload = function() {
           // Procesar la respuesta
           const myObj = JSON.parse(this.responseText);
           let text = "<table>";
           for (let x in myObj) {
               text += "<tr><td>" + myObj[x].name + "</td></tr>";
           }
           text += "</table>";
           document.getElementById('demo').innerHTML = text;
       };

       // Configurar y enviar la petición GET
       xmlhttp.open("GET", "https://jsonplaceholder.typicode.com/users");
       xmlhttp.send();
   </script>
</body>
</html>

Errores en la sintaxis JSON

Los errores de sintaxis en archivos JSON son comunes, sobre todo cuando trabajamos con archivos extensos, y pueden causar que la lectura del archivo falle completamente. Un archivo JSON debe seguir una estructura muy específica: los objetos están encerrados en llaves , los arrays en corchetes [], y las cadenas, claves y valores numéricos están separados por comas. Además, todas las claves deben estar en comillas dobles. Un error tan simple como olvidar una coma, repetir una clave dentro de una misma estructura de objeto, usar comillas simples en lugar de comillas dobles, o añadir una coma extra al final del último elemento de un objeto o array, puede resultar en un error de sintaxis que impide que el archivo JSON sea parseado correctamente. Estos errores son críticos porque el formato JSON es estrictamente riguroso y no permite desviaciones en su estructura definida.

Para detectar y corregir rápidamente errores de sintaxis en archivos JSON, o simplemente para validar su estructura, es recomendable utilizar herramientas especializadas que faciliten este proceso. Herramientas en línea como JSONLint Validator and Formatter son muy útiles, ya que no solo validan el JSON conforme a los estándares de JavaScript, sino que también indican con precisión los errores por línea. Alternativamente, se pueden integrar bibliotecas como Another JSON Schema Validator (AJV) directamente en nuestros proyectos. AJV permite asegurar que los datos sean validados de manera inmediata y precisa en el momento de su recepción, lo cual agiliza el desarrollo y mejora la calidad del software.

Otra opción es validar de manera manual nuestro código de manera sencilla mediante el uso de try y catch en Javascript.

Cargar, leer contenido, editar y descargar un archivo .JSON en React

Vamos a cargar un archivo myJson.json de ejemplo:

{
    "name": "John Doe"
}

Cargar y leer el archivo:

Creamos un Input de tipo archivo, que en este caso solo aceptará archivos JSON con accept=".json" y usaremos el useState para manejar el estado del contenido del archivo.

Luego para leer el archivo creamos la función readFile. En esta función usamos el objeto FileReader que es una API proporcionada por JavaScript que permite a las aplicaciones web leer el contenido de archivos almacenados en el sistema del usuario de manera asíncrona. Uno de sus métodos, readAsText, se utiliza para leer el contenido de un archivo como una cadena de texto, especificando opcionalmente la codificación (como 'UTF-8'). Una vez que el contenido del archivo se ha leído exitosamente, se dispara el evento onload, el cual puede ser manejado mediante una función que procesa el resultado de la lectura (accesible a través de e.target.result). Este proceso permite cargar y manipular datos de archivos locales dentro de aplicaciones web sin necesidad de enviarlos a un servidor.

En el evento onload guardaremos el contenido del archivo en el state que definimos al principio.

import { useState } from 'react';

const JsonFile = () => {
 const [fileContent, setFileContent] = useState({ name: '', content: {} });

 const readFile = (event: React.ChangeEvent<HTMLInputElement>) => {
   const fileReader = new FileReader();
   const { files } = event.target;


   if (files && files.length > 0) {
     fileReader.readAsText(files[0], 'UTF-8');
     fileReader.onload = (e) => {
       const content = e?.target?.result as string;
       setFileContent({ name: files[0].name, content: JSON.parse(content) });
     };
   }
 };

// Resultado de readFile:
//  fileContent = {
//   name: myJson,
//    content: {
//    name: "John Doe"
//  }

 return (
   <div>
     <input id="dropzone-file" type="file" accept=".json" onChange={readFile} />
   </div>
 );
};

export default JsonFile;

Editar el contenido:

Teniendo el contenido disponible en el estado podemos editarlo como un objeto de Javascript, por ejemplo, agreguemos los hobbies de John Doe:

fileContent.content.hobbies = ["reading", "coding", "running"];
  
// Resultado:

// fileContent = {
//	name: myJson,
//	content: {
//	name: "John Doe",
//	hobbies: ["reading", "coding", "running"]
//}

Descargar el archivo JSON editado:

Agregamos un botón para descargar el archivo con la función downloadJson. En esta función tenemos:

➖ JSON.stringify(myJSON) con el que convertimos el objeto myJSON en una cadena JSON.

➖ Usamos encodeURIComponent para asegurar que la cadena JSON esté correctamente codificada para URL.

➖ El elemento de enlace temporario a crea dinámicamente un enlace con los atributos href y download. href contiene la dirección del archivo JSON y download especifica el nombre del archivo que se descargará.

➖ El evento click() simula un clic en el enlace para iniciar la descarga.

➖ El evento remove() elimina el enlace del documento después de iniciar la descarga para limpiar.

Al hacer clic en el botón, se debería iniciar la descarga del archivo myJSON.json que contiene el objeto JSON especificado.

const downloadJson = () => {
   // Editar el contenido del archivo JSON como necesitemos
   fileContent.content.hobbies = ["reading", "coding", "running"];
   // Convertir el objeto JSON a una cadena JSON
   const dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(fileContent.content));
   // Crear un elemento temporario de enlace
   const downloadAnchorNode = document.createElement('a');
   downloadAnchorNode.setAttribute('href', dataStr);
   downloadAnchorNode.setAttribute('download', 'myJSON.json');
   document.body.appendChild(downloadAnchorNode); // requerido para Firefox
   downloadAnchorNode.click();
   downloadAnchorNode.remove();
 };

Resumen

JSON es altamente valorado por su claridad y facilidad de manejo tanto para humanos como para máquinas, facilitando el intercambio de datos en la web y aplicaciones móviles. Las funcionalidades integradas en JavaScript, como JSON.parse() y JSON.stringify(), simplifican la conversión entre cadenas JSON y objetos JavaScript, permitiendo un almacenamiento eficaz en formato de texto.

Sin embargo, es crucial manejar correctamente la sintaxis de JSON, ya que errores menores pueden causar fallos en el parseo del archivo. Para evitar y corregir estos errores, herramientas como JSONLint Validator and Formatter o Another JSON Schema Validator (AJV), nos ayudan a validar la estructura del JSON contra los estándares de JavaScript.

Recursos

JS JSON - w3schools

JSON - MDN Web Docs

JSONLint Validator and Formatter

Another JSON Schema Validator (AJV)

Eval - MDN Web Docs

XMLHttpRequest - MDN Web Docs