Comunidad de diseño web y desarrollo en internet

Leer JSON con Javascript y PHP

En estos días he estado trabajando con la API de Vimeo para un par de proyectos, pero me encontré en la necesidad de tener que hacer el llamado directamente a un archivo JSON y entonces me puse a investigar qué es eso de JSON.

Anexo ejemplos directos del parseo de JSON con el ejemplo de la API de Vimeo, sin embargo, este tutorial no está enfocado a revisar el uso de la API.


¿Qué es JSON?


Es el acrónimo de JavaScript Object Notation. Si conoces XML, se podría decir que es una alternativa a un sistema de envío y recepción de datos.

El "parseo" o "parsear" es leer o administrar una base de datos o conjunto de texto.

La estructura o sintaxis es de la siguiente manera:

Código :

{ "objeto" : valor }

El siguiente ejemplo de estructura está tomado de la API de Vimeo algo recortada:

Código :

[{
  "title":"titulo",
  "description":"Lorem Ipsum Dolor sit Amet",
}]


Parseo con Javascript


La manera más fácil de pasear un JSON con javascript es a través de jQuery + Ajax con la función $.getJSON que es equivalente a:

Código :

$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

El cual se utiliza de la siguiente manera:

Código :

$.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )

El siguiente código lo apliqué para extraer título y descripción de una petición a la API de Vimeo

Código :

$.getJSON('http://www.vimeo.com/api/v2/video/31894179.json?callback=?', {format: "json"}, function(data) { 
$("h1").html(data[0].title); 
$("p").html(data[0].description); 
});

Básicamente estoy accediendo con la función $.getJSON a la url que me proporciona la documentación de la API de Vimeo para obtener un JSON (aquí), defino qué formato estoy usando, y ejecuto una función a partir del mismo.

Dentro de ésta, con la función .html, "extraigo" el campo del título y descripción y se los "pongo" a la etiqueta <h1></h1> y <p></p>. Existe el selector data[0] porque solamente estoy obteniendo la primera parte del JSON, si tuviera por ejemplo varios videos, le agregaría 0, 1, 2 respectivamente para seleccionar las otras partes.

Parseo con PHP


Para realizar el parseo antes que nada necesitamos saber si la estructura JSON está dentro del archivo a ejecutar o afuera. Si está afuera puedes utilizar cURL para leer el archivo.

Necesitamos también de una función llamada json_decode, esta sirve para convertir un string JSON a una variable que funciona en PHP.

El siguiente ejemplo sirvió para llamar título y descripción de un video utilizando la API de Vimeo.

Código :

//Url donde esta nuestro JSON
$req = 'http://vimeo.com/api/oembed.json?url=http://vimeo.com/31894179';

//Iniciamos cURL junto con la URL
$cVimeo = curl_init($req);

//Agregamos opciones necesarias para leer
curl_setopt($cVimeo,CURLOPT_RETURNTRANSFER, TRUE);

// Capturamos la URL
$gVimeo = curl_exec($cVimeo);

//Descodificamos para leer
$getVimeo = json_decode($gVimeo,true);

//Asociamos los campos del JSON a variables
$titulo = $getVimeo['title'];
$descripcion = $getVimeo['description'];
$thumbnail = $getVimeo['thumbnail_url'];

Cada vez que llamamos a la variable $getVimeo estamos leyendo el archivo JSON, como ya está descodificado gracias a la función json_decode es posible buscar los campos "title" y "description". Ya después es cuestión de llamarlas o agregarlas a nuestro HTML con un echo o lo que quieras.

Ya sabes la base y con un ejemplo bastante simple. El parseo es igual en cualquier otro JSON, quizás solo varíe en el número de secciones que tenga el JSON. Google es tu mejor amigo.

Cualquier duda quedo a sus órdenes, puedes dejarme un comentario o preguntarme vía twitter @kinduff

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate