Nov 112012
 
Artículo Javascript

En este artículo presentamos ejemplos de código javascript de cliente para leer un fichero JSON, y exponemos las consideraciones que hay que tener en cuenta cuando se trabaja con ellos.

Solicitar un fichero JSON al mismo dominio/servidor.

En el caso más sencillo, la página activa en el navegador del cliente solicita al mismo servidor un contenido en formato JSON mediante una solicitud Ajax. La forma más simple de implementar este caso es utilizando la la librería JQuery.

Creamos un fichero json de prueba “datos.json” con el siguiente contenido:

{
"dato": "Esto es un dato simple",
"primos": [ 1, 2, 3, 5, 7, 11, 13 ]
}

ponemos el fichero en la raíz del servidor, para que sea accesible mediante la url “/datos.json”. A continuación, lo leemos con una función “lee_json()” que hace uso del método getJSON de la librería JQuery:

<html>
<head>
    <title>Prueba de lectura de datos en formato JSON</title>
    <script type="text/javascript" src="/control/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        function lee_json() {
            $.getJSON("/datos.json", function(datos) {
                alert("Dato: " + datos["dato"]);
                $.each(datos["primos"], function(idx,primo) {
                    alert("Numero primo: " + primo);
                });
            });
        }
    </script>
</head>
<body onload="lee_json();">
</body>
</html>

Como vemos, en el ejemplo también estamos haciendo uso del método “each” para recorrer el array presente en el fichero leido.

Solicitar un fichero JSON a otro dominio

El ejemplo que hemos presentado no funcionaría en navegadores Firefox y Chrome si la url utilizada para recuperar el fichero JSON pertenece a un dominio distinto al de la página que contiene el código javascript que realiza la solicitud.

Por razones de seguridad, en las implementaciones de Javascript que utilizan estos navegadores, no se permiten las solicitudes del ficheros json inter-dominios.

Sin embargo, si están permitidas las solicitudes de ficheros javascript interdominios. Utilizando esta posibilidad, se puede utilizar el mecanismo conocido como JSON-P (JSON with Padding), para entregar contenido JSON como si fuera javascript.

Para ello, sustituimos la llamada a getJSON por una llamada al método “ajax” de jQuery:

            $.ajax({
                dataType: 'jsonp',
                url: 'http://OTRO-DOMINIO.com/datos.php',
                success: function(datos) {
                            for (var clave in datos) {
                              if (datos.hasOwnProperty(clave)) {
                                  alert(clave + " -> " + datos[clave]);
                              }
                            }
                         },
                 error: function() { alert("Error leyendo fichero jsonP"); }
            });

como vemos, en lugar de solicitar el fichero estático “datos.json”, se realiza la solicitud a un script “datos.php”. El código de éste script es:

<?php echo $_GET["callback"] ?> (
{
    "dato": "Esto es un dato simple",
    "primos": [ 1, 2, 3, 5, 7, 11, 13 ]
}
);

Explicación:

Al expecificar “dataType: ‘jsonp’ , el método ajax añade un argumento “callback” a la url, con un valor generado dinámicamente. Así, la solicitud que le llega al servidor es de la forma:

http://OTRO-DOMINIO.com/datos.php?callback=jQuery17200075442985920404215_1352635617448

El valor del argumento “callback” es utilizado por el script “datos.php” como el nombre de la función javascript que va a envolver los datos JSON solicitados. De esta manera, el resultado que entrega al cliente es un código javascript de la forma:

jQuery17200075442985920404215_1352635617448 (
{
    "dato": "Esto es un dato simple",
    "primos": [ 1, 2, 3, 5, 7, 11, 13 ]
}
);

jQuery se encarga de interpretar este resultado y generar la estructura de datos javascript que entrega como resultado final.

El comportamiento de la llamada ajax que realiza jQuery se puede alterar con párametros adicionales “jsonp” y “jsonpCallback”. El efecto de estos parámetros se puede consultar en la documentación de referencia del método ajax de jQuery:

 Publicado por en 10:54 am

  3 Respuestas a “Cómo leer ficheros JSON en Javascript”

  1. Corrige tu título, no usas javascript , usas jquery. ; )

    • Hola Pepe,

      El título de este artículo es correcto si tenemos en cuenta que jQuery es una librería de funciones javascript.

      También es posible prescindir de jQuery, y utilizar la funcionalidad nativa disponible en el intérprete javascript, pero entonces hay que tener en cuenta las peculiaridades de la implementación del intérprete en los distintos navegadores, sobre todo en la forma de realizar una petición ajax.

      jQuery se ocupa precisamente de realizar una abstracción de dichas peculiaridades, por lo que en general es la elección idónea para implementar esta funcionalidad.

      • De todas formas un titulo mas acertado hubiera sido “Como leer ficheros json con Jquery”, gracias igual por la información, me sirvió bastante.

 Deja un comentario

(requerido)

(requerido)