JSon y Javascript

Posted by on mar 27, 2012 in Javascript | 0 comments

Acá voy a mostrar como se puede usar los objetos JSon en javascript, no está tan lejos de ser fácil. Antes de empezar voy a hacer un repaso de qué es un objeto JSon y cuál es su estructura.

JSON es un formato de texto/datos que nos permite crear una estructura bastante entendible para intercambiar información. Esté tipo de datos es también soportado en otros lenguajes como C, java, php y algunos por ahí. Hoy por ejemplo, disponemos de XML para traspasar datos de una plataforma a otra,  y además, para comunicarnos con muchas aplicaciones. Es relativamente sencillo, posee estándares de desarrollo, y casi todas las tecnologías de información hace uso de ellas. ¿Pero por qué hablamos de XML? La razón:  porque JSON está absorbiendo  el mercado de la modalidad de intercambio de datos.  Twitter por ejemplo, ha empezado a migrar de XML a JSON. A la gente le gusta lo flexible que és y, esta ya implementado en muchas plataformas.

Para saber cómo es JSON hagamos un XML y luego interpretamos su estructura en JSON. Veamos:

Formato de un archivo xml:

<continente nombre="América" habitado="si">
  <paises>
    <pais nombre="Costa Rica" capital="San José" />
    <pais nombre="México" capital="DF" />
    <pais nombre="Argentina" capital="Buenos Aires" />
  </paises>
</continente>

Ahora el equivalente en json:

{"continente": {
  "nombre": "América",
  "habitado": "si",
  "paises": {
    "pais": [
      {"nombre": "Costa Rica", "capital": "San José"},
      {"nombre": "México", "capital": "DF"},
      {"nombre": "Argentina", "capital": "Buenos Aires"}
    ]
  }
}}

JSON pasa a ser un lenguaje mas “humanizado” y deja claro que es muy hábil para mantener una estructura bastante limpia.

¿Adónde empiezo con JSON y Javascript?

Sí, primero se tenían que dejar algunas pautas claras. Podemos empezar con la declaración:

var mundo = {"continente": []};

Ahora las propiedades del continente, usamos el metodo push():

mundo.continente.push({nombre: "America", habitado: "si", paises: []});

¿Y los países?

mundo.continente[0].paises.push({nombre: "Costa Rica", capital: "San José"});
mundo.continente[0].paises.push({nombre: "México", capital: "DF"});
mundo.continente[0].paises.push({nombre: "Argentina", capital: "Buenos Aires"});

Aquí se ilustra muy bien como JSON es enfocado desde una perspectiva orientada a objetos. También he usado el índice 0 (cero) para indicar la posición del primer continente, que de hecho, solo hay uno.

Hasta acá, hemos creado una variable mundo que ha copiado muy la estructura que hemos hecho con JSON en la primera parte. Me gustaría insertar mas datos:

/**
* Agregamos continentes
*/

mundo.continente.push({nombre: "Europa", habitado: "si", paises: []});
mundo.continente.push({nombre: "Antartida", habitado: "no", paises: []});

Algunos otros países:

/**
* Agregamos paises
*/
mundo.continente[1].paises.push({nombre: "Italia", capital: "Roma"});
mundo.continente[1].paises.push({nombre: "España", capital: "Madrid"});
// mundo.continente[2].paises.push({nombre: "Ninguno", capital: "Ninguna" }); No tiene paises

Extrayendo los datos

Acá algunos ejemplos de cómo extraer los datos.

El nombre del primer continente:

var nombre = mundo.continente[0].nombre;

Si el tercer continente está habitado:

var habilitado = mundo.continente[2].habitado;

¿Cómo extraer a España?

var pais = mundo.continente[1].paises[1].nombre;
Read More