Introduccion a JSON – Parte I
15 diciembre 2012 6 comentarios
Breve 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.
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:
var miArray = [ 'item1',2,'item3',true ];
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:
<script language="javascript" type="text/javascript"> //EJEMPLO 1 //Array con items de texto var arrayColores = [ 'Azul', 'Verde', 'blanco', 'Rosa' ]; //Mostrar los valores alert( 'Los colores son: '+arrayColores[0]+', '+arrayColores[1]+', '+arrayColores[2] ); //EJEMPLO 2 //Array con items de texto y numeros var arrayCompra = [ 'Papas adobadas 30 gr.', 8.50, true, 2, 'Axel Hernandez' ]; //Mostrar los valores var detalleCompra = 'Detalle de compra:\n'; detalleCompra += 'Producto: '+arrayCompra[0]+'\n'; detalleCompra += 'Precio: '+arrayCompra[1]+'\n'; detalleCompra += 'Tiene descuento: '+arrayCompra[2]+'\n'; detalleCompra += 'Valor descuento: '+arrayCompra[3]+'\n'; detalleCompra += 'Empleado que atendio: '+arrayCompra[4]+'\n'; detalleCompra += 'Importe a pagar: '+(arrayCompra[1]-arrayCompra[3]); alert( detalleCompra ); </script>
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:
<script language="javascript" type="text/javascript"> //Dos dimensiones var paises = [["Estados unidos", "México", "Colombia"], "China", "Irak"]; //Mostrar los valores var strPaises = 'Arreglo bidimensional, Los paises son:\n'; strPaises += 'paises[0][0]: '+paises[0][0]+'\n'; //Estados unidos strPaises += 'paises[0][1] '+paises[0][1]+'\n'; //México strPaises += 'paises[1]: '+paises[1]; //China alert( strPaises ); //Tres dimensiones paises = [["Estados unidos", ["Distrito Federal","Veracruz","Queretaro","..."], "Colombia"], "China", "Irak"]; //Mostrar los valores strPaises = 'Arreglo dimension 3, Los paises son:\n'; strPaises += 'paises[0][0]: '+paises[0][0]+'\n'; //Estados unidos strPaises += 'paises[0][1][0]: '+paises[0][1][0]+'\n'; //Distrito Federal strPaises += 'paises[0][1][1]: '+paises[0][1][1]+'\n'; //Veracruz strPaises += 'paises[0][1]: '+paises[0][2]+'\n'; //Colombia strPaises += 'paises[1]: '+paises[1]; //China alert( strPaises ); </script>
Si deseas ver funcionando el ejemplo anterior da click aqui.
Ahora veamos como se definen los objetos literales de javascript, con un ejemplo…
<script language="javascript" type="text/javascript">
//EJEMPLO 1: Objeto literal con items de texto
var nomVariableObjeto = {
'nombre':'Gonzalo',
'apellido':'Silverio',
'matricula':"05ab77",
'carrera':"I.S.C."
};
var detalleAlumno = "Datos del alumno:\n"
detalleAlumno += 'Matricula: '+nomVariableObjeto.matricula+'\n';
detalleAlumno += 'Nombre: '+nomVariableObjeto.nombre+' '+nomVariableObjeto.apellido+'\n';
detalleAlumno += 'Carrera: '+nomVariableObjeto.carrera;
alert(detalleAlumno);
//Mostrar nuevamente los datos pero por medio de indices
detalleAlumno = "Datos del alumno:\n"
detalleAlumno += 'Matricula: '+nomVariableObjeto['matricula']+'\n';
detalleAlumno += 'Nombre: '+nomVariableObjeto['nombre']+' '+nomVariableObjeto['apellido']+'\n';
detalleAlumno += 'Carrera: '+nomVariableObjeto['carrera'];
alert(detalleAlumno);
//EJEMPLO 2: Objeto literal con diferentes tipos de items
var varObjetoAlumno = {
'matricula':"05ab77",
'nombre':'Gonzalo Silverio',
'materias':['Matematicas discretas','Fisica II','Metodos numericos',
'becado':true,
'promedio':8.53
};
var strMaterias='';
var i=0
for(i=0;i<(varObjetoAlumno.materias.length-1); i++)
strMaterias += varObjetoAlumno.materias[i]+', ';
strMaterias += varObjetoAlumno.materias[i];
detalleAlumno = "Datos del alumno:\n";
detalleAlumno += 'Matricula: '+varObjetoAlumno.matricula+'\n';
detalleAlumno += 'Nombre: '+varObjetoAlumno.nombre+'\n';
detalleAlumno += 'Materias: '+strMaterias+'\n';
detalleAlumno += 'Esta becado: '+varObjetoAlumno.becado+'\n';
detalleAlumno += 'Promedio general: '+varObjetoAlumno.promedio;
alert(detalleAlumno);
</script>
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:
//Sintaxis 1 nomVariableObjeto.nombrePropiedad //Sintaxis 2 nomVariableObjeto['nombrePropiedad']
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.
<script language="javascript" type="text/javascript">
//Definimos un pequeño objeto Javascript llamado persona
//Con una funcion anonima
var persona = {
"nombre": "Gonzalo",
"apellidos": "Silverio Silverio",
"carrera": "Ingenieria en sistemas",
"saludar": function(aquien) {
var mensaje= "Que tal! ¿Como estás " + aquien + "?\n Yo soy " + this.nombre + " "+this.apellidos+
" y estudie "+this.carrera+", hasta pronto.\n\nSigue visitandome!";
alert(mensaje);
}
};
var miObjeto = eval(persona);
alert("El nombre es: " + miObjeto.nombre +
"\nEl apellido es: " + miObjeto.apellidos +
"\nLa carrera es: " + miObjeto.carrera);
miObjeto.saludar('Xavier');
</script>
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…
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:
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:
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:
{
"nombre": "Gonzalo",
"apellidos": "Silverio Silverio",
"carrera": "Ingenieria en sistemas"
}
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:
{
"desarrollador" : "Xavier Landa",
"depto" : "Sistemas (SI)",
"email" : "ej_email@dominio.com",
"genero" : "h",
"direccion":["Benito Juarez",3,"Lomas de Chapultepec","D.F."],
"tel" : "123000987",
"proyectos":[
{
"codigo" : "xs2012",
"nombre" : "XenixSoft",
"url" : "https://gonzasilve.wordpress.com",
"prioridad" : 1
},
{
"codigo" : "msw2012",
"nombre" : "Mantenimiento website oficial",
"url" : "http://shalo.site50.net",
"prioridad" : 2
},
{
"codigo" : "plg2011",
"nombre" : "Plugin DB Converter",
"url" : "http://gonzasilve.260mb.com",
"prioridad" : 0
}
]
}
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):
<script language="javascript" type="text/javascript">
//Definimos un pequeño documento JSON en una variable
var cadenaJSON = "{"+
"'nombre' : 'Gonzalo',"+
"'apellidos' : 'Silverio Silverio',"+
"'carrera' : 'Ingenieria en sistemas'"+
"}";
//Convertir el documento JSON a Objeto Javascript
var objCadena = eval('(' + cadenaJSON + ')');
//Mostrar los valores del objeto JSON al usuario
var str_Nombre = "Nombre: "+objCadena.nombre+"\n";
var str_Apellidos = "Apellidos: "+objCadena.apellidos+"\n";
var str_Carrera = "Carrera: "+objCadena.carrera+"\n";
alert(str_Nombre+str_Apellidos+str_Carrera);
</script>
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).
Despedida
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!). Por otra parte si gustas te envio los ejemplos en un .zip, solo deja tu correo.
Hasta pronto.
Saludos cordiales.
Acerca de gonzasilve
.::programming notes::. Gonzalo Silverio 
los links a los ejemplos no funcionan
Buen minitutorial, espero que ya este la parte 2. Muchas gracias y un saludos, los links ya estan rotos, agradeceria que los mandaras al correo. mpadilla_06@hotmail.com
good job!
Thanks!
regards.
De momento la primera parte me ha parecido bastante bien. Llevaba varias horas intentando averiguar en distintas páginas como aplicar ésto en mi código HTML y no me acababa de aclarar. Sigo con la segunda parte, a ver si por fin me entero bien de qué va esto..
Muchas gracias Gonzalo, un saludo!!
Vaya chasco!!… daba por sentado que la segunda parte estaba hecha, y el caso es que la información me hacía falta ya.
En fin, qué se le va a hacer!!, aunque ya no me sirva a mi porque tendré que seguir buceando por Internet, te animo a que hagas la segunda parte y no dejes esta obra a medias, que está muy bien trabajada.
Un saludo!!