Javascript

Introducción a JSON – Parte I

JavaScript Object NotationBreve introducción a esta Tecnología de intercambio de Datos. En esta ocasion quiero escribir unas breves notas acerca de JSON, aunque ya hay mucha teoria por la red con respecto a este tema he decidido dar mi pequeño aporte, ‘mi teoria’. Siempre habia querido saber para que diantres se usa esto del JSON, pero siempre por desidia o pereza no me decidía a investigar, antier me desidi y aquí están los resultados que quiero compartir.

Como dijo Jack El Destripador, vayamos por partes…

¿Que es JSON?

Primero que todo empecemos por definir que es JSON. JSON es la abreviatura/acrónimo de JavaScript Object Notation, como puedes ver en su definicion literal JSON utiliza el código JavaScript como modelo de datos. JSON es una forma de enviar/recibir, vaya intercambiar datos, por lo general entre un cliente y un servidor. XML nacio primero y es otra manera de hacerlo, JSON aparecio despues como otra alternativa a este sistema de envío y recepción de datos.

Pero, ¿Porque utilizar un sistema de intercambio de Datos?. JSON se emplea habitualmente en entornos donde la cantidad de datos que fluyen entre cliente y servidor es de vital importancia. Segun he leido Google y Yahoo lo utilizan a diestra y siniestra en muchos de sus servicios, como los de mensajeria que ya conocemos, Gmail y Yahoo Mail y tambien lo utilizan las redes sociales twitter y facebook.

Obviamente, si intentas utilizar JSON en un entorno donde el flujo de datos es pequeño no notaras la diferencia ¿Ya te imaginas porque esos grandes sitios web lo utilizan?. Tienen millones de usuarios y el tema de intercambio de datos entre sus servidores y los navegadores de los usuarios es criticoo.

La lista de lenguajes que soportan JSON incluye ActionScript, C, C++, C#, ColdFusion, Common Lisp, Delphi, E, Eiffel, Java, JavaScript, ML, Objective-C, Objective CAML, Perl, PHP, Python, Rebol, Ruby, Lua y Visual FoxPro.

En esta serie de ejemplos de JSON solo veremos un poco de JSON con Javascript y PHP, pues necesitaria toda una vida para explicar como se usa en todos los lenguajes mencionados.

Notacion y ejemplos JSON

Voi a dar por hecho que si estas leyendo este tema es porque ya tienes los fundamentos basicos de Javascript. Para empezar vamos repasar un poco sobre como se definen los arrays y objetos literales en JavaScript. Los temas que veremos a continuacion son:

  • Los arreglos literales
  • Los objetos literales
  • Los objetos JSON

Veremos estos temas debido a que utilizaremos esos fundamentos para desarrollar el tema de los Objetos JSON. OJO!: Aqui en el blog solo mostrare el codigo JavaScript, pero si quieres ver el codigo funcionando te dejo un link para que lo pruebes ejecutandose en un documento HTML de mi sitio web. Si entras a ver el ejemplo, recuerda que dependiendo del navegador que uses, por lo general puedes ver el codigo fuente de una pagina web dando click derecho con el raton y elegir la opcion Ver codigo fuente.

Los arreglos literales

La notacion literal es una forma de declaracion de arreglos que se introdujo a partir de JavaScript 1.2. Los arrays literales se definen con la siguiente sintaxis:

Observa como para declarar un arreglo literal se encierra entre corchetes a sus elementos y se separan por comas. Los elementos de un array literal pueden ser cadenas, numeros (enteros o decimales), valores booleanos, un arreglo literal, el valor null o incluso expresiones.

A continuacion dos ejemplos de este tipo de arreglos:

Si deseas ver funcionando el ejemplo anterior da click aqui.

En el codigo anterior hay dos ejemplos; uno en donde se define un array unicamente con elementos de tipo texto (linea 4) y el segundo ejemplo define un array literal con elementos de diferentes tipos de datos (linea 10). Una vez declarado, un arreglo literal se comporta como un arreglo normal, es por eso que para acceder a los elementos se hace por medio de numeros de indice, ej. arrayColores[0] contiene el primer color.

Ahora vamos a ver como se definen los arreglos literales de mas de una dimension, para que esto siga siendo sencillo solo mostrare arreglos con dos y tres dimensiones, a continuacion el ejemplo:

Si deseas ver funcionando el ejemplo anterior da click aqui.

Los objetos literales

Ahora veamos como se definen los objetos literales de javascript, con un ejemplo…

He creado una pagina que muestra los ejemplos anteriores, si deseas verlo da click aqui.

La sintaxis para crear los objetos literales de Javascript es la siguiente;
var miObjeto = { ‘propiedad1’: valor1, ‘propiedad2’: valor2 }

donde propiedad es el nombre de una propiedad que estamos creando en el nuevo objeto y valor es el valor que estamos asignando a la propiedad. Los valores que pueden asignarse a una propiedad son: un numero (entero o decimal), una cadena de texto, un valor booleano (true o false), null, un array literal o incluso una funcion anonima.

Tambien puedes ver en el ejemplo anterior que para acceder a las propiedades de un objeto lo podemos hacer directamente por medio del nombre ó por medio de indices. Estas son las dos sintaxis:

Observa como en el EJEMPLO 1 accedemos a las propiedades del objeto por medio de la sintaxis 2. Y en el EJEMPLO 2 por medio la sintaxis 1.

Bien, veamos otro ejemplo mas ya para terminar con el tema de los Objetos literales de Javascript. En el ejemplo que mostrare a continuacion se observa como incluso es posible podemos asignar una funcion anonima a una propiedad del objeto JSON.

si deseas ver el ejemplo anterior ejecutandose da click aqui.

Si quisieramos agregar/modificar una propiedad a un objeto que ya existe entonces los hariamos con la siguiente sintaxis:
objeto.nom_propiedad = valor

Donde nom_propiedad es el nombre de una nueva propiedad (o de una propiedad ya existente en el objeto que deseamos modificar) y valor es el nuevo valor que deseamos asignarle.

Ahora que ya sabes como declarar arreglos y objetos literales te resultara mas facil crear los objetos JSON…

Los objetos JSON

Deciamos que JSON es un formato ligero de intercambio de datos. Un documento JSON es un subconjunto de JavaScript, y para esto se basa principalmente en dos estructuras:

  • Una coleccion de pares propiedad:valor (objetos)
  • Los arreglos literales

Como vimos anteriormente los objetos comienzan con { y terminan con } en medio estan los pares propiedad:valor separados por comas. Veamos el diagrama sintactico de un objeto JSON:
Sintaxis de objeto JSON

Donde propiedad es el nombre de una propiedad del objeto JSON y valor pueden ser cadenas, objetos, numeros (enteros o decimales), valores booleanos (true o false), un arreglo literal o el valor null. Observa como es posible anidar objetos dentro de un objeto.

Si te fijas mencione que el valor de una propiedad puede ser un arreglo, debes saber que tambien es posible anidar arreglos dentro de un arreglo. Un arreglo tiene la siguiente sintaxis:
Sintaxis de arreglo JSON
De igual manera valor pueden ser cadenas, objetos, numeros (enteros o decimales), valores booleanos (true o false), un arreglo literal o el valor null. Aqui esta la informacion mas completa (de hecho, de ahi me base para mostrarte los diagramas sintacticos).

Por lo general los documentos JSON son obtenidos del servidor a travez de AJAX, pero nosotros primeramente veremos dos ejemplos donde el documento JSON lo escribiremos directamente en un archivo HTML, lo convertiremos a objeto y desplegaremos sus valores ahi mismo. Posteriormente en otro ejemplo obtendremos un documento JSON desde el servidor a travez de Ajax (con ayuda de JQuery), lo convertiremos a objeto Javascript y mostraremos su contenido al usuario.

Asi poco a poco iremos incrementando la complejidad de los ejemplos hasta intercambiar documentos JSON con datos provenientes de una base de datos (es lo interesante y realmente util).

A continuacion veremos varios ejemplos donde crearemos varios documentos JSON, te recomiendo que los pruebes con esta herramienta online, la cual nos permite comprobar si la sintaxis esta correcta. A mi parecer es una excelente herramienta para probar la sintaxis de JSON, deberias agregarla a tus marcadores (borra el fb).

Ejemplo, creamos un documento JSON, asi:

El documento anterior contiene 3 campos y sus respectivos valores. Como puedes ver la sintaxis de un documento JSON difiere de manera muy leve con la sintaxis para definir un objeto literal de Javascript:
{ ‘propiedad1’: valor1, ‘propiedad2’: valor2, … }

Bien, ahora veamos un documento JSON mas elaborado:

El documento anterior incluye varias cosas interesantes; podemos ver que se trata de un solo objeto principal con 7 campos (desarrollador, depto, email, genero, genero, tel, proyectos). El campo direccion es un arreglo con los datos de la direccion de una persona (Nombre de la calle, numero, colonia, ciudad) y el campo proyectos es un arreglo de 3 objetos, en este caso cada objeto (un proyecto) tiene 4 campos. Pero pudiera darse el caso de que algun objeto del arreglo tuviera solo 3, menos o mas campos. Por ejemplo, podria ser que un proyecto no tenga una direccion web. JSON no tiene la limitacion de que el numero de campos en un arreglo de objetos sea el mismo.

¿Ves como puedes crear documentos JSON tan flexibles como los necesites (o como tengas de imaginacion)?

Ahora veamos como se puede convertir un documento JSON en un objeto Javascript, con un ejemplo (con el primer documento JSON para que lo entiendas mas facilmente):

si deseas ver el ejemplo anterior ejecutandose da click aqui (no olvides ver el codigo fuente).

Observa como se usa la funcion eval; e colocado “( )” alrededor del documento JSON, esto es muy importante, no lo olvides. Otra cosa interesante del ejemplo es que una vez que el documento JSON es convertido a objeto JSON, éste tiene todas las propiedades de los objetos vistas anteriormente.

Si entraste al ejemplo y tienes dudas sobre las funciones de JQuery que he utilizado, en este caso google es nuestro mejor amigo, explicarte yo me llevaria muucho tiempo.

En resumen, los documentos JSON por lo general se obtienen de un servidor (con AJAX) en forma de cadena, estos documentos tienen la sintaxis JSON vista anteriormente. Despues de que el documento JSON es obtenido del servidor éste es convertido en un objeto Javascript. Para convertirlo usamos la funcion eval() que recibe la cadena (el documento JSON) y la devuelve en forma de objeto Javascript.

Si te quedo la “espinita” sobre como usar el documento JSON mas elaborado que expuse mas arriba, click aqui para ver un ejemplo (no olvides ver el codigo fuente).

Bueno, pues llegamos al final de esta parte, en la continuacion (Parte 2) de este mini tutorial de JSON veremos como obtener documentos JSON desde el servidor con ayuda de Ajax y JQuery. Si te gusto o te sirvio esta informacion, o si tienes dudas respecto al tema, te invito a que por favor me dejes un comentario, ademas, me motivas a escribir mas.

Si deseas obtener el codigo fuente de los ejemplos, Desde GitHub te los puedes descargar:
Descargar ejemplos

Hasta pronto.

Acerca de notaspro

Desarrollador JEE y amante de las nuevas tecnologías de desarrollo.

Deja un comentario

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