JavaScript: Fundamentos de JSON

JSON (JavaScript Object Notation) es un formato ligero de intercambio de datos basado en un subconjunto de la especificación de JavaScript, y es ampliamente utilizado debido a su simplicidad y a su ligereza, ya que comparado con XML, genera archivos de intercambio de datos menos pesados, al no contener etiquetas. Este estándar es ampliamente utilizado en aplicaciones web para conexiones asíncronas con el servidor en busca de datos mediante AJAX. Entre muchos otros usos, claro.

Existen dos estructuras básicas que conforman las estructuras de datos que se pasan a través de JSON:

  • Las listas ordenadas de valores,
  • Las colecciones de pares nombre-valor, más conocidas como estructuras o objetos.

Combinando estos dos tipos básicos de estructuras podemos representar cualquier dato o colección de datos que se nos ocurra, independientemente de su complejidad. En este post veremos los fundamentos de JSON en JavaScript y cómo tratar con estructuras de datos de este tipo.

Una de las ventajas de JavaScript es la de poder asignar a una variable una lista o array, simplemente asignando a la variable diferentes elementos separados por coma y rodeados por corchetes:
var colores = ["rojo", "azul", "verde", "amarillo"];

El siguiente comando nos dirá la longitud o número de elementos del array, que será de 4, mientras que el segundo nos dirá cuál es el primer elemento (empezando siempre por 0), es decir, «rojo»:

alert(colores.length);
alert(colores[0]);

También es posible asignar a una variable JavaScript tipos de datos complejos, formados por elementos de tipo par clave-valor separados entre sí por dos puntos, y entre otro par clave-valor por coma, y rodeados por llaves, como por ejemplo:

var coche = {"marca":"Seat" , "modelo":"Ibiza" , "acabado" : "Sport"};

Ahora es posible acceder al valor de cualquier clave recorriendo la jerarquía de datos mediante los puntos, de manera que la siguiente línea

alert(coche.modelo);

nos mostraría el mensaje «Ibiza». Compliquemos más el ejemplo, utilizando dos estructuras u objetos de tipo coche añadidos a una lista:

var coches = [
    {"marca":"Seat" , "modelo":"Ibiza" , "acabado" : "Sport"} ,
    {"marca":"Renault" , "modelo":"Megane" , "acabado" : "Coupé"}
]

Si acto seguido escribimos la sentencia JavaScript siguiente:

alert(coches[1].modelo);

el navegador nos mostrará un diálogo con el texto «Megane», correspondiente al atributo modelo del segundo elemento de la lista de coches.

Si nos fijamos en el ejemplo, vemos que de fuera a adentro tenemos una lista […] con dos objetos {…} separados por coma, y que cada uno de los objetos contiene los atributos marca, modelo y acabado.

Ahora que sabemos cómo se estructura JSON, probemos con unos datos un pelín más complejos:

var directores = [{"nombre":"Ridley Scott", "pais":"EEUU", "peliculas":[{"titulo":"Blade Runner","ano":1982},{"titulo":"Black Hawk Down", "ano":2001}]},{"nombre":"John Carpenter", "pais":"EEUU", "peliculas":[{"titulo":"Estan Vivos", "ano":1988},{"titulo":"Rescate en Nueva York", "ano":1981}]}];

Esta estructura ya es más complicada. Ahora, si queremos mostrar un diálogo con el título de la segunda película del primer director, escribiríamos algo así como:

alert(directores[0].peliculas[1].titulo);

Y a grandes rasgos, ésto es lo que ofrece JSON. La ventaja es que es muy sencillo formatear datos hacia un archivo JSON ya que existen adaptadores o parseadores para multitud de lenguajes de programación, que podréis encontrar en la página oficial de JSON.

En una próxima entrada hablaré de la comunicación asíncrona (AJAX) y de cómo aprovechar la simplicidad de JSON para recuperar datos de un servidor.

Únete a la conversación

6 comentarios

  1. Si tenemos una variable JavaScript de la forma JSON y queremos hacer un alert, por ejemplo, para ver qué contiene, una forma muy sencilla y rápida sería así:

    alert(JSON.stringify(obj));

    1. :)…De casualidad lei tu comentario y me sirvio bastante este alert, estoy trabajando con JavaScript y Json, y siempre batallo para ver que tienen los objetos, tengo que usar el firebug, pero ya con esto resolviste mis problemas jejeje.

Dejar un comentario

Responder a Jisela Contreras Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: