JSON

> Temas > JSON
Editar

JSON es un lenguaje usado para el intercambio de datos entre sistemas, está basado en la notación de los literales de objeto de Javascript.

JSON son las siglas de JavaScript Object Notation, o sea, Notación de Objeto Javascript. Básicamente usa la misma notación o forma con la que se escriben los objetos Javascript en el código, los literales de objeto, con algunas restricciones y añadidos extra.

La utilidad de JSON es la de intercambiar datos, por eso se conoce como lenguaje de intercambio de información o lenguaje de transporte. Sirve para la comunicación entre servicios web (web services) y los clientes que los consumen, enviándo y recibiendo la información en formato JSON.

Las ventajas de JSON son:

  • La lectura del código es de fácil lectura y la información es suficienteme expresiva para poder ser leída por personas además de máquinas.
  • El tamaño de los archivos que se transfieren es ligero.
  • El código está basado en el lenguaje Javascript, lo que es ideal para las aplicaciones web.
  • Todos los lenguajes disponen de funciones para interpretar cadenas JSON y convertir datos en cadenas JSON válidas.
  • Se escribe en archivos de texto plano con codificación UTF8, que es compatible con todos los sistemas.

Estas ventajas son especialmente interesantes en el entorno web, ya que Javascript es el lenguaje de programación para frontend y el código es directamente entendible por cualquier sistema que soporte Javascript. Esta facilidad de procesamiento del JSON y su ligereza para la transmisión lo hacen ideal como formato de intercambio de información y por eso es ampliamente usado, mucho más que otras alternativas como podría ser el lenguaje XML. Por estos motivos, la mayoría de los servicios web que se construyen para ser consumidos por clientes web se implementan bajo JSON.

Más información:

Ejemplo de código JSON

Aquí podemos ver un ejemplo de un código en formato JSON.

{
  "nombre":"Jonh Doe",
  "profesion":"Programador",
  "edad":25,
  "lenguajes":["PHP","Javascript","Dart"],
  "disponibilidadParaViajar":true,
  "rangoProfesional": {
      "aniosDeExperiencia": 12,
      "nivel": "Senior"
  }
}

Los archivos JSON pueden tener cualquier nivel de anidación que sea necesario, ya que podemos colocar unos objetos dentro de otros, creando un árbol de datos de cualquier profundidad.

Editar

Reglas de sintaxis en JSON

Los archivos en formato JSON tienen las mismas reglas de sintaxis del lenguaje Javascript. Pero además necesitan cumplir algunas normas adicionales, que no son necesarias en los literales de objeto Javascript:

  • Todos los archivos de JSON representan una de estas dos estructuras: 1) un objeto, es decir, una lista de pares clave / valor. 2) una colección de elementos, lo que se conoce como array o arreglo.
  • Los archivos JSON que representan objetos comienzan siempre con una llave de inicio { y acaban con la llave de cierre }.
  • Los archivos JSON que representan una lista de valores, es decir, un arreglo, comienzan por [ y terminan por ].
  • Se deben usar siempre comillas dobles a la hora de encerrar cadenas y nombres de los atributos del objeto.
  • Todos los nombres de los atributos del objeto deben tener comillas necesariamente.
  • Cada elemento del objeto JSON se separa del siguiente con una coma (,). Pero no debe haber una coma después del último.
  • El archivo transferido en un JSON debe ser necesariamente codificado como UTF8

Editar

Por qué JSON ha sido adoptado para la mayoría de los servicios web en lugar de XML

JSON es un formato de intercambio de información. Pero no es el único. De hecho, XML ha sido mucho más tradicional entre las alternativas de formatos para comunicación entre sistemas distribuidos. Sin embargo, JSON ha sido quien ha resultado como ganador en esta lucha entre formatos.

Actualmente JSON es la primera alternativa para compartir información, debido principalmente a que procesar en JSON es prácticamente inmediato en el lado del cliente. Es verdad que en el lado del servidor también resulta un formato ligero y soportado por todos los lenguajes, pero la clave está en el lado del frontend.

JSON es Javascript y parsearlo para que pueda ser introducido en la memoria del navegador, como un objeto nativo Javascript es prácticamente inmediato, no requiere coste alguno para el intérprete de Javascript. Esta situación es inmensamente más favorable que la que nos ofrece XML, que también se podría procesar por Javascript, pero que requeriría algoritmos mucho más costosos, en los que impicaría un recorrido a un árbol de etiquetas, la creación de las propiedades de los objetos en memoria, una a una, etc. Eso, sin contar con los posibles errores de escritura del XML, como una hipotética etiqueta mal cerrada, que obligarían al intérprete de Javascript a gastar mucho más tiempo.

Es cierto que los ordenadores actuales tienen suficiente capacidad de procesamiento para realizar todas estas tareas sobre un XML, pero son innecesarias ya que el formato JSON no necesita ningún trabajo adicional para poder interpretarse. Además, tenemos que pensar que las API REST o servicios web en general pueden ser consumidos por todo tipo de máquinas, no necesariamente un ordenador potente. Puede que se trate de un móvil de baja gama o un reloj, por ejemplo. En estos casos además con XML tendríamos el problema del consumo de batería para realizar todo ese procesamiento, lo que puede acortar el tiempo de funcionamiento de los sistemas y empeorar la experiencia de usuario. Si tenemos en cuenta además que en un acceso a una aplicación frontend moderna se pueden realizar decenas o cientos de consultas para obtener respuestas de un servicio web, esa necesidad de procesamiento extra en un XML se multiplicaría varias veces.

Por todo, JSON se ha impuesto sobre XML, aunque el propio XML tenga también otra serie de ventajas como lenguaje que también pueden ser apreciables en diversas situaciones. En la práctica el motivo fundamental de la elección es sobre todo la maximización del rendimiento de los clientes de las API.

Editar

Accediendo a un servicio web que devuelve JSON desde Javascript mediante fetch

Uno de los mecanismos más frecuentes de las aplicaciones modernas es el acceso a datos de servicios web, generalmente implementados mediante un API REST que devuelve archivos en formato JSON.

Esto se puede hacer mediante diversos mecanismos del lado del cliente. El más estándar sería Ajax y el uso de fetch, que es la nueva función de Javascript para el acceso a datos del servidor, que devuelve una promesa.

Fetch es una función a la que le indicamos la URL a la que queremos acceder.

fetch('https://url/del/servicio/web)

Esta función nos devuelve una promesa, que debemos que esperar que se resuelva. Una vez resuelta obtenemos uan respuesta, que nos indica los datos de la solicitud HTTP que se acaba de realizar.

.then(response => {
    // Código a ejecutar con la respuesta
})

Ahora bien, si esa respuesta era en formato JSON podemos acceder al objeto Javascript que representa ese JSON por medio del método response.json(). La dificultad es que este método devuelve a su vez otra promesa, que tenemos que encadenar.

El código completo de encadenar dos promesas sería el siguiente:

fetch('https://url/del/servicio/web')
  .then(response => response.json())
  .then(json => {
  // aquí tenemos el parámetro json que contien el dato que nos ha devuelto el servicio web.
  // podemos hacer cualquier cosa con él...
  console.log(json)
  });

Puedes encontrar más información de este mecanismo de acceso a datos del servidor en el artículo de fetch.

Editar

Funciones para JSON en Javascript

El trabajo en Javascript con JSON incluye un par de métodos de utilidad, que dependen del objeto global "JSON". Mediante éstos es posible convertir un objeto Javascript a una cadena JSON y viceversa.

JSON.Parse(cadena)

Esta función permite convertir una cadena en formato JSON en una variable Javascript que contiene la representación del valor de esa cadena.

var objeto = JSON.parse('{"nombre": "juan", "edad": 33, "casado": false}');

JSON.stringify(objeto)

Esta función Javascript convierte un objeto, un array u otro valor en su representación como cadena en formato JSON.

var coche = {
  modelo: "Ford Focus",
  anioFabricacion: "2020",
  motorizacion: 'Gasolina'
}
var cadena = JSON.stringify(coche);

Las funciones de JSON para Javascript están disponibles en todos los navegadores actualmente. En Internet Explorer fueron introducidas en IE8, por lo que se pueden usar con total tranquilidad en cualquier navegador existente.

Editar

¿Quieres añadir algo sobre JSON?

Crea artículos, recursos o comparte información sobre JSON

Crear un bloque

JSON

Manuales

Trabajar con JSON desde PHP
Manual para explicar el uso de JSON, la notación de objetos Javascript, dentro de aplicaciones web realizadas con PHP y...

Temas relacionados

Preguntas y respuestas

Se han recibido 1 faqs en JSON

Hacer una pregunta