Facultad de

Ciencia, Tecnología y Ambiente

Ingeniería en Sistema de la información/ Desarrollo de Aplicaciones Web

Docentes:
Benjamín Narváez Pineda
Eduard Manuel Jirón Orozco
Eleazar Isaac Cortez Moran
Geraldine Belén Porras Villalta
Jerson Adolfo Bejarano

Portal Web Educativo

Tutorial JSON

Managua, Nicaragua

11 de Octubre 2022
Índice
 Introducción a JSON

La especificación del archivo JSON surgió alrededor del año 200, pero solo pasó a
formar parte del lenguaje JavaScript después del lanzamiento de la versión 5 del
ECMAScript. A continuación te seguiré explicando en qué consiste.

Sus siglas significan JavaScript Object Notation.

¿Qué es JSON?

JSON pronunciado “Jason” no es un lenguaje de programación. Esto puede ser una

sorpresa para ti estudiante leyendo esto, pero es verdad. Este en realidad es un formato
de texto, que permite estructurar datos en forma de texto con el objetivo de
intercambiar información entre aplicaciones de manera sencilla. Esta estructura se
implementa en aplicaciones cliente – servidor o en aplicaciones móviles. O bien al
momento de crear APIs.
Es necesario recalcar que JSON es independencia de cualquier lenguaje. Simplemente,
se toma en cuenta que su sintaxis se deriva de la notación de objetos de JavaScript.

Ventajas de JSON:
 Representa un archivo liviano: El tipo de archivo es de texto, es por ello que no
ocupa tantos bytes de espacio en memoria. Esto trae consigo el beneficio de
agilidad para la transferencia y carga durante el procesamiento.
 Lectura más sencilla: La notación de este formato de texto es muy fácil de
entender.
 El código para leer y generar JSON existe en muchos lenguajes de programación.
 Permite trabajar con datos de objetos JavaScript, sin análisis ni traducciones
complicadas. Simplemente haciendo
 Puede manipularse en diferentes plataformas, entre ellas Windows, macOS,
Linux.
 Presenta menos limitadores en comparación a XML. En JSON los datos se
encuentran ordenados de forma compacta.
 Parsing más fácil: Los datos de un archivo de tipo JSON se encuentran en formato
de texto, por lo cuál deben ser interpretados para que puedan ser consumidos por
la aplicación. Esto puede lograrse utilizando JavaScript, jQuery y otros más.

Por el momento no he explicado en qué consiste la notación de JSON, sin embargo,

puedes tomar los siguientes ejemplos para hacerte una idea. No te preocupes que
explicaré de la forma más fácil todo lo que debes saber sobre JSON.
 Ejemplo de estructura de contenido en JSON #1

Nota: El primer ejemplo tiene un formato de texto de

extensión JSONC, el cual es el mismo a JSON. La única
diferencia es que JSONC permite escribir comentarios.
Estos dos ejemplos, son sólo algunas de las tantas
maneras de cómo se puede estructurar un archivo de
tipo JSON.
Ejemplo de estructura de contenido en JSON #2
Como puede observarse, en el primer ejemplo se
encuentran los elementos de clave y valor. Este ejemplo
tiene valores de tipo String y Números.
Por otro lado, el segundo ejemplo contiene un arreglo o
“array” con el nombre de los integrantes del grupo #2 de
desarrollo de aplicaciones web. Dentro de este ejemplo
también están presenten elementos de clave – valor
debido a que son objetos.
No te preocupes si todavía no comprendes esto, a
continuación, te continuaré explicando el tema de los
d l d
Tipos de datos que admite JSON:
o Strings: Son cadenas o bien conjuntos de caracteres. Por ejemplo, mi nombre, el
cuál es “Geraldine”. O bien mis dos apellidos “Porras Villalta”. Incluso mi inicial
“G” es considerado una String en JSON. {"nombre":"Geraldine"}
o Números: Se le llama simplemente números debido a que engloba todo tipo de
números. Entre ellos se encuentran los Int, float, double, los exponenciales
incluso los negativos.
o Booleanos: Sólo contiene dos tipos de valores, true or false. {"venta":true}
o Null: Significa que un dato no tiene ningún valor. Un ejemplo sería: {"salario":null}
o Arrays: Son estructuras de datos que permiten agrupar varios tipos valores. Un
ejemplo de ello, es la captura que se encuentra en la página anterior. Otro ejemplo
sería [1,2,3] o bien [Geraldine, Cinthya, Jazmina].
o Objetos: Por lo general los objetos en JSON se estructuran mediante clave – valor.
La clave sería el nombre que le daríamos al valor que escogimos. Un ejemplo
podría ser {“perro”: “Thompson”} o bien {“edad”: 3}. Esto se leería de la siguiente
manera: Una clave que tiene como valor una String que se le asigno el nombre
Thompson. El otro se leería que la clave edad tiene un valor de tipo entero o Int
de 3.
{
"perro":{"nombre":"Thompson", "age":3, "raza":"Amorocito"}
}

Sintaxis:
Sin importar que JSON no es un lenguaje de programación igual necesita de una
notación específica para lograr almacenar datos. La sintaxis de JSON se deriva de la
notación de objetos de objetos de JavaScript. Sin embargo, no sólo objetos son los tipos
de estructuras que podemos crear en JSON.
JSON estructura datos con los siguientes elementos:
 Llaves: {} --> Son las que sostienen objetos.
 Corchetes: [] --> Indican un array o matriz.
 Coma: , --> Separa elementos.
 Dos puntos: : --> Separa la clave del valor
 Clave – valor: Son pares de nombre y valor. Las claves siempre van entre
comillas dobles. En JSON, las claves deben ser cadenas, escritas con comillas
dobles.
 Clave: Valor

Objetos

Lista de objetos

Simbología:
Rojo: Lista de objetos
Azul: Objetos
Verde: Clave – Valor

JSON VS XML:

En este documento es imprescindible abarcar XML. No porqué te vaya a explicar de

forma extensa en qué consiste, sino por su semejanza a JSON.

XML al igual que JSON (extensible markup language) son formatos para el intercambio
de datos entre aplicaciones. Sin embargo, tienen ciertas diferencias que permiten
decidir a los desarrolladores web decidir entre que tipo de formato de texto
implementar en sus aplicaciones.

A continuación, te presentaré un ejemplo de un archivo de texto XML. Este después lo

convertiré a uno JSON.
 XML

JSON
Así se vería un archivo XML convertido en
JSON. Puedes ver fácilmente que uno es más
complejo de entender que el otro. Es por ello
que procederé a hablar sobre las semejanzas
y diferencias de estos formatos de texto.
Diferencias:
En XML se declara el formato de
codificación, en JSON no.
En XML no se usa ningún tipo de carácter
para como llaves para especificar si hay
varios objetos, solamente el signo de mayor
y menos < >.
Ciudades es una lista con 3 objetos dentro,
pero en XML es difícil notar eso.
El nombre del objeto “ciudad” dentro de la
lista “ciudades” se repite varias veces en
XML lo cuál lo hace redundante.
Semejanzas:

 Tanto JSON como XML son "autodescriptivos" (legibles por humanos).

 Ambos son jerárquicos (valores dentro de valores).
 Muchos lenguajes de programación pueden analizar y utilizar tanto JSON como
XML.
 Tanto JSON como XML se pueden obtener con XMLHttpRequest.

Diferencias:
o Notación: JSON usa una notación simple, mientras que el XML usa una estructura
de tags personalizadas para representar los objetos. Además, deben contener el
par, o sea, la tag de apertura y cierre.
En JSON se usan comillas dobles en XML no.

o Tipos de datos:
JSON sólo soporta textos y números al igual que arrays. Por el contrario, XML
soporta imágenes y gráficos.

o Codificación: La codificación representa las formas de conversión para el

formato binario soportadas por el modelo. JSON usa el formato UTF-8, mientras
que el XML ofrece esa y otras opciones. Esto no es tanto una desventaja de JSON
debido a que UTF-8 es el formato más utilizado en los sitios web.

o Facilidad de lectura y comentarios: JSON es más fácil de leer e interpretar en

comparación a XML. Otra diferencia es que XML permite escribir comentarios
en JSON no a menos que se utilice el formato JSONC.

JSON.parse()

JSON es intercambiar datos hacia/desde un servidor web. Al recibir estos de un

servidor web, los datos siempre son una cadena.

Pero para poder implementarlo en nuestra página web es necesario convertirlos a un

objeto JavaScript, lo cuál se logra implementando un JSON.parse()

Si tuviéramos un texto de tipo JSON, por ejemplo, el siguiente:

'{"name":"John", "age":30, "city":"New York"}'

Para convertirlo a un objeto JavaScript, se haría lo siguiente:

const obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');

En esto simplemente se crea una constante con el nombre obj y se le asigna un JSON con el
punto se está accediendo a un método JavaScript que tiene como parámetros el objeto en
formato JSON.

¿Qué pasaría si no quiero convertir un objeto JSON a uno JavaScript, sino un arreglo?

El parseo se haría de la siguiente manera: A diferencia de los objetos, se declara una

constante dos veces, una con el arreglo de JSON y otra que contendrá el arreglo pero luego
de convertirlo a JavaScript.

const text = '["Ford", "BMW", "Audi", "Fiat"]';

const myArr = JSON.parse(text);

Excepciones de .parse()

Tanto fechas como funciones no pueden convertirse a objetos JavaScript. Ninguna de las
dos cosas son soportadas por JSON. Para convertirlos se deberían escribir como cadena.

JSON.stringify()

Como ya fue mencionado antes al recibir los datos en JSON de un servidor web, los datos
siempre son una cadena. El método stringify al igual que parse funciona para convertir
distintos valores de texto, pero en este caso es de JavaScript a JSON.

Para stringificar un objeto de JavaScript se haría lo siguiente:

const obj = {name: "John", age: 30, city: "New York"};

const myJSON = JSON.stringify(obj);

Se haría lo mismo que en parse, sólo cambia el método que usamos.

Si se deseas convertir un arreglo JavaScript a Jason se haría de la siguiente manera:

const obj = {name: "John", age: 30, city: "New York"};

const myJSON = JSON.stringify(obj);

Se hace lo mismo que con parse, a pesar que se quiere obtener una cadena de texto en JSON
y no un objeto en JavaScript.
FUNCIONES JSON PARA PHP:

PHP soporta JSON con funciones nativas, aunque la incorporación de estas funciones
solamente se produjo en PHP 5.2. Existen dos funciones para el trabajo con JSON, una
para codificar un elemento en formato JSON y otra para descodificar un JSON y crear
una estructura de datos PHP.

json_encode($valor): Recibe un valor y devuelve un JSON que resulta de la codificación

de ese valor en el formato de notación de objeto JavaScript. El valor puede ser de
cualquier tipo de dato, como podría ser una variable numérica, String, aunque
generalmente se usa más habitualmente con arrays u objetos.

La función se vería más o menos de la siguiente manera:

json_decode($cadena): Esta función recibe una cadena de texto que debe tener un
formato correcto en JSON. Devuelve una variable PHP que contiene la representación
nativa del JSON en PHP. Por ejemplo, suele devolverse un objeto en el que encontramos
las propiedades del JSON y los valores.

La función se vería más o menos de la siguiente manera:

Datos importantes:
Es importante destacar que una manera de acceder al contenido de JSON, es utilizando
el “dot Notation”.

Un simple ejemplo de el uso del dot notation sería de la siguiente manera:

El console.log es utilizado para imprimir mensajes en JavaScript. El punto dentro de

los paréntesis hace que se puedan obtener los objetos en JSON contenidos en una lista
de objetos.

Otra manera de acceder al contenido en JSON es utilizando corchetes []. Otro ejemplo
sería.
Igual que en el ejemplo anterior se puede acceder a la data dentro de las llaves. El output
sería mi nombre y mi edad.

Desventajas de JSON:
Seguramente ya logras apreciar lo importante que es JSON para el desarrollo web, sin
embargo siempre es importante resaltar la contraparte de este.

Algunas desventajas de JSON podrían ser que:

o El único tipo de número compatible es el formato de punto flotante de doble
precisión. Por lo tanto, no es posible aprovechar los otros tipos de número más
variados y matizados que se encuentran en muchos lenguajes de programación.
o No existen funciones que sean propiamente de JSON ni tampoco el formato de
fecha.
o Ausencia de comentarios, lo que provoca documentación por aparte.
o Las fechas deben representarse como milisegundos.
o La ausencia de un esquema que permita la flexibilidad en términos de
representación de datos también aumenta el riesgo de “distorsionar” la
información, lo cual es grave.

Con todo este PDF como herramienta, espero hayas aprendido lo suficiente sobre JSON.
Te insto a que continues aprendiendo de este debido a que es un tema muy interesante!
¡Ánimo!
Referencias Bibliográficas:

JavaScript and JSON(With examples). (s. f.). Recuperado 06 de octubre de 2022, de

https://www.programiz.com/javascript/json

Souza, I. (2021, agosto 19). Archivo JSON: ¿qué es y para qué sirve en las páginas
web? Rock Content - ES. Recuperado 06 de Octubre de 2022, de
https://rockcontent.com/es/blog/archivo-json/

W3Schools. (s. f.). JSON - Introduction. Recuperado 3 de octubre de 2022, de

https://www.w3schools.com/xml/xml_whatis.asp