JSON

Cuando trabajamos con mucha cantidad de información, se puede volver necesario aislar el código de programación de los datos. De esta forma, podemos guardar información en un fichero independiente, separado del archivo donde tenemos el código de nuestro programa. Así, si necesitamos actualizar o modificar datos, no tenemos que tocar el código de nuestro programa.

¿Qué es JSON?

JSON son las siglas de JavaScript Object Notation, y no es más que un formato ligero de datos, con una estructura (notación) específica, que es totalmente compatible de forma nativa con Javascript. Como su propio nombre indica, JSON se basa en la sintaxis que tiene Javascript para crear objetos.

Un archivo JSON mínimo debe tener la siguiente sintaxis:

{
}

Esto simplemente es un objeto vacío. Un archivo JSON, puede contener varios tipos de datos:

{
  "name": "Manz",
  "life": 99,
  "dead": false,
  "props": ["invisibility", "coding", "happymood"],
  "senses": {
    "vision": 50,
    "audition": 75,
    "taste": 40,
    "smell": 50,
    "touch": 80
  }
}

Como se puede ver, en JSON todos los textos deben estar entrecomillados con «comillas dobles», y solo se pueden utilizar tipos de datos como String, Number, Object, Array, Boolean o null. Un valor null, simplemente, también sería un JSON válido.

OJO: JSON no permite utilizar tipos de datos como Function, RegExp, Date o valores undefined. Tampoco es válido incluir comentarios en un JSON.

Mucho cuidado con las comillas mal cerradas o las comas sobrantes (antes de un cierre de llaves, por ejemplo). Suelen ser motivos de error de sintaxis frecuentemente. Si tienes dudas sobre si la sintaxis del JSON que has construído es correcta, puedes utilizar JSONLint, una página que te permitirá pegar el código JSON y validarlo para saber si es correcto. También nos puede servir para indentar correctamente el JSON.

¿Cómo utilizar JSON?

Si analizamos bien la sintaxis de un JSON, nos daremos cuenta que es muy similar a algo a lo que ya deberíamos estar acostumbrados:

var o = {
  "name": "Manz",
  "life": 99
}

Simplemente añadiendo var o = al principio, nos daremos cuenta (si no era evidente ya) de que se trata de un objeto de Javascript y que no debería ser muy sencillo pasar de JSON a Javascript y viceversa.

En Javascript tenemos una serie de métodos que nos facilitan esa tarea, pudiendo trabajar con String que contengan JSON y objetos Javascript de forma indiferente:

Método Descripción
Object JSON.parse(str) Convierte el texto str (un JSON válido) a un objeto y lo devuelve.
String JSON.stringify(obj) Convierte un objeto Javascript obj a su representación JSON y la devuelve.

Convertir JSON a Objeto

La acción de convertir JSON a objeto Javascript se le suele denominar parsear. Es una acción que analiza un String que contiene un JSON válido y devuelve un objeto Javascript con dicha información correctamente estructurada. Para ello, utilizaremos el método JSON.parse():

var str = '{ "name": "Manz", "life": 99 }';

var obj = JSON.parse(str);

obj.name;   // 'Manz'
obj.life;   // 99

Como se puede ver, obj es un objeto generado a partir del JSON recogido en la variable str y podemos consultar sus propiedades y trabajar con ellas sin problemas.

Convertir Objeto a JSON

La acción inversa, convertir un objeto Javascript a JSON también se puede realizar facilmente haciendo uso del método JSON.stringify(). Este método dificil de pronunciar viene a ser algo así como «convertir a texto», y lo podemos utilizar para transformar un objeto de Javascript a JSON rápidamente:

var obj = {
  name: 'Manz',
  life: 99,
  saludar: function() {
    return "Hola!";
  }
}

var str = JSON.stringify(obj);

str;        // '{"name":"Manz","life":99}'

Observa que, como habíamos dicho, las funciones no están soportadas por JSON, por lo que si intentamos convertir un objeto que contiene métodos o funciones, JSON.stringify() no fallará, pero simplemente devolverá un String omitiendo las propiedades que contengan funciones.

Leyendo JSON externo

Teniendo en cuenta todo lo visto hasta ahora, JSON es un formato ideal para guardar en pequeños archivos de texto que se puedan leer desde Javascript, pasar a objetos y trabajar con ellos. Para hacer esto, existen varias estrategias. La más común es utilizar AJAX para leer este tipo de datos, pero eso lo veremos más adelante.

Utilidades interesantes de JSON

Existen varios recursos interesantes para trabajar con JSON y que pueden sernos de utilidad como programadores. Cito varios de ellos a continuación:

Nombre Descripción GitHub
JSONLint Validador JSON. Comprueba sintaxis e indica errores. -
JSONLint Validador JSON. También disponible versión de terminal (CLI). @zaach/jsonlint
prettyjson Lector de JSON para terminal (CLI) con resaltado en colores. @rafeca/prettyjson
JSONEditor Editor JSON visual y online. @josdejong/jsoneditor
JSONSelect Selector de datos JSON al estilo CSS. Experimental. @lloyd/JSONSelect
Manz
Publicado por Manz

Docente, divulgador informático y freelance. Escribe en Emezeta.com, es profesor en la Oficina de Software Libre de la Universidad de La Laguna y dirige el curso de Programación web FullStack de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.