En el mundo del desarrollo web, mas pronto o mas tarde llega el momento en el que necesitamos gestionar de forma mas ágil y sencilla la información debido al alto numero de datos que tenemos que almacenar, una alternativa mas liviana y fácil de usar que XML es JSON, una sintaxis de envío y recepción de datos en formato de texto que puede ser leído y utilizado como un formato de datos por cualquier lenguaje de programación.
JSON es el acrónimo de Javascript Object Notation, utiliza el código Javascript como modelo de datos y está definido en la tercera edición del estándar de Lenguaje de programación ECMAScript [ECMA], aunque esto no quiere decir que tenga que ir unido necesariamente a Javascript, es evidente que la sencillez y simplicidad con la que podemos trabajar en Javascript con JSON ha generado un gran numero de seguidores de esta alternativa.
JSON es un estándar basado en texto plano por lo que puede ser interpretado por cualquier lenguaje de programación y compartir información con otros lenguajes distintos, uno de los ejemplos donde podemos trabajar con JSON es en aplicaciones interactivas que utilicen AJAX, donde será más sencillo el envío y recepción de los datos.
Datos
Vamos a ver la sintaxis de JSON, en primer lugar veremos los datos, estos se definen con una pareja de nombre/valor entre comillas dobles, primero se define el nombre y seguido de dos puntos se define el valor, el valor puede ser un dato de varios tipos, un número, una cadena, un booleano, un array, un objeto o un valor null.
"articulo":"cocina"Objetos
Los objetos se escriben entre llaves { } y pueden contener múltiples datos (parejas de nombre/valor) separados por comas.
{"articulo":"cocina", "seccion":"24"}Arrays
Los arrays se escriben entre corchetes [ ] y pueden contener múltiples objetos separados por comas.
[
{"articulo":"cocina", "seccion":"24"},
{"articulo":"puerta", "seccion":"19"},
{"articulo":"campana", "seccion":"18"}
]Los arrays tambien se pueden ecribir de esta forma.
"almacen":[
{"articulo":"cocina", "seccion":"24"},
{"articulo":"puerta", "seccion":"19"},
{"articulo":"campana", "seccion":"18"}
]Javascript
De momento es suficiente teoria para comenzar a practicar, que es como se aprende en programación, ¡programando!, asi que vamos a implementar el uso de este tipo de sintaxis mediante código Javascript, utilizando una sintaxis muy parecida a la del ejemplo anterior
<div id="exist"></div>
<script>
var almacen = [
{
"articulo":"cocina",
"seccion":"24"
},
{
"articulo":"puerta",
"seccion":"19"
},
{
"articulo":"campana",
"seccion":"18"
},
];
document.getElementById("exist").innerHTML = "Articulo: " +
almacen[0].articulo + " - " + "Seccion: " + almacen[0].seccion;
</script>Resultado
Articulo: cocina – Seccion: 24
Podemos acceder tambien de esta otra forma
document.getElementById("exist").innerHTML = "Articulo: " +
almacen[0]["articulo"] + " - " + "Seccion: " + almacen[0]["seccion"];Y alterar los datos de esta otra forma
almacen[0].articulo="Cocina blanca";
document.getElementById("exist").innerHTML = "Articulo: " +
almacen[0]["articulo"] + " - " + "Seccion: " + almacen[0]["seccion"];Articulo: Cocina blanca – Seccion: 24
Vamos a crear un ejemplo real, crearemos una carpeta en la que vamos a tener dos archivos en los que incluiremos el siguiente código:
pruebadatos.json
[
{
"articulo":"cocina",
"seccion":"24"
},
{
"articulo":"puerta",
"seccion":"19"
},
{
"articulo":"campana",
"seccion":"18"
}
]index.php
...
<div id="exist"></div>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "pruebadatos.json";
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
myFunction(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(response) {
var arr = JSON.parse(response);
var i;
var out = "";
for(i = 0; i < arr.length; i++) {
out += "Artculo: " +
arr[i].articulo +
"<br>Seccion: " +
arr[i].seccion +
"<br><hr>";
}
document.getElementById("exist").innerHTML = out;
}
</script>
...Resultado
Listado
Artculo: cocina
Seccion: 24
Artculo: puerta
Seccion: 19
Artculo: campana
Seccion: 18
Vamos a repasar el código del ejemplo, del archivo .json hay poco que explicar que no hayamos visto ya, el nombre del array no está definido porque se ha generado por medio de PHP, la mayoria de veces que usemos un archivo JSON será para enlazar información con alguna base de datos, normalmente esta información será generada por un lenguaje de parte del servidor como PHP, asi que seguiremos los estándares y basaremos el articulo en estos lenguajes de uso mas extendido.
En el index.php, el elemento <div> con identificador “exist” será el encargado de mostrar el código que generaremos con JS.
En el script creamos un objeto XMLHttpRequest() con el que podemos recibir cualquier tipo de datos sin recargar la página, la variable “url” será la encargada de mostrar la ruta del archivo JSON, hacemos una petición por GET con el método open(), y enviamos la solicitud con el método send().
En la función, creamos tres variables, con la primera “parseamos” el archivo .json, la siguiente será la variable que recorrerá el bucle “for” para mostrarnos los datos, por último creamos una variable con un valor vacio que será la que contendrá los datos que mostramos con un innerHTML.
Seguridad
En todas las funciones que hemos declarado, henos utilizado la función “JSON.parse()”, esta función convierte un texto JSON en un objeto de Javascript, otra forma de acceder a estos datos es la función “eval()”, pero esta función está en cierta medida desaconsejada ya que puede compilar y ejecutar cualquier código Javascript, por lo que se convierte en un problema potencial de seguridad, en ciertos casos se puede usar, pero te aconsejo que compruebes la protección de tu sitio frente a ataques externos y no uses esta función sin tener cierto grado de experiencia en seguridad de datos y servidores.
jQuery
Como ya he dicho en varias ocasiones en este articulo, JSON es el mejor formato con el que podemos trabajar para enviar y recibir datos si estamos utilizando AJAX, si en Javascript nos puede resultar relativamente sencillo acceder a los datos por este medio, el framework de jQuery nos facilita todavía mas esta tarea con el método getJSON().
Utilizamos de nuevo el mismo archivo JSON para acceder con jQuery.
No olvides inculir el CDN de jQuery en el <head>
<div id="exist"></div>
<script>
$.getJSON('pruebadatos.json', function(data) {
var output="";
for (var i in data) {
output+="Articulo: " + data[i].articulo + " - Seccion: " + data[i].seccion + "<br>";
}
document.getElementById("exist").innerHTML=output;
});
</script>Articulo: cocina – Seccion: 24
Articulo: puerta – Seccion: 19
Articulo: campana – Seccion: 18
Como vimos al principio de este articulo, en ocasiones nos encontraremos archivos en los que están definidos los nombres de los arrays y la estructura del archivo es diferente a la que hemos visto hasta ahora, por lo que este código nos va a generar errores, para entenderlo mejor voy a mostrar un ejemplo.
pruebadatos2.json
{
"almacen":[
{
"articulo":"cocina",
"seccion":"24"
},
{
"articulo":"puerta",
"seccion":"19"
},
{
"articulo":"campana",
"seccion":"18"
}
]
}El array se ha definido con el nombre “almacen”, por lo que debemos modificar el código del script
<div id="exist"></div>
<script>
$.getJSON('pruebadatos2.json', function(data) {
var output="";
for (var i in data.almacen) {
output+="Articulo: " + data.almacen[i].articulo + " - Seccion: " + data.almacen[i].seccion + "<br>";
}
document.getElementById("exist").innerHTML=output;
});
</script>Este es el resultado
Articulo: cocina – Seccion: 24
Articulo: puerta – Seccion: 19
Articulo: campana – Seccion: 18
Puedes ver el código de este archivo en mi cuenta de GitHub
Puedes encontrar mas información en la Documentación oficial de JSON
Valoraciones
Sé el primero en valorar