JSON

En palabras sencillas, JSON (Javascript Object Notation) es una forma o notación para expresar información y sirve como intercambio de datos en aplicaciones. Actualmente, se podría decir que es la modalidad de los datos que se transportan a través de Internet. Existe también el formato de intercambio de datos XML que se asemeja a HTML (usando etiquetas que se abren y se cierran), con JSON se obtiene eficiencia y mejor legibilidad para el humano que el anterior formato, además es nativo en algunos lenguajes de programación como Javascript, Typescript, incluso Python y Dart.

Mientras años atrás se consultaban datos con gestores de bases de datos, actualmente se promueve el uso de micro-servicios web que devuelven JSON para ser interpretado por la interfaz de usuario (UI). En palabras más sofisticadas, se trata de un lenguaje de marcado con una orientación donde se determinan el valor de cada atributo o dato correspondiente. A continuación podemos ver un ejemplo.

Ejemplo esencial

{
    "success": true,
    "data": {
        "first_name": "John",
        "last_name": "Doe",
        "age": 30
    }
}

Nótese que se puede interpretar que data tiene los elementos first_name y age con sus respectvos valores.

Comprendiendo JSON

Del ejemplo se puede observar que:

Se usa apertura y cierre con el nombre de el atributo (dato o elemento) entre llaves, es decir: {...}
El atributo (o dato) se reporta entre comillas dobles: "..."
El valor también va entre comillas dobles si se trata de text, sino va el número o el valor booleano (true/false)
Los atributos se separan con comas así como cada grupo de atributos o elementos de una lista
En el caso de listas se usan corchetes en lugar de llaves, es decir: [...]

Las listas se usan cuando se trata de información en bloque (varios registros).

En otras palabras:

Se usan llaves y elementos recursivos (arreglos y objetos): [{...}, {...}, ...]
Atributos o elementos van entre comillas dobles, también las cadenas: "..."
El nodo raíz puede ser un objeto o un arreglo (lista)
Esta notación No admite comentarios (XML y YAML sí admiten comentarios)

Es bueno tener presente que en Javascript las listas se representan con [...], mientras los objetos con {...}. Se podría decir que la combinación de objetos y arreglos en Javascript es lo que se conoce como JSON.

Tipos de datos esenciales

Los tipos de datos esenciales (string, integer, float, boolean) se identifican por su contenido. Veamos:

{
  "string": "Ana",
  "integer": 10,
  "float": 3.1516,
  "boolean": true
}

Nótese que las cadenas se diferencian por el uso de comillas, mientras los flotantes usan el punto decimal distinguiéndose de los enteros.

Ejemplo complementario

Consideremos la siguiente tabla de información:

Row	First Name	Last Name	Age
1	John	Doe	30
2	Jane	Doe	25
3	Peter	Smith	45
.

Ahora veamos su representación en JSON:

[
    {
        "first_name": "John",
        "last_name": "Doe",
        "age": 30
    },
    {
        "first_name": "Jane",
        "last_name": "Doe",
        "age": 25
    },
    {
        "first_name": "Peter",
        "last_name": "Smith",
        "age": 45
    }
]

Nótese que se presenta una lista ([...]) que contiene objetos ({...}), que en este caso corresponden a cada fila con la información respectiva.

Fetch - Peticiones Web (sólo en el navegador)

Esta sentencia incluida en navegadores modernos se usa para procesar peticiones web con Javascript, proporcionando una propuesta alterna, sencilla y mejorada respecto a lo que se lograba con el uso de XMLHttpRequest (implementado en librerías como JQuery). En tanto una petición Web devuelve una respuesta, ésta se puede gestionar en JSON (ejemplo: res.json()) o texto (ejemplo: res.text()) según se tenga conocimiento de la API concreta. Veamos el siguiente ejemplo:

    event.preventDefault()
    var form = document.forms[0]
    var data = {
        username: form['username'].value,
        password: form['password'].value,
    }

    fetch('/user/login', {
        method: 'POST',
        headers: { 'Content-type': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(res => res.json())
    .then(data => {
        console.info(data)
    })
    .catch(err => {
        console.error(err.message)
    });

Si la API espera los datos de un formulario es probable que fetch requiera otro tipo de header, por ejemplo:

    fetch('/user/login', {
        method: 'POST',
        headers: { 'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8' },
        body: `username=${data.username}&password=${data.password}`
    })

Cuando se trata de solicitar datos directos, semejante a como se ingresa la dirección en un navegador (o para leer archivos de texto o JSON), aplica internamente el método GET y simplemente se usaría fetch con la dirección, así:

    fetch('/user/logged')

Una mayor referencia puede ser consultada en el siguiente enlace: https://developer.mozilla.org/es/docs/Web/API/Fetch_API/Utilizando_Fetch

© 2021 by César Arcila (onmind.co)