HI I´M AN IDEA
WANNA PLAY
WITH ME?
 

Introducción a JSON y principales usos (II)

Uno de los usos mas extendidos de la notación JSON es en el uso de llamadas en las distintas APIs.

Para nuestro ejemplo vamos a usar la API de Twitter debido a lo facil que es de comprender y lo bien estructurada y documentada que está.

Cargando el objeto

Si repasamos la API de Twitter, podemos ver podemos ojear la cantidad de llamadas que nos proporciona como por ejemplo la que nos permite acceder al timeline completo de un usuario. El formato de la URI para la llamada se forma así:
https://twitter.com/statuses/user_timeline/jacobMulero.json
 Si abrimos esta dirección con chrome podemos ver el contenido del objeto. Como no podemos realizar llamadas de ajax entre distintos dominios, la forma de trabajar con el contenido del objeto de json es importarlo como si fuera un archivo de javascript incluyéndolo en nuestro html.

<script type="text/javascript"
src="http://twitter.com/statuses/user_timeline/jacobMulero.json">
</script>

Este tipo de llamadas siempre suelen darnos una serie de opciones de parametrización, por ejemplo añadiendo «count=1» limitaremos el número de resultados recibidos.

<script type="text/javascript"
src="http://twitter.com/statuses/user_timeline/jacobMulero.json?count=1">
</script>

En nuestro objeto JSON que recibimos como respuesta tendremos el siguiente contenido.

[
{
geo: null,
place: null,
retweet_count: 0,
favorited: false,
created_at: "Sun Jan 22 17:36:38 +0000 2012",
in_reply_to_status_id_str: null,
id_str: "161140227707113473",
possibly_sensitive: false,
user: {
is_translator: false,
lang: "es",
profile_background_tile: false,
protected: false,
profile_image_url_https: "https://si0.twimg.com/profile_images/1512449937/Untitled-1_normal.jpg",
geo_enabled: true,
profile_sidebar_fill_color: "DDEEF6",
name: "Jaime Mulero Molinet",
followers_count: 96,
profile_image_url: "http://a2.twimg.com/profile_images/1512449937/Untitled-1_normal.jpg",
show_all_inline_media: true,
listed_count: 2,
follow_request_sent: null,
utc_offset: 3600,
created_at: "Sun Apr 17 20:55:06 +0000 2011",
profile_sidebar_border_color: "C0DEED",
description: "Desarrollador semi-senior en tecnologías web, amante de #jQuery y #AJAX. Actualmente dándole duro a las aplicaciones basadas en el SO #Android.",
id_str: "283700252",
statuses_count: 220,
default_profile: false,
following: null,
notifications: null,
profile_use_background_image: true,
time_zone: "Madrid",
screen_name: "jacobMulero",
contributors_enabled: false,
verified: false,
profile_text_color: "333333",
profile_background_image_url: "http://a1.twimg.com/profile_background_images/270152795/esquina.png",
friends_count: 288,
profile_link_color: "0084B4",
location: "Murcia",
default_profile_image: false,
id: 283700252,
profile_background_image_url_https: "https://si0.twimg.com/profile_background_images/270152795/esquina.png",
favourites_count: 0,
profile_background_color: "C0DEED",
url: "http://insdout.com"
},
in_reply_to_screen_name: null,
in_reply_to_user_id_str: null,
in_reply_to_status_id: null,
retweeted: false,
coordinates: null,
truncated: false,
source: "<a href="http://www.google.com/" rel="nofollow">Google</a>",
contributors: null,
in_reply_to_user_id: null,
id: 161140227707113470,
text: "I liked a @YouTube video http://t.co/9f1lrKBI gonna shine cantada por mi @fantasiarockero lo hago"
}
]

Echando un vistazo al código vemos como el objeto está formado por un array de objetos. De esta forma si asignamos esta cadena a una variable misTweets, podemos acceder a nuestro primer objeto con misTweets[0] por ejemplo.

misTweets[0].user.name // "Jaime Mulero Molinet"
misTweets[0].created_at // "Sun Apr 17 20:55:06 +0000 2011"

Accediendo a los datos usando «callbacks»

Mas de uno se estará preguntando como podemos asignar el valor de la respuesta ya que tenemos el valor del objeto en un archivo javascript externo.

La mayoría de las API que usan JSON implementan un sistema de respuestas, donde le diremos el nombre de una función nuestra que llamaremos cuando nuestra web termine de cargar el archivo JSON. Automáticamente llamará a la función y pasará el objeto como argumento.

<script type="text/javascript"
src="http://twitter.com/statuses/user_timeline/jacobMulero.json?callback=cb&count=1">
</script>

Dentro de la función, podemos asignar el objeto a una variable y usar los datos como queramos. Lo único que debemos hacer es definir la función con un parámetro que usaremos para el objeto.

var misTweets;
function cb(data){
    misTweets = data;
}

Ahora ya podremos acceder a los datos del objeto utilizando la variable global misTweets. Vamos a ver un ejemplo de como implementar el uso de la API de twitter en producción.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>Twitter API y JSON</title>
<script type="text/javascript">
var misTweets
function cb(data){
    misTweets = data;
    document.write(misTweets[0].user.name + " says:<br/>\"" + misTweets[0].text + "\"");
}
</script>
<script type="text/javascript"
src="http://twitter.com/statuses/user_timeline/jacobMulero.json?callback=cb&count=1">
</script>
</head>
<body>
</body>
</html>

Espero haber servido de ayuda para empezar a trabajar con este tipo de APIs, en el siguiente artículo haré algunas pruebas implementando la comunicación cliente servidor con JSON.

About the author

Jaime Mulero Hola! Me llamo Jaime Mulero, soy programador desde hace años, apasionado por la informática prácticamente desde que tengo uso de razón. Jquery Ninja, Codeigniter Trooper, database juggler and Android engineer! Jaime Mulero

VN:F [1.9.20_1166]
Rating: 5.5/10 (2 votes cast)
Introducción a JSON y principales usos (II), 5.5 out of 10 based on 2 ratings
Difunde la palabra
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks
  • Meneame

2 Comments on "Introducción a JSON y principales usos (II)"

  1. Muy buen post Jacob, te superas cada día, espero sigas ilustrandonos con tus conocimientos.

    VA:F [1.9.20_1166]
    Rating: 5.0/5 (1 vote cast)
    VA:F [1.9.20_1166]
    Rating: -1 (from 1 vote)
  2. nickenino dice:

    Que bueno!

    VA:F [1.9.20_1166]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.20_1166]
    Rating: 0 (from 0 votes)

¿Algo que opinar? Deja tu comentario!