Leer información en formato JSON
Apr 27, 2009 | Español | By Crysfel | 16 Comments | Read in EnglishEl tema de hoy muestro como poder manipular información en formato JSON mediante un Store y por medio de Ajax será solicitada al servidor para ser procesada localmente.
Author: Crysfel
I'm a software developer with 6+ years of experience, when I'm not developing software I may be writing a tutorial, you can follow me on twitter
Material de apoyo
El ejercicio que haremos en este tutorial será igual a los dos tutoriales anteriores, únicamente cambiaremos la fuente de datos, así que vamos a descargar el material de apoyo, lo descomprimimos y copiamos los archivos dentro de la carpeta “ajax” que creamos al inicio de este capitulo.
La información
La información que vamos a utilizar está contenida en formato JSON de la siguiente manera:
<?php
header("Content-Type: text/plain");
echo "{
total:9,
data:[{
id: 1,
name: 'Crysfel',
occupation: 'Software developer',
gender: 'm',
age: 25
},{
id: 2,
name: 'Sasha',
occupation: 'Figure skater',
gender: 'f',
age: 24
},{
id: 3,
name: 'Jack',
occupation: 'Software Architect',
gender: 'm',
age: 35
},{
id: 4,
name: 'John',
occupation: 'Javascript developer',
gender: 'm',
age: 22
},{
id: 5,
name: 'Sara',
occupation: 'Designer',
gender: 'f',
age: 31
},{
id: 6,
name: 'Nicole',
occupation: 'Tester',
gender: 'f',
age: 31
},{
id: 7,
name: 'Carl',
occupation: 'Photographer',
gender: 'm',
age: 45
},{
id: 8,
name: 'Will',
occupation: 'Actor',
gender: 'm',
age: 32
},{
id: 9,
name: 'Penny',
occupation: 'Waitress',
gender: 'f',
age: 28
}]
}";
?>
Este código se encuentra en el archivo “jsondata.php” que viene en el material de apoyo, es importante mencionar que por cuestiones de simplicidad la información está escrita directamente en el código, pero en el mundo real vendría de una base de datos, un servicio Web o algún otro lugar.
Creando el Store
Podemos crear un Store que pueda manipular la información en formato JSON de dos maneras, una es haciendo lo mismo que el tutorial anterior únicamente cambiando el “reader” de XML por uno que lea JSON y definirle la propiedad “root” que es donde se encuentran los registros.
//create the "Person" record
var Person = Ext.data.Record.create([
{name: 'name', mapping: 'name'},// "mapping" property not needed if it is the same as "name"
{name: 'occupation'}, // This field will use "occupation" as the mapping.
{name: 'age', type:'float'}, // this field will use "age" as the mapping and its a float type
{name: 'gender'}
]);
//creates the reader for the JSON data
var reader = new Ext.data.JsonReader({
totalProperty: 'total', // The element which contains the total dataset size (optional)
root: 'data', // The repeated element which contains row information
id: 'id' // The element within the row that provides an ID for the record (optional)
}, Person);
//creates the proxy
var proxy = new Ext.data.HttpProxy({
method:'POST', //configure the http method GET or POST
url: 'jsondata.php' //the URL for the ajax call
});
//creates the Ext.data.Store
this.store = new Ext.data.Store({
proxy: proxy, //setting the proxy
reader: reader //setting the reader
});
Como puedes ver, el código es muy semejante al ejemplo que vimos con XML en el tema anterior, solo han cambiado unas pocas líneas.
La segunda alternativa es utilizar el objeto “JsonStore”, el cual ya tiene incluido un lector para JSON así como un Proxy para realizar las peticiones Ajax al servidor, utilizando este método podemos ahorrarnos muchas líneas de código reemplazando todo el código anterior por lo siguiente:
this.store = new Ext.data.JsonStore({
url: 'jsondata.php',
root: 'data',
fields: ['name','occupation','gender',{name:'age',type:'float'}]
});
La propiedad “url” es donde se solicitará la información mediante Ajax, la propiedad “root” es donde se encuentran los registros que se utilizarán para este store y la propiedad “fields” es un arreglo donde especificamos los campos de los registros que recibiremos, esto lo hacemos únicamente definiendo el nombre de la propiedad o bien utilizando un objeto donde podemos definir el nombre, el mapping o el tipo de información que tendrá esa propiedad.
El resto del código
El resto del código lo he explicado en los temas anteriores, básicamente lo único que hacemos es agregar un “listener” al evento clic de los botones que se encuentra en el documento HTML para luego filtrar los registros por los criterios necesarios.
Conclusiones
El formato JSON es muy sencillo de manipular, pues crear un store para este formato de información no es complicado y lo hacemos en unas cuantas líneas de código.
Si has notado, el Store es un componente muy importante del Framework, además de que ha sido planeado para soportar diferentes formatos de información. En lo que resta del curso vamos a estar utilizando este componente en los formularios, las grillas, los árboles y varios componentes más que requieran manipular información.
Como siempre son bienvenidos los comentarios, sugerencias o dudas, y no olvides suscribirte a las Feeds o a tu correo para estar al tanto de las actualizaciones.
He buscado como enfermo un ejemplo de este tipo pero utilizando tecnología JSP, en vez de PHP, aun sigo en la busqueda, quedaría infinitamente agradecido si me pasas algo al respecto.
Por cierto que buen sitio.
Saludos.