adsense

XRL Tech Corner

Tutoriales online de programación, CMS, Raspberry y artículos sobre tecnología.

Que es json

En este tutorial vamos a entender que es json. Vamos a validar json, para qué se utiliza, qué formato tiene, y cómo se usa. Además se  puede validar json online en nuestra herramienta online para comprobar que una cadena JSON sea correcta. Por último vamos a poner un ejemplo json con javascript y html.

 

tutorial json

Qué significa JSON?

Pues json es el acrónimo de Java Script Object Notation.

Se pronuncia en inglés como "yeison", que también es un nombre propio en inglés (Jason).

 

Para qué sirve json?

Es un formato para encapsular datos, y que se suele usar en tecnologías relacionadas con Javascript.

Aunque se puede utilizar JSON con java, php, c#, entre otros.

 

 

Dónde se usa json?

Es un alternativa al formato habitual XML, donde los datos van encapsulados por etiquetas o tags.
También es un formato para el intercambio de información entre diferentes módulos, o sistemas. Es ligero y rápido.
Tiene muchas analogías a nivel sintáctico con Javascript, con lo que se puede pasar de un objeto Javascript a JSON y viceversa fácilmente.
Se usa habitualmente también para aplicaciones AJAX.  

 

Por qué usar JSON

Con el aumento de los sitios con tecnología AJAX, cada vez es más importante que los sitios puedan cargar datos de forma rápida y asíncrona sin retrasar la capa de visualización de las páginas. Si cambiamos el contenido de un elemento dentro de nuestra página sin realizar una actualización de la página añade un factor importante a nuestra web, sin mencionar la comodidad añadida para nuestros usuarios.

JSON nos permite superar el problema del "cross domain", ya que podemos utilizar un método llamado JSONP que utiliza una función de retorno de llamada para enviar los datos JSON de nuevo a nuestro dominio. Es esta funcionalidad lo que hace a JSON tan útil, ya que abre un montón de posibilidades que anteriormente eran difíciles de resolver.

 

Validar json

Hemos creado una herramienta para visualizar y validar json online. El funcionamiento es muy sencillo, basta con pegar la cadena de json en la caja de texto y hacer clic en el botón Validar. Se mostrará una representación del objeto visual separada por campos clave/valor y el resultado de la validación.

 

Cómo usar json?

La sintaxis es muy sencilla:
 Los datos están distribuidos en pares nombre: valor.  El nombre va entre comillas dobles y es un identificador de una propiedad.
 El valor puede ser un string (un texto), un número (entero o decimal), un booleano (verdadero o falso), una fecha (que es un objeto), un array entre corchetes, un objeto entre llaves, o un null.
 Los datos de los pares nombre:valor van separados por comas entre sí.
 Las llaves {...} definen objetos.
 Los corchetes [...] definen arrays.
Si se almacena en un fichero la extensión suele ser .json y el formato MIME es aplication/json.

Para definir un formato json en blanco se puede describir como {}.

Posteriormente se pueden ir añadiendo los diferentes pares nombre:valor que seran las propiedades de ese objeto en formato json.
Más abajo podéis ver un ejemplo de un texto en formato json.


Para parsear unos datos en JSON desde Javascript se utiliza la sentencia parse:
var objeto = JSON.parse(json);

Para navegadores antiguos que no tienen la api de JSON se puede usar eval para parsear:

var obj = eval ("(" + text + ")");

aunque tiene ciertas agujeros de seguridad, por lo que no debería utilizarse.

Tal como decíamos se puede usar Javascript para convertir un objeto JSON en HTML.

 

Cómo usar json en javascript?

Vamos a ver un ejemplo. Podemos definir unos datos JSON llamado "Mi Blog" que contiene un array de tres objetos que son los "artículos" que a su vez tienen los campos de id, url, titulo, fecha, visitas y cuerpo.

Mediante Javascript podemos parsear los datos JSON y transformalo a un objeto de Javascript regular que contiene un array de 3 elementos donde cada uno de ellos es un "artículo".
En cada post podemos acceder a sus campos con el punto "."

Al pinchar en el botón de abajo "Transformar JSON a HTML" dinámicamente podemos ir añadiendo un "div" por cada post que tenga el array al HTML y de este modo podemos rellenar un bloque de información que puede provenir de otro servidor mediante ajax, de una base de datos, de un fichero json, etc...:


Aquí abajo tenéis el código fuente del css, javascript, y json necesario para el ejemplo.
Si pincháis en el botón que comentamos antes se añadirá dinámicamente un bloque de información con cada "artículo" en la página.

{"nombre":"Mi Blog",
"posts":[{"id":1,
"url":"http://www.xrltechcorner.com/2016/02/instalar-y-configurar-un-foro-phpbb-en.html",
"titulo":"Instalar y configurar un foro phpBB en Ubuntu 14.04",
"visitas":250,
"fecha":"2016-11-05T14:00:00Z", 
"cuerpo":"Bienvenidos a la última parte de este conjunto de tutoriales creados para instalar y configurar un foro phpBB . Este post es la continuaci..."}, 
{"id":2,
"url":"http://www.xrltechcorner.com/2016/06/mejores-trucos-para-simcity-buildit.html", 
"titulo":"Los 5 mejores trucos para SimCity BuildIt", 
"visitas":190,
"fecha":"2016-11-01T14:00:00Z", 
"cuerpo":"Hoy inauguramos una nueva categoría del blog llamada Gaming  donde publicaremos artículos relacionados con algunos de los Juego..."}, 
{"id":3,
"url":"http://www.xrltechcorner.com/2016/02/instalar-y-configurar-tu-propia-nube.html", 
"titulo":"Instalar y configurar tu propia nube privada Owncloud en Ubuntu 14.04",  
"visitas":150,
"fecha":"2016-10-05T14:00:00Z", 
"cuerpo":"Hola a todos, en el post de hoy vamos a continuar con el tercer paso del tutorial : cómo montar tu propio Dropbox o Google Drive en casa..."}]}




 




Valora este artículo del blog:
Tutorial Bootstrap
Instalar Moodle Ubuntu

Artículos relacionados

 

Comentarios

No hay comentarios por el momento. Se el primero en enviar un comentario.
¿Ya està registrado? Ingresa Aquí
Invitado
Viernes, 20 Octubre 2017
Si desea registrarse, por favor rellene los campos de nombre de usuario y nombre.

Imagen Captcha