Leer información en formato JSON Más videos
Comentarios: 27
Likes: 0 Persona
Duración: 0.0 minutos
Dificultad: Intermedio
Descripción del tema
El 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.
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.Te gustaría recibir más tutoriales como este en tu correo?
Este tutorial pertenece al curso Aprendiendo Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.
Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!
Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.
Instructor del curso
Regístrate a este curso
Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.
Tendrás acceso a descargar los videos, códigos y material adicional.
Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.
Llevarás un registro de tu avance.
27Comentarios
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.
Te recomiendo registrarte en los foros para que te ayudemos. saludos :D
hola Crysfel, llevo varios años usando ExtJS me atrae muchísimo y he logrado resolver casi todos los problemas que me propongo, aquí te pongo esta duda a ver si me puedes ayudar. Tengo un campo en una tabla de mi base de datos con texto en HTML, lo obtengo con una consulta y lo quiero pasar a travez de un JSON a mi aplicación para que aparezca en el campo de un Grid, pero al decodificar el JSON me lanza un error diciendo que el JSON no es válido.
Necesitas "escaparlo" primero, posiblemente el problema sea que el string del html tiene comillas o algo, por lo tanto la descodificación falla, aunque generalmente las librerías son capaces de manejar eso sin problema. Registrate en el foro para que pongas un poco de código ;) Saludos
Ya postee mi duda en el foro y nadie responde, solo necesito cambiar el archivo PHP por un que sea JSP, pero no funciona!!... ayuda!! por favor!!
tengo problemas con al usa php con extjs al descargar los ejemplos no me muestra la informacion que brinda elarchivo .php si no que lo muestra como si fuera un archivo de texto cualkiera. falta configurar algo en el php.ini o algo asi?? aver si me pueden ayudar por favor
Cual es tu problema exactamente con el JSP?
Hola crysfel tengo una duda, ya has explicado como cargar datos desde un xml ahora desde un json pero no se puede cargar directamente vía ajax y con el formato de array, así no gastar tanto ancho de banda? Tal vez lo que digo es una locura o tal vez no?
Te refieres a utilizar "Ext.Ajax.request", recibir un arreglo JS y luego darselo al store mediante "loadData"? en teoría si es posible pero realmente utilizar JSON es practicamente lo mismo, no veo la necesidad de hacerlo. Saludos
Hola quiero saber como hacer para llenar un arbol usando json que viene de un php como este saludos
Ya hemos hablado de esto que necesitas, te recomiendo leer el siguiente tutorial: http://www.quizzpot.com/2009/10/arboles-generados-con-ajax/ saludos
Hola Crysfel! La verdad es que me estoy haciendo fanático de ExtsJs, y de quizzpot.com en la medida en que voy conociendo a ambos. Sobre este tutorial, me ha quedado una duda y es que no tengo claro el uso de la propiedad "root". Entiendo que es el elemento que contiene los registros que se han de procesar, pero no me queda claro que debe ser. Saludos y gracias!! Sigue así!
Tengo una duda, yo traigo los datos de una consulta en PHP o JSP es igual para mi, mi duda cae en el siguiente punto: digamos que el JSON me devuelve algo como: { id: 1, name: 'Crysfel', occupation: 'Software developer', gender: 'm', age: 25 } como hago para acceder al campo age? osea no hay una forma como JSonReader.dataField(""); o algo asi
Primero necesitas sacar el record que del store, puedes usar un "store.getAt" o hacer alguna búqueda, luego ya que tienes el record solamente haces un "rec.get('age')". Saludos
Buenas, Estoy intentando conectar con la API de google Gears de geolocalización. El ejemplo de la api esta aqui: http://code.google.com/intl/es-ES/apis/gears/geolocation_network_protocol.html Yo quiero implementar el cliente, y que mediante un documento de texto, pueda cambiar el valor de los "cell_id" y me de la localización, el problema es que no consigo que me funcione nada :( Gracias de antemano...
Como le digo al proxy que la no agregue el parametro "_dc" cuando realiza la solicitud ?
store.getAt(index).get('field_name') doesn't work... any way to access fields from jsonstore? Thanks a lot
Hola que tal, mi duda es que tengo un js hibrido en el cual mezclo un grid, campos de texto, etc. y todo bajo un mismo Form Panel, mi duda es que estamos obteniendo los datos de base de datos a traves de los campos de texto empleando un JsonReader usando la propiedad mapping, ejemplo: var reader = new Ext.data.JsonReader({ root: 'data', fields: [ {name: 'dataNombreAfiliado',mapping:'dataNombreAfiliado',type:'string'}] }); el problema es que tenemos diferentes metodos para poder jalar los datos de la bd al js pero nos percatamos que solo podemnos jalar un metodo por formPanel es decir: var forma = new Ext.FormPanel({ reader:reader }); forma.load({url:urlMetDatosAfiliado,waitMsg:'loading....'}); Como podriamos mandar a traer diferentes metodos a nuestro js en un mismo formPanel. Muchas gracias y espero alguien pueda solucionar este problema...
hola tengo una duda. quiero mandar parametros al php que me trae la data en formato Json al store. trate de hacer lo siguiente pero no me funciono: var storeGrid = new Ext.data.JsonStore({ url: '../php/getData.php', fields: fields, root: 'data', totalProperty: 'total' }); storeGrid.load({ params:{ root: nodo.id }, });
Buenas noches, la verdad este tutorial me ha parecido genial, habia buscado documentación sobre esta herramienta y no pude encontrar nada que lo explique como lo hacen aqui, en cuanto a lo de jsp yo lo hice pero con servlet aqui esta el codigo de como lo hice y me funcionó correctamente: /* * To change this template, choose Tools | Templates * and open the template in the editor. */ package com.quizzpot.tutorial.servlet; import com.quizzpot.tutorial.javabeans.Person; import java.io.IOException; import java.io.PrintWriter; import java.util.HashMap; import java.util.LinkedList; import java.util.List; import java.util.Map; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONObject; /** * * @author FLIA JIMENEZ JULIO */ public class JsonAction extends HttpServlet { /** * Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods. * @param request servlet request * @param response servlet response * @throws ServletException if a servlet-specific error occurs * @throws IOException if an I/O error occurs */ protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/plain;charset=UTF-8"); PrintWriter out = response.getWriter(); try { /* TODO output your page here */ Map lista = new HashMap(); List data = new LinkedList(); data.add(new Person(1, "Crysfel", "Software developer", "m", 25)); data.add(new Person(2, "Sasha", "Figure skater", "f", 24)); data.add(new Person(3, "Jack", "Software Architect", "m", 35)); data.add(new Person(4, "John", "Javascript developer", "m", 22)); data.add(new Person(5, "Sara", "Designer", "f", 31)); data.add(new Person(6, "Nicole", "Tester", "f", 31)); data.add(new Person(7, "Carl", "Photographer", "m", 45)); data.add(new Person(8, "Will", "Actor", "m", 32)); data.add(new Person(9, "Penny", "Waitress", "f", 28)); data.add(new Person(10, "Ferney", "Programador", "m", 23)); lista.put("total", data.size()); lista.put("data", data); /*Convertimos el mapa a formato JSon con JSONObject*/ JSONObject jSONObject = JSONObject.fromObject(lista); out.println(jSONObject.toString()); } finally { out.close(); } } // /** * Handles the HTTP <code>GET</code> method. * @param request servlet request * @param response servlet response * @throws ServletException if a servlet-specific error occurs * @throws IOException if an I/O error occurs */ @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } /** * Handles the HTTP <code>POST</code> method. * @param request servlet request * @param response servlet response * @throws ServletException if a servlet-specific error occurs * @throws IOException if an I/O error occurs */ @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { processRequest(request, response); } /** * Returns a short description of the servlet. * @return a String containing servlet description */ @Override public String getServletInfo() { return "Short description"; }// } ovbiamente en la url ahi que colocar el URL patterns del servlet espero y les sirva, ha y el objeto Person no es mas que un bean que hize para no hacerlo con vectores, ojo que los campos del bean tienen que coincidir con los de la propiedad fields del objeto Jsonstore
Saludos, amig@s. Mi problema es que ya tengo los datos en formato json en una variable y quiero usarlo para rellenar el store. Entiendo que debería usar el jsontore, pero lo he intentado de varias formas y no he tenido suerte. Este es el último intento que he hecho: bbDataStore = new Ext.data.JsonStore({ data: json_data, // aquí están los datos en formato json root: 'results', idProperty: 'id_appointment', fields: ['id_appointment', 'first_time', 'symptoms', 'status'] }); bbDataStore.load(); La variable json_dat contiene: { "total":"3","results":[{"id_appointment":"1","first_time":"N","symptoms":"control","status":"R"},{"id_appointment":"2","first_time":"N","symptoms":"control","status":"C"},{"id_appointment":"3","first_time":"N","symptoms":"control","status":"P"}] } Agradezco la ayuda...
Hola amigo Crysfel, soy nueva en ExtJs y al practicar con su codigo no me carga nada, me podria indicar si falta algo al codigo ... yo he estado practicando con un archivo asp ... por favor espero su respuesta. Gracias
Sorry amigo Crysfel fue un error mio, si carga la data.
Amigo, descarge el demo y no me carga la data, sabras que puedo hacer ? no me marca ningun error gracias!!!!
Hola Excelente blog... tengo una duda. Mi pregunta es si puedo acceder en tiempo de ejecución al responseText que se genera... me imagino que es procesado y llena el componente al que este ligado el Store. Ejemplo... la respuesta ajax es esta: {data: [muchosObjetos] , otroObjeto: {definicionDelObjeto} } y por ejemplo si está ligado al grid poder usar el "otroObjeto" algo como grid.load({ callback: function(r, options, success){ //Aquí como diantres rediantes =( accedo a "otroObjeto" o a la respuesta de la petición } }) O como hacer que se quede anclada como la propiedad total que tiene los store... De antemano muchas gracias por el tiempo... Saludos!!!
se agradece encontrar sitios donde expliquen cosas. queria plantear una duda. estoy haciendo un GeoJson via PHP, ejecuto la consulta y genero un resultado que paso al store mediante una url pasando cookies, el problema es que no soy capaz de el store me recargue los datos. defino el store del modo: store = new GeoExt.data.FeatureStore({ layer: vecLayer, proxy: new GeoExt.data.ProtocolProxy({ protocol: new OpenLayers.Protocol.HTTP({ url: "consulta3.php?date1="+ReadCookie('date1')+"&date2="+ReadCookie('date2')+"&especies="+encodeURI(ReadCookie('especies')), method:'GET', format: new OpenLayers.Format.GeoJSON() }) }), fields: [ {name: 'a_code', type:'string'}, {name: 'shooting_time', type: 'string'}, {name: 'total_discarded_weight', type: 'double'}, ], }); hago el store.load() en un script de ajax, pero no me lo actualiza. si apunto a un fichero json me lo carga sin problema: proxy: new GeoExt.data.ProtocolProxy({ protocol: new OpenLayers.Protocol.HTTP({ url: "data/especie.json", format: new OpenLayers.Format.GeoJSON() }) }) pero con las cookies ¡no hay manera!. ¿una solucion por favor?
Crysfel, primeramente mil gracias por responder. Ya resolví, bueno siempre estuvo bien mi código, el problema era que los datos que tenía en MySql los había entrado manualmente y al parecer se fue algún caracter que luego no podía decodificar. Al insertar el código HTML desde mi aplicación en ExtJS y luego consultarlos en el portal salen perfectamente bien.