El uso más común de JSON consiste en leer datos desde un servidor y presentarlos en una web, para lograr este objetivo tenemos dos funciones en javascript que vamos a ver a continuación; parse y eval y para realizar nuestro ejemplo utilizaremos el JSON del articulo anterior:
Hay que fijarse de que ahora nuestro JSON esta dentro de una variable que lo construye como tal, aunque hay que tenerlo en cuenta en este ejemplo, pronto veremos que eso no será necesario, ya que los archivo JSON deben de ir fuera de nuestro script.
var notas = '{"clasificaciones" : [' +
'{ "nombre":"Paco Perez", "curso":"4º","nota":"6.25" },' +
'{ "nombre":"Manuel Rodriguez", "curso":"3º", "nota":"5.00"},' +
'{ "nombre":"María", "curso":"López", "nota":"7.15" } ]}';
Hay que fijarse de que ahora nuestro JSON esta dentro de una variable que lo construye como tal, aunque hay que tenerlo en cuenta en este ejemplo, pronto veremos que eso no será necesario, ya que los archivo JSON deben de ir fuera de nuestro script.
JSON.parse()
La funcion JSON.parse() convierte los archivos JSON en objetos javascript utilizando la siguiente forma:
Y de este modo ya podemos utilizar este objeto en nuestra página.
De este modo obtenemos de resultado:
María López 7.15
Si nos fijamos en como se accede a la infomación vemos que es por medio del objeto que hemos creado (obj), llamando a una propiedad que es como se declara el array dentro del JSON (clasificaciones) en el cual se le introduce el índice del elemento ([2]) y finalmente la siguiente propiedad que es la que recoge los valores.
Pero eval tiene algunos problemas, y es que compila y ejecuta todo javascript, por lo que puede dar problemas de seguridad y debe de ser evitada en la medida de lo posible, por lo que es mucho más seguro utilizar parse en lugar de eval, ya que la funcion parse solo reconoce el texto JSON y no compila los scripts, lo cual también hace que parse sea mucho más rápida que eval
var obj = JSON.parse(notas);
Y de este modo ya podemos utilizar este objeto en nuestra página.
<html>
<body>
<h2>Creando un objeto JavaScript con JSON</h2>
<p id="demo"></p>
<script>
var notas = '{"clasificaciones" : [' +
'{ "nombre":"Paco Perez", "curso":"4º","nota":"6.25" },' +
'{ "nombre":"Manuel Rodriguez", "curso":"3º", "nota":"5.00"},' +
'{ "nombre":"María", "curso":"López", "nota":"7.15" } ]}';
var obj = JSON.parse(notas);
document.getElementById("demo").innerHTML = obj.clasificaciones[2].nombre + " " + obj.clasificaciones[2].curso + " " + obj.clasificaciones[2].nota;
</script>
</body>
</html>
De este modo obtenemos de resultado:
María López 7.15
Si nos fijamos en como se accede a la infomación vemos que es por medio del objeto que hemos creado (obj), llamando a una propiedad que es como se declara el array dentro del JSON (clasificaciones) en el cual se le introduce el índice del elemento ([2]) y finalmente la siguiente propiedad que es la que recoge los valores.
eval
De forma muy similar funciona la función eval(), tan solo hay que cambiar la línea donde declaramos el objeto por:
var obj = eval ("(" + notas + ")");
Pero eval tiene algunos problemas, y es que compila y ejecuta todo javascript, por lo que puede dar problemas de seguridad y debe de ser evitada en la medida de lo posible, por lo que es mucho más seguro utilizar parse en lugar de eval, ya que la funcion parse solo reconoce el texto JSON y no compila los scripts, lo cual también hace que parse sea mucho más rápida que eval
No hay comentarios:
Publicar un comentario