Artículo original escrito por Kolade Chris
Artículo original What is a JSON File? Example JavaScript Code
Traducido y adaptado por Santiago Yanguas
JSON son las siglas de "JavaScript Object Notation". Un archivo JSON, tiene como extensión los .json, además los datos que contiene son representados en un par llave:valor, igualmente que un objeto JavaScript tradicional.
Sin embargo, JSON y los objetos de JavaScript no son exactamente lo mismo. La diferencia principal es que la llave en JSON son los valores, aparte de los tipos número y nulo deben ir entre comillas dobles.
Si has trabajado con APIs durante tu trayectoria en programación, es probable que sepas lo que es JSON, porque muchos de los datos de las APIs vienen traen formato JSON.
Si, no has trabajado antes con APIs y eres principiante, no estás solo.
En este artículo, voy a explicarte en qué consiste el formato JSON y cómo puedes sacarle el máximo partido.
Sintaxis básica de JSON
{
"llave1": "valor1",
"llave2": "valor2",
"llave3": "valor3",
"llave4": 7,
"llave5": null,
"favAmigos": ["Kolade", "Nithya", "Dammy", "Jack"],
"favJugadores": {"uno": "Kante", "dos": "Hazard", "tres": "Didier"}
}
Tipos de datos JSON aceptados
JSON podemos definirlo como un objeto o un arreglo que puede contener varios objetos. Por lo tanto, objetos y arreglos son tipos de datos automáticamente aceptables en JSON. Otros tipos de datos que se admite son booleanos, nulos y cadenas de texto.
Los tipos de datos undefined, function y date no son compatibles con JSON.
Además, JSON también puede extenderse a otros tipos de datos adicionales que JSON puro no acepta.
Ejemplos de estas extensiones son GeoJSON y BSON. GeoJSON se utiliza para representar datos geográficos, mientras que BSON es utilizado por el popular proveedor de servicios de bases de datos MongoDB.
BSON, por ejemplo, acepta expresiones regulares, fechas y marcas de tiempo como tipos de datos, que JSON no acepta.
Reglas para sintaxis JSON
JSON es muy estricto en cuanto a los tipos de datos soportados. Si tienes un linter instalado en tu editor de código, te avisará inmediatamente de que hay un error cada vez que introduces un tipo de datos no soportado o vas en contra de las reglas de sintaxis.
Reglas de sintaxis JSON que hay que conocer:
- Todos los datos del archivo deben estar rodeados de llaves
{}si quieres representar un objeto y entre corchetes cuadrados si es un arreglo[]. - Las comillas simples no están permitidas.
- La llave en cada JSON debe ser única y debe estar entre comillas dobles.
- Los números no deben ir entre comillas dobles, de lo contrario se tratarán como cadenas de texto.
- El tipo de dato null no debe ir entre comillas dobles.
- Los valores booleanos solo pueden ser verdaderos o falsos.
- Cada par llave:valor debe terminar con una coma, excepto el último elemento
- Un solo objeto dentro de un arreglo debe terminar también con una coma.
Cómo se envían los datos JSON al cliente (navegador)
JSON surgió de la necesidad de enviar datos desde el servidor (una base de datos, por ejemplo) al cliente (los navegadores) en tiempo real.
Pero los datos JSON no pueden ser transmitidos al navegador en su forma cruda en un par llave:valor. Debido a esto los lenguajes de programación tienen métodos para manipular los datos JSON.
En JavaScript, por ejemplo, JSON.parse() convierte los datos JSON en objetos y JSON.stringify() convierte el par llave:valor de un objeto en datos JSON.
Python proporciona métodos como: json.loads() para convertir una cadena existente en JSON y json.dumps() para convertir un objeto en una cadena de texto JSON.
Puedes enviar los datos en sintaxis JSON, al navegador utilizando los dos métodos que proporciona JavaScript.
Cómo enviar datos JSON al cliente (navegador) con JavaScript
El método JSON.stringify() devuelve una cadena de texto JSON, la cual traducida es exactamente igual a un objeto en JavaScript. Puedes utilizarlo en combinación con los métodos de manipulación del DOM para mostrar datos, como he hecho en los fragmentos de código siguientes:
<h2>Aquí están los datos del JSON::</h2>
<div id="json"></div>
const JSONData = {
"key1": "value1",
"key2": "value2",
"key3": "value3",
"key4": 7,
"key5": null,
"favFriends": ["Kolade", "Nithya", "Dammy", "Jack"],
"favPlayers": {"one": "Kante", "two": "Hazard", "three": "Didier"}
}
const JSONString = JSON.stringify(JSONData)
const JSONDisplay = document.querySelector("#json")
JSONDisplay.innerHTML = JSONString
En el código JavaScript, declaramos los datos JSON como un objeto literal con el identificador (nombre) JSONData. Utilizamos el método JSON.stringify() de JavaScript, para convertirlo en una cadena, y el método query selector del DOM para obtener el div vacío en el HTML. Esto permite rellenar los datos JSON en él, con el método de manipulación DOM innerHTML.
Podemos utilizar el método JSON.parse() para convertir un dato JSON en un objeto y aquí está en acción:
<h2>Aquí están los datos del JSON:</h2>
<div id="json"></div>
const JSONData =
'{"name": "Kolade", "favFriends": ["Kolade", "Nithya", "Rocco", "Jack"], "from": "Africa"}';
try {
const JSONString = JSON.parse(JSONData);
const JSONDisplay = document.querySelector("#json");
JSONDisplay.innerHTML = JSONString.name + ", [" + JSONString.favFriends + "], " + JSONString.from;
} catch (error) {
console.log("No puedo parsear JSON Data");
}
La salida resultante en el navegador tiene el siguiente aspecto:
Conclusión:
Como programador, no puedes prescindir de JSON. La mayoría de las APIs están ahora escritas en JSON en lugar de XML.
JSON fue inicialmente concebido para JavaScript, pero muchos otros lenguajes de programación lo soportan ahora gracias a su naturaleza independiente del lenguaje. Como resultado, muchos lenguajes tienen bibliotecas para trabajar con él.
Espero que este tutorial te haya proporcionado los conocimientos necesarios para trabajar con JSON, Ojalá puedas darle un uso adecuado cada vez que lo encuentres.
Gracias por leer, sigue codificando.