Aprende JSON en 5 minutos: JSON para principiantes

¿Qué es JSON y por qué es importante?

JSON, también conocido como JavaScript object notation, es un formato sencillo de representación de datos muy parecido a XML y YAML. Se utiliza ampliamente en Internet para casi todas las API a las que se accede. También encuentra un amplio uso en diversas áreas de la programación, tales como archivos de configuración y aplicaciones como juegos, editores de texto, y VS Code.

JSON se utiliza en todas partes debido a su naturaleza ligera, derivada de su pequeño tamaño de archivo. Este atributo hace que JSON sea ideal para la transmisión de datos. En comparación con otros formatos como XML, JSON es más fácil de leer, ya que es más limpio. Carece de las numerosas etiquetas de apertura y cierre que suelen aparecer en otros formatos.

Dado que JSON es un superconjunto de JavaScript, cualquier fragmento de código escrito en JSON es JavaScript válido. La integración con JavaScript, un lenguaje utilizado universalmente en la web tanto para el desarrollo front-end como back-end, resulta así extraordinariamente fluida.

Además, prácticamente todos los principales lenguajes de programación vienen equipados con una biblioteca o funcionalidad integrada para analizar JSON y convertirlas en objetos o clases. Esta función simplifica considerablemente la tarea de trabajar con datos JSON en distintos lenguajes de programación.

A lo largo de tu carrera como programador, interactuarás frecuentemente con JSON, ya sea desarrollando una API, consumiendo una o creando archivos de configuración. Tanto si estos archivos son para tu uso personal o para un uso más amplio en tus aplicaciones, JSON es una herramienta esencial en tu arsenal de programación.

Tipos de datos en JSON

JSON puede representar varios tipos de datos, entre ellos:

1. Strings: Se trata de secuencias de caracteres.
2. Números: Pueden tener cualquier formato: números decimales, números enteros, números negativos o incluso números en notación científica.
3. Booleans: Pueden ser verdadero o falso.
4. Null: Esto significa nada o nulo.
5. Arrays: Puede ser una lista de cualquiera de los tipos anteriores.
6. Objetos: Son colecciones de pares clave-valor. El valor puede ser cualquiera de los tipos mencionados.

Creación de un archivo JSON

Para crear un archivo JSON, es necesario:

1. Crea un archivo con la extensión .json.
2. Rellenar el archivo con tipos de datos JSON válidos (los tipos de datos vistos anteriormente).

Podríamos incluir stings, un número, un boolean o cualquier otro tipo de dato válido. Sin embargo, hay que tener en cuenta que, aunque se pueden incluir números o strings en un archivo JSON, es posible que estos valores independientes no aprovechen toda la potencia de JSON. A menudo es más práctico tener una matriz (arrays) o un objeto en la raíz de su archivo, que luego puede abarcar otros valores.

Tu array u objeto puede albergar otros objetos o arrays anidados, así como valores individuales como strings o números. En este anidamiento y estratificación reside la verdadera potencia de JSON, que permite crear datos complejos y profundamente estructurados.

Ejemplo:

Vamos a crear un archivo user.json con un objeto como nivel superior. Para crear el objeto, usamos llaves { }. A continuación, dentro de las llaves, ponemos todos los pares clave/valor que componen nuestro objeto.

La clave debe ir entre comillas dobles, seguida de dos puntos y del valor de la clave. Ejemplos: "nombre": "John Doe", "numeroFavorito": 7, "esProgamador": true.

Cuando tenemos varios pares clave/valor, necesitamos comas para separar cada uno de nuestros pares clave/valor, como haríamos normalmente al trabajar con matrices.

El objeto en nuestro ejemplo será un usuario, con propiedades como nombre, número favorito y si es programador o no.

{
    "nombre": "John Doe",
    "numeroFavorito": 7,
    "esProgramador": true,
    "pasatiempos": ["programar", "leer", "videojuegos"],
    "amigos": [
        {
            "nombre": "Jane Doe",
            "numeroFavorito": 5,
            "esProgramador": false,
            "pasatiempos": ["pintura", "leer", "música"]
        },
        {
            "nombre": "Bob Ross",
            "numeroFavorito": 9,
            "esProgramador": true,
            "pasatiempos": ["pintura", "cocina"]
        }
    ]
}

En el JSON anterior, tenemos un objeto con arrays y objetos anidados, creando una jerarquía de datos.

Uso de un archivo JSON en JavaScript

Vamos a usar un archivo JSON. Crearemos un archivo escuelas.json que almacenará una matriz de escuelas. Cada escuela tendrá un nombre, un número de estudiantes, un director y una calificación.

Ejemplo:

Este es nuestro archivo escuelas.json:

[
    {
        "nombre": "Big School",
        "numeroDeEstudiantes": 2000,
        "Director": "Peter",
        "calificacion": 4.7
    },
    {
        "nombre": "Small School",
        "numeroDeEstudiantes": 300,
        "Director": "Diana",
        "calificacion": 4.1
    }
]

Como hemos comentado antes, cualquier cosa en JSON es JavaScript válido, por lo que podríamos coger este JSON directamente y simplemente pegarlo en un archivo JavaScript o HTML (usando la etiqueta <script>) y podríamos manipular los datos sin problemas

Sin embargo, la mayoría de las veces que estamos tratando con JSON, vamos a recibirlo de vuelta como string y no como un objeto JavaScript real. Esto significa que en realidad no podemos utilizar este objeto dentro de nuestro JavaScript.

Para convertir esta string JSON en un objeto JavaScript, necesitamos utilizar JSON.parse( ).

Ahora, echemos un vistazo a este archivo HTML, donde incluimos JavaScript usando la etiqueta <script>. Para el comportamiento común de JSON en nuestro ejemplo, rodearemos los datos con backticks.

<script>
    // This is our JSON data
    const schools =  `[
    {
        "name": "Big School",
        "numberOfStudents": 2000,
        "Director": "Peter",
        "rating": 4.7
    },
    {
        "name": "Small School",
        "numberOfStudents": 300,
        "Director": "Diana",
        "rating": 4.1
    }
]`; /
    const schoolsObject = JSON.parse(schools);

    // Now we can use treat the data as a normal JavaScript object
    console.log(schoolsObject[0].name); // Logs "Big School"
    console.log(schoolsObject[1].name); // Logs "Small School"
</script>

En el ejemplo anterior, convertimos la string JSON en un objeto JavaScript mediante JSON.parse(). A continuación, accedemos a los nombres de las escuelas desde el objeto JavaScript.

Conclusión

JSON es un formato de representación de datos fácil de leer, ligero y que, cuando se transmite por Internet, utiliza un espacio mínimo, lo que mejora la experiencia del usuario.

La sintaxis de JSON es sencilla. Los puntos clave que hay que recordar son utilizar comillas dobles alrededor de las claves, seguidas de dos puntos y, a continuación, el valor de esa clave. Las comas se utilizan para separar varios pares clave/valor.

Por último, al tratar con datos JSON, normalmente los obtendríamos como una string. Por lo tanto, para convertirlo en un objeto JavaScript normal, utilizamos JSON.parse( ).