Conceptos básicos

JSON son las siglas de JavaScript Object Notation. No es un lenguaje

de programación, es un formato de texto para almacenar y
transportar datos. Además, es "autodescriptivo" y fácil de
entender.

La sintaxis JSON se deriva de la notación de objetos JavaScript,

pero el formato JSON es solo texto. Asimismo, el código para leer
y generar JSON existe en muchos lenguajes de programación.

Razones para usar JSON

Principalmente, a lo fácil que es usarlo e implementarlo.

El formato JSON es sintácticamente similar al código para crear

objetos JavaScript. Debido a esto, un programa JavaScript puede
convertir fácilmente datos JSON en objetos JavaScript.

Dado que el formato es solo de texto, los datos JSON se pueden

enviar fácilmente entre computadoras y ser utilizados por
cualquier lenguaje de programación.
JavaScript tiene una función incorporada para convertir cadenas
JSON en objetos JavaScript:

JSON.parse ()

JavaScript también tiene una función incorporada para convertir

un objeto en una cadena JSON:

JSON.stringify ()

Además, un punto fuerte de JSON es que puede recibir texto puro

de un servidor y utilizarlo como un objeto JavaScript, como de
igual manera puede enviar un objeto JavaScript a un servidor en
formato de texto puro.

Ejemplo

"nombre": "Sergio",

"edad": 18,

"carro": null

Este es un ejemplo sencillo sobre JSON, definimos un objeto con 3

propiedades:

• Nombre
• Edad
• Carro

Cada una de los propiedades tienen un valor. Ahora, con un script

de JavaScript se puede acceder a los datos como un objeto, se
puede hacer de varias maneras, pero para este ejemplo lo llamaré
por consola de la siguiente manera:

Código generado en archivo HTML en Visual Studio Code

Resultado en consola

Sintaxis

La sintaxis de JSO no es más que un subconjunto de la sintaxis de

JavaScript. Es decir, la sintaxis de JSON se deriva de la sintaxis de
notación de objetos de JavaScript:

• Los datos están en pares de nombre / valor

• Los datos están separados por comas
• Las llaves sostienen objetos
• Los corchetes sostienen matrices
Los datos JSON se escriben como pares de clave / valor. Una clave
/ valor consta de un nombre de campo (entre comillas dobles),
seguido de dos puntos, seguido de un valor, así:

"apellido": "Ayerdis"

Valores

Los valores en JSON deben ser uno de los siguientes tipos de datos:

• String
• Number
• Object
• Array
• Boolean
• Null

Tipos de valores

String: los strings deben escribirse entre comillas dobles.

Ejemplo:

{"día": "Lunes"}

Numbers: los numbers deben de ser un número entero o un flotante

y sin comillas.

Ejemplo:

{"edad": 5}
Objects: los valores en JSON pueden ser objetos.

Ejemplo:

{
"empleado":{"nombre":"Pedro", "edad":28, "cargo":"Programador"}
}

Arrays: se deben usar corchetes “[ ]”

Ejemplo:

{
"empleado":["Pedro", "Luis", "Juan"]
}

Booleans: pueden ser verdadero / falso.

Ejemplo:

{"casado":false}

Null: un valor se puede definir como nulo

Ejemplo:

{"segundoApellido":null}
 Objetos JavaScript

Debido a que la sintaxis de JSON se deriva de la notación de objetos

de JavaScript, se necesita muy poco software adicional para
trabajar con JSON dentro de JavaScript.

Con JavaScript puede crear un objeto y asignarle datos, así:

Código generado en archivo HTML en Visual Studio Code

Podemos acceder de 2 maneras distintas al objeto desde consola,

luego veremos como mostrarlo en pantalla

Código generado en archivo HTML en Visual Studio Code

Resultado en consola
 JSON.parse()
Un uso común de JSON es intercambiar datos hacia / desde un
servidor web. Al recibir datos de un servidor web, los datos siempre
son una cadena.

Se analizan los datos con JSON.parse () y de esa manera los datos

se convierten en un objeto JavaScript.

Para el siguiente ejemplo vamos a suponer que recibimos el

siguiente texto de un servidor web:

Usamos la función de JavaScript JSON.parse() para convertir el

texto en un objeto de JavaScript:

Ahora de esta manera, ocupamos el objeto de JavaScript, por

ejemplo, para mostrarlo en pantalla:

Código generado en archivo HTML en Visual Studio Code

Resultado en el navegador
Un punto importante es que los objetos de tipo “Date” no están
permitidos en JSON. Si es necesario incluir un Date, se debería
escribir como un String, luego lo puedes volver a convertir de
vuelta en un objeto de tipo Date.

Ejemplo:

Código generado en archivo HTML en Visual Studio Code

Resultado en el navegador

JSON.stringify()
De manera inversa a JSON.parse(), cuando es necesario enviar
datos a un servidor, los datos deben de ser String, por tanto, para
convertir un objeto JavaScript a String usamos JSON.stringify().

Suponiendo que tenemos un objeto en JavaScript de la siguiente

manera:
Usamos la función JSON.stringify() para convertirlo a un String

Lo mandamos a llamar con un innerHTML

Y este es el resultado en el navegador

Almacenamiento de datos
Al almacenar datos, los datos deben tener un formato determinado
e, independientemente de dónde elija almacenarlos, el texto
siempre es uno de los formatos legales.

JSON permite almacenar objetos JavaScript como texto.

Ejemplo:

Código generado en archivo HTML en Visual Studio Code

 Resultado en el navegador

Arrays en JSON
Los arrays en JSON son casi las mismas que los arrays en
JavaScript. En JSON, los valores del array deben ser de tipo string,
number, object, array, booleano o null.

En JavaScript, los valores de matriz pueden ser todos los

anteriores, más cualquier otra expresión de JavaScript válida,
incluidas funciones, fechas e indefinidas.

Este es un JSON array:

["Sergio", "Javier", "Ayerdis"]

El siguiente ejemplo es un JavaScript array:

myArray = ["Sergio", "Javier", "Ayerdis"];

Se puede crear un JavaScript array pasando JSON string con JSON.parse()

myJSON = '["Sergio", "Javier", "Ayerdis”]’;
myArray = JSON.Parse(myJSON);

Para acceder a los valores de un array

Se accede a los valores del array por índice:
myArray[1];

Además, cabe recalcar que, los objetos pueden contener arrays.

Ejemplo:
 Código generado en archivo HTML en Visual Studio Code

Resultado en el navegador

Hacer bucles con arrays

Se puede acceder a los valores de un array usando un bucle for.

Ejemplo:

Código generado en archivo HTML en Visual Studio Code

Resultado en el navegador
 JSON desde un servidor
Se puede solicitar JSON desde el servidor mediante una solicitud
AJAX. Para ello usamos el objeto XMLHttpRequest, para de esta
forma intercambiar datos con un servidor.

Siempre que la respuesta del servidor esté escrita en formato JSON,

puede analizar la cadena en un objeto JavaScript.

Código generado en archivo HTML en Visual Studio Code

Código generado en archivo JSON en Visual Studio Code

Resultado en el navegador