Unidad 3 - Leyendo Ficheros JSON

ADMINISTRACIÓN DE SISTEMAS INFORMÁTICOS .
Unidad 3 – Leyendo ficheros JSON
INDEX
1.- Lectura de ficheros con JavaScript
2.- Utilizando JQuey.
3.- La API de Yahoo.
1.- Lectura de ficheros con JavaScript
HTML5 ofrece una forma estándar de interactuar con archivos locales a través
de la especificación del API de archivos. El API de archivos se puede utilizar, por
ejemplo, para crear una vista previa en miniatura de imágenes mientras se
envían al servidor o para permitir que una aplicación guarde una referencia de
un archivo mientras el usuario está sin conexión. También se podría utilizar
lógica de cliente para verificar si el tipo MIME de un archivo subido coincide con
la extensión del archivo o para restringir el tamaño de una subida.
A continuación se indican las interfaces que ofrece la especificación para

acceder a archivos desde un sistema de archivos "local".
1. File: representa un archivo individual que proporciona información de

solo lectura (por ejemplo, el nombre, el tamaño del archivo, el tipo
MIME y una referencia al control del archivo).
2. FileList: representa una secuencia de conjunto de objetos File (tanto
la secuencia <input type="file" multiple> como arrastrar un directorio
de archivos desde el escritorio se consideran ejemplos de esta
interfaz).
3. Blob: permite fragmentar un archivo en intervalos de bytes.
Cuando se utiliza junto con las estructuras de datos estándad, la interfaz de

FileReader se puede utilizar para leer un archivo de forma asíncrona mediante
el control de eventos de JavaScript. Por lo tanto, se puede controlar el progreso
de una lectura, detectar si se han producido errores y determinar si ha finalizado
una carga. El modelo de evento de XMLHttpRequest guarda muchas
semejanzas con las API.
Nota: Las API necesarias para trabajar con archivos locales son compatibles
con Chrome 6.0 y Firefox 3.6. A partir de Firefox 3.6.3, no se admite el método
File.slice().
1
En primer lugar, se debe comprobar que el navegador sea totalmente compatible

con el API de archivos:
// Chequeo del navegador con varias APIS utilizadas

if (window.File && window.FileReader && window.FileList && window.Blob) {
alert(“Navegador compatible”);
} else {
alert(“El navegador no es compatible”');
}
Lo primero es escoger el fichero que queremos leer.
Objeto input type file
Después de obtener una referencia de File, crea instancias de un objeto

FileReader para leer su contenido en memoria. Cuando finaliza la carga, se
activa el evento onload del lector y se puede utilizar su atributo result para
acceder a los datos del archivo.
A continuación, se indican las cuatro opciones de lectura asíncrona de archivo

que incluye FileReader.
1. FileReader.readAsBinaryString(Blob|File): la propiedad result

contendrá los datos del archivo/objeto BLOB en forma de cadena
binaria. Cada byte se representa con un número entero
comprendido entre 0 y 0,255, ambos incluidos.
2. FileReader.readAsText(Blob|File, opt_encoding): la propiedad
result contendrá los datos del archivo/objeto BLOB en forma de
cadena de texto. De forma predeterminada, la cadena se decodifica
con el formato "UTF-8". Utiliza el parámetro de codificación opcional
para especificar un formato diferente.
3. FileReader.readAsDataURL(Blob|File): la propiedad result
contendrá los datos del archivo/objeto BLOB codificados como una
URL de datos.
4. FileReader.readAsArrayBuffer(Blob|File): la propiedad result
contendrá los datos del archivo/objeto BLOB como un objeto
ArrayBuffer.
Una vez que se ha activado uno de estos métodos de lectura en el objeto

FileReader, se pueden utilizar los eventos onloadstart, onprogress, onload,
onabort, onerror y onloadend para realizar un seguimiento de su progreso.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<title>Leer archivo de texto</title>
<script>
2
function processFiles(files) {
var file = files[0];
var reader = new FileReader();
reader.onload = function (e) {
// Cuando éste evento se dispara, los datos están ya disponibles.

// Se trata de copiarlos a una área <div> en la página.
var output = document.getElementById("fileOutput");
output.textContent = e.target.result;
};
reader.readAsText(file);
}
</script>
</head>
<body>
<input id="fileInput" type="file" size="50" onchange="processFiles(this.files)">
<div id="fileOutput"></div>
</body>
</html>
Podemos utilizar esta técnica para leer un fichero JSON. Se trata de modificar la
función de lectura de forma que traduzca el JSON a objeto Javascript
function processFiles(files) {
var file = files[0];
var reader = new FileReader();
reader.onload = function (e) {
texto= e.target.result;
var obj = JSON.parse(texto);
alert(obj.nombre);
};
Los objetos están formados por parejas de clave/valor. La clave debe ser un
string mientras que el valor debe ser uno de los siguientes tipos JSON (string,
number, object, array, boolean or null).
Cada par de clave/value debe estar separados por coma. Mientras que, en cada
pareja, la clave y el valor están separados por “:”
Se accede a un objeto mediante el nombre del objeto y la clave que queremos

leer separándolos por un punto.
Obj.clave
Otra forma de acceder es utilizarlo como un array asociativo
Obj[“clave”]
Se pueden obtener todos las claves de un JSON mediante un bucle. En nuestro

ejemplo sería:
3
for (x in obj) {
document.getElementById("salida").innerHTML += x;
}
2.- Utilizando JQuey.
En el apartado anterior vimos como abrir ficheros del lado del cliente utilizando
javascript. Si queremos leer ficheros del lado del servidor tendremos que utilizar
otra técnica como PHP, AJAX o bien el framework JQuery.
jQuery es UN FRAMEWORK multiplataforma de JavaScript que permite

simplificar la manera de interactuar con los documentos HTML, manipular el
árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con
la técnica AJAX a páginas web
En este ejercicio trabajaremos con el fichero datos.json cuyo contenido es el

siguiente:
{
"Nombre": "Antonio Perez",
"Domicilio": "La Unión,3",
"DNI": "30675453"
}
Este fichero debe estar ubicado en el servidor en cualquier carpeta de trabajo

que esté dentro del directorio htdocs de xampp. La página html que procesa este
fichero también debe estar en el servidor en la misma carpeta (aunque no es
necesario).
La página index.html contiene el código jquery que lee el fichero json.

Previamente hay que llamar a la API jquery
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Y después ejecutamos el siguiente código
<script>
$(document).ready(function () {
$("#boton1").click(function () {
$.getJSON( "datos.json", function( data ) {
alert(data.Nombre);
});
})
})
</script>
4
La línea
// aqui el código jquery
}
Es imprescindible y su función es asegurarse de que la jerarquía DOM se ha

cargado satisfactoriamente
La Línea
Programa el objeto cuyo ID es “boton1” de forma que al pulsar sobre el se dispara

el código que está dentro de la función.
Este código es el que permite leer el fichero json y cargarlo en un objeto

javascript llamado data (podría ser cualquier otro nombre)

alert(data.Nombre);
});
Despues, utilizamos la nomenclatura de objetos para extraer la propiedad

nombre y escribir su valor en una ventana.
El ejercicio completo sería el siguiente:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
alert(data.Nombre);
}); }) })
</script>
</head>
<body>
<input type="button" id="boton1" value="mostrar" onClick="mostrar()">
</body>
</html>
5
3.- La API de Yahoo.
Yahoo User Interface(YUI) es una biblioteca escrita en JavaScript para la

construcción de aplicaciones interactivas (RIA). Se utilizaba para el desarrollo de
aplicaciones web con apariencia de aplicaciones de escritorio, con componentes
vistosos y personalizables y con una fuerte presencia de llamadas AJAX.
La biblioteca está completamente documentada en su página web y se compone

de seis componentes: Núcleo YUI, utilidades, controles UI, componentes CSS,
herramientas de desarrollo y de construcción.
La primera operación que debemos realizar es la llamada a la API
<script src="http://yui.yahooapis.com/3.18.1/build/yui/yui-min.js"></script>
yui-min.js es el núcleo de la API y ocupa sólo 89 Kb.
Supongamos que tenemos una cadena Javascript con la siguiente estructura

JSON:
var jsonString = '{ "alumnos" : [' +

'{ "nombre":"Juan" , "apellido":"Sanchez" },' +
'{ "nombre":"Ana" , "apellido":"Perez" },' +
'{ "nombre":"Pedro" , "apellido":"Gomez" } ]}';
El objetivo es trasladar esta cadena a una objeto Javascript para poder trabajar
con él.
Dentro de las muchas funciones que tiene este framework no interesa el

parseador de json.
YUI().use('json-parse', function (Y)
Hemos creado un parseador con el nombre Y
Ahora lo convertimos a un objeto javascript
var data = Y.JSON.parse(jsonString);
Y ya podemos trabajar con este objeto.
var p=data.alumnos.length;
alert("Número de entradas " + p);
El ejemplo completo sería:
<html><head>
6
<script>
// Trabajando con json
function inicio()
{
YUI().use('json-parse', function (Y) {
var jsonString = '{ "alumnos" : [' +

'{ "nombre":"Juan" , "apellido":"Sanchez" },' +
'{ "nombre":"Ana" , "apellido":"Perez" },' +
'{ "nombre":"Pedro" , "apellido":"Gomez" } ]}';
// controlar los errores
try {
}
catch (e) {
alert("Datos no válidos");
}
var p=data.alumnos.length;
alert("Número de entradas " + p);
})
}
</script>
</head><body>
<input type="button" value="LEER" onClick="inicio()"><br>
</body></html>
El resultado sería el siguiente:
En el siguiente ejemplo mostramos los datos del objeto en forma de tabla
<html>
<head>
<script>
// Trabajando con json
function inicio()
{
YUI().use('json-parse', function (Y) {
7
// Definimos un Array formado por 4 elementos

var jsonString = '[ {"nombre":"Antonio Serrano",
"Curso":"1ASIR"},{"nombre":"Luis Marín", "Curso":"1ASIR"},{"nombre":"María
Jimenez", "Curso":"1ASIR"},{"nombre":"Marcos Ruiz", "Curso":"1ASIR"}]';
// JSON.parse convierte en objeto javascript
try {
}
catch (e) {
alert("Datos no válidos");
}
var p=data.length;
document.write ("<center><table border='1' width='30%'>");
for (i=0;i<p;i++)
document.write("<tr><td>" +data[i].nombre + "</td><td>" + data[i].Curso +
"</td></tr>");
document.write ("</table></center>");
})
}
</script>
</head>
<body>
<input type="button" value="Abrir" onClick="inicio()"><br>
</body>
</html>
El resultado sería:
8

Unidad 3 - Leyendo Ficheros JSON

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Unidad 3 - Leyendo Ficheros JSON

Încărcat de

Drepturi de autor:

Formate disponibile

ADMINISTRACIÓN DE SISTEMAS INFORMÁTICOS .

Unidad 3 – Leyendo ficheros JSON

1.- Lectura de ficheros con JavaScript

A continuación se indican las interfaces que ofrece la especificación para

1. File: representa un archivo individual que proporciona información de

Cuando se utiliza junto con las estructuras de datos estándad, la interfaz de

En primer lugar, se debe comprobar que el navegador sea totalmente compatible

// Chequeo del navegador con varias APIS utilizadas

Después de obtener una referencia de File, crea instancias de un objeto

A continuación, se indican las cuatro opciones de lectura asíncrona de archivo

1. FileReader.readAsBinaryString(Blob|File): la propiedad result

Una vez que se ha activado uno de estos métodos de lectura en el objeto

// Cuando éste evento se dispara, los datos están ya disponibles.

Se accede a un objeto mediante el nombre del objeto y la clave que queremos

Otra forma de acceder es utilizarlo como un array asociativo

Se pueden obtener todos las claves de un JSON mediante un bucle. En nuestro

2.- Utilizando JQuey.

jQuery es UN FRAMEWORK multiplataforma de JavaScript que permite

En este ejercicio trabajaremos con el fichero datos.json cuyo contenido es el

Este fichero debe estar ubicado en el servidor en cualquier carpeta de trabajo

La página index.html contiene el código jquery que lee el fichero json.

Y después ejecutamos el siguiente código

Es imprescindible y su función es asegurarse de que la jerarquía DOM se ha

Programa el objeto cuyo ID es “boton1” de forma que al pulsar sobre el se dispara

Este código es el que permite leer el fichero json y cargarlo en un objeto

$.getJSON( "datos.json", function( data ) {

Despues, utilizamos la nomenclatura de objetos para extraer la propiedad

El ejercicio completo sería el siguiente:

3.- La API de Yahoo.

Yahoo User Interface(YUI) es una biblioteca escrita en JavaScript para la

La biblioteca está completamente documentada en su página web y se compone

La primera operación que debemos realizar es la llamada a la API

Supongamos que tenemos una cadena Javascript con la siguiente estructura

var jsonString = '{ "alumnos" : [' +

Dentro de las muchas funciones que tiene este framework no interesa el

YUI().use('json-parse', function (Y)

Hemos creado un parseador con el nombre Y

Ahora lo convertimos a un objeto javascript

var data = Y.JSON.parse(jsonString);

Y ya podemos trabajar con este objeto.

El ejemplo completo sería:

var jsonString = '{ "alumnos" : [' +

El resultado sería el siguiente:

En el siguiente ejemplo mostramos los datos del objeto en forma de tabla

// Definimos un Array formado por 4 elementos

S-ar putea să vă placă și