MarcoGallen.com

HTML, CSS, JS, SEO y UX

3 pasos para una lista de JQuery Mobile desde JSON

3 pasos para una lista de JQuery Mobile desde JSON

Crear una lista de Jquery Mobile desde un JSON es muy sencillo, no se necesita mucho código y puedes tenerla lista en 5 minutos.

Primer paso: Agregar los Scripts

Yo en lo personal prefiero usar el CDN de Google para todos los CSS y JS de los frameworks que utilizo. Google tiene una gran selección y tiene varias ventajas: Google tiene servidores por todo el mundo lo cual las hace más rápida, el versionamiento es muy sencillo y ademas como muchos utilizan ese CDN es probable que el cliente ya lo tenga en cache.

 

Segundo paso: Crear el HTML

JQuery Mobile ya viene con un set de eventos definidos que nos permiten crear paginas (en el mismo html o en distintos *.htmls) eso nos da mucha flexibilidad para nuestra demo.

Iniciamos con el template básico de una página html5 (descarga el template).

Esto ya incluye la declaración del DOCTYPE, el meta de encoding y los tags básicos (HTML, HEAD,TITLE,BODY).

Y este es el HTML que vamos a utilizar:

 

Este div debe de estar dentro del tag BODY o algún otro TAG que uses para tu contenido.

Rapidamente:

El DIV principal (id=“home”) tiene un data-role=“page” eso hace que JQuery Mobile sepa que es una página y la trate como tal.

Dentro tiene 3 elementos cada uno con su respectiva función:

data-rol=“header”: Es el encabezado de la pagina, aquí puedes incluir botones de navegación o el nombre del sitio o app.

data-rol=“content” aquí va el contenido principal de la pagina.

data-rol=“footer” es el pie de pagina, ahi se incluyen o navegación o algún copyright.

Dentro del DIV data-rol=“content” vamos a incluir un UL (Unordered list)

 

El UL tiene un ID “list_view” este ID es como mas adelante localizaremos nuestro elemento y le agregaremos los puntos de la lista. El atributo data-rol=“listview” es lo que le permite verse como una lista tradicional de dispositivos móviles y le agrega la funcionalidad para transicionar. El atribúto data-theme=“a” nos permite modificar el estilo de la lista de unos predeterminados que ya tiene JQuery Mobile.

Tercer paso: Agregar el Javascript

Este paso en realidad son dos pasos, el primero es conseguir el JSON desde la fuente de nuestra elección. Para nuestro ejemplo usare el API de MusicGraph que es un buscador de artistas. (¿Porqué esta API? Es gratuita, la puedes usar sin registro y su documentación incluye API_KEY)

El tres el JSON es muy sencillo:

$.getJSON(URL, callback) es una función de JQuery que agrupa  $.ajax pero con menos opciones, funciona muy bien cuando quieres hacer algo rápido, para algo más eficiente recomiendo usar $.ajax.

La función getJSON recibe dos parámetros: el URL de donde queremos tomar el JSON, en nuestro caso:  http://api.musicgraph.com/api/v2/artist/search?api_key=c8303e90962e3a5ebd5a1f260a69b138&similar_to=Flogging+Molly y un callback, que es una función que llamara cuando termine de recibir el JSON de forma exitosa, esta recibe un parámetro con los resultados.

Agregando los datos a la lista:

Como vamos a manipular varias veces la lista UL id list_view es mejor guardar el identificador en una variable y no tener que buscarlo cada que lo necesitemos:

Para agregar los datos a la lista solo tenemos que procesar el resultado de la función de callback de getJSON. De esta forma:
 

el objeto result contiene propiedades, la propiedad data es un array con la información que queremos, por eso asignamos var data = result.data (En JSON las propiedades se pueden acceder usando punto(.) o como diccionario).

Iteramos sobre nuestro array con un for – in y tomamos el titulo del artista: var title = data[item].name, dado que data es un array de objetos lo que regresa es un objeto con una propiedad title.

Después creamos el LI que vamos a insertar:

y lo agregamos a nuestra UL con id list_view:
Como el UL se creo antes que cargáramos nuestro JSON tenemos que refrescarla usando:
Cuando la lista se refresca ya podemos ver los títulos de los artistas en nuestra lista.

Código javascript completo:

Aquí el código completo de la página:

 

Como ven es muy fácil crear una lista para JQuery Mobil a partir de un JSON, sobretodo si nos apoyamos e el mismo framework de JQuery.  En otro post les mostrare como al dar clic en el elemento de la lista puedes mostrar otra pantalla con más información del artista.

¿Completaste la lista? Deja una liga con tu comentario.



El cariño esta en compartir...

1 Comment

  1. Súper útil, y funciona perfecto, muchísimas gracias !!!

Deja un comentario

Your email address will not be published.

*

© 2017 MarcoGallen.com

Theme by Anders NorenUp ↑