Ayúdanos a seguir proporcionándote tutoriales gratuitos y de calidad desactivando tu bloqueador de anuncios. suscriptores a nuestro sitio.

¿Qué es la notación de objetos JavaScript JSON

1 mar 2021 6 min di lettura
¿Qué es la notación de objetos JavaScript JSON
Tabla de contenidos

Introducción

JSON, abreviatura de JavaScript Object Notation, es un formato para compartir datos. Como su nombre lo indica, JSON proviene del lenguaje de programación JavaScript, pero está disponible para su uso en muchos lenguajes, incluidos Python, Ruby, PHP y Java. JSON generalmente se pronuncia como el nombre "Jason".

JSON usa la extensión .json Cuando se define en otro formato de archivo (como en .html ), puede aparecer entre comillas como una cadena JSON o puede ser un objeto asignado a una variable. Este formato es fácil de transmitir entre el servidor web y el cliente o navegador.

JSON, legible y ligero, ofrece una buena alternativa a XML y requiere mucho menos formato. Esta guía informativa lo mantendrá actualizado con los datos que puede usar en archivos JSON y con la estructura general y sintaxis de este formato.

Sintaxis y estructura

Un objeto JSON es un formato de datos de clave-valor que normalmente se representa entre llaves. Cuando trabaje con JSON, probablemente verá objetos JSON en un .json, pero también pueden existir como un objeto JSON o una cadena en el contexto de un programa.

Un objeto JSON se ve así:

{
 "first_name": "Noviello",
 "last_name": "Shark",
 "location": "Ocean",
 "online": true,
 "followers": 987
 }

Si bien este es un ejemplo muy breve y JSON podría tener muchas líneas, esto muestra que el formato generalmente se establece con dos llaves { } en ambos extremos y con pares clave-valor. La mayoría de los datos utilizados en JSON terminan encapsulados en un objeto JSON.

Los pares clave-valor tienen dos puntos entre ellos, como en "key": "value". Cada par clave-valor está separado por una coma, por lo que el centro de un JSON suele ser así: "key": "value", "key": "value", "key": "value". En nuestro ejemplo anterior, el primer par clave-valor es "first_name": "NoviellO".

Las claves JSON se encuentran en el lado izquierdo de los dos puntos. Deben estar entre comillas dobles, como en "key", y pueden ser cualquier cadena válida. Dentro de cada objeto, las claves deben ser únicas. Estas cadenas de teclas pueden incluir espacios en blanco, como en "first name", pero esto puede dificultar el acceso al programar, por lo que es mejor usar guiones bajos, como en "first_name".

Los valores JSON se encuentran a la derecha de los dos puntos. Estos deben ser uno de los 6 tipos de datos simples:

  • instrumentos de cuerda
  • números
  • objetos
  • formación
  • Booleanos (verdadero o falso)
  • nulo

En un nivel más amplio, los valores también pueden consistir en los tipos de datos complejos de objetos o matrices JSON, que se describen en los siguientes párrafos.

Cada uno de los tipos de datos pasados como valores en JSON mantendrá su propia sintaxis, por lo que las cadenas estarán entre comillas, pero los números no.

Aunque en los .json, normalmente veremos el formato multilínea expandido, JSON también se puede escribir todo en una línea.

{ "first_name": "Noviello", "last_name": "Shark", "online": true, }

Esto sería más común en otro tipo de archivo o al encontrar una cadena JSON.

Escribir el formato JSON en varias líneas a menudo lo hace mucho más legible, especialmente cuando se trata de un gran conjunto de datos. Dado que JSON ignora los espacios en blanco entre sus elementos, es posible espaciar los dos puntos y los pares clave-valor para que los datos sean aún más legibles por humanos:

{
 "first_name": "Noviello",
 "last_name": "Shark",
 "online": true
 }

Es importante tener en cuenta que, aunque se ven similares, un objeto JSON no tiene el mismo formato que un objeto JavaScript, por lo que, si bien puede usar funciones dentro de objetos JavaScript, no puede usarlas como valores en JSON. El atributo más importante de JSON es que se puede transferir fácilmente entre lenguajes de programación en un formato con el que pueden trabajar todos los lenguajes participantes. Los objetos JavaScript solo se pueden administrar directamente a través del lenguaje de programación JavaScript.

Hasta ahora hemos analizado el formato JSON en sus términos más simples, pero JSON puede volverse jerárquico y complejo, formado por matrices y objetos anidados. Repasaremos JSON más complejo en la siguiente sección.

Trabajar con tipos complejos en JSON

JSON puede almacenar objetos anidados en formato JSON además de matrices anidadas. Estos objetos y matrices se pasarán como valores asignados a claves y, por lo general, también constarán de pares clave-valor.

Objetos anidados

En el users.json archivo users.json, para cada uno de los cuatro usuarios ( "noviello", "jesse", "drew", "jamie" ) hay un objeto JSON anidado que se pasa como un valor para cada uno de los usuarios, con su propio claves anidadas "username" y "location" que conciernen a cada usuario. El primer objeto JSON anidado se resalta a continuación.

{
 "noviello": {
 "username": "NovielloShark",
 "location": "Indian Ocean",
 "online": true,
 "followers": 987
 },
 "jesse": {
 "username": "JesseOctopus",
 "location": "Pacific Ocean",
 "online": false,
 "followers": 432
 },
 "drew": {
 "username": "DrewSquid",
 "location": "Atlantic Ocean",
 "online": false,
 "followers": 321
 },
 "jamie": {
 "username": "JamieMantisShrimp",
 "location": "Pacific Ocean",
 "online": true,
 "followers": 654
 }
 }
users.json

En el ejemplo anterior, las llaves se utilizan para formar un objeto JSON anidado con el nombre de usuario y los datos de ubicación asociados para cada uno de los cuatro usuarios. Al igual que con cualquier otro valor, cuando se utilizan objetos, se utilizan comas para separar elementos.

Matrices anidadas

Los datos también se pueden anidar en formato JSON mediante matrices de JavaScript que se pasan como un valor. JavaScript usa corchetes [ ] en ambos extremos de su tipo de matriz. Las matrices se recopilan, clasifican y pueden contener valores de diferentes tipos de datos.

Podemos usar una matriz cuando estamos tratando con una gran cantidad de datos que se pueden agrupar fácilmente, como cuando hay varios sitios web y perfiles de redes sociales asociados con un solo usuario.

Con la primera matriz anidada resaltada, un perfil de usuario para Noviello podría verse así:

{
 "first_name": "Noviello",
 "last_name": "Shark",
 "location": "Ocean",
 "websites": [
 {
 "description": "work",
 "URL": "https://noviello.it/"
 },
 {
 "desciption": "tutorials",
 "URL": "https://noviello.it/community/tutorials"
 }
 ],
 "social_media": [
 {
 "description": "twitter",
 "link": "https://twitter.com/noviello"
 },
 {
 "description": "facebook",
 "link": "https://www.facebook.com/Noviello"
 },
 {
 "description": "github",
 "link": "https://github.com/noviello"
 }
 ]
 }
user_profile.json

La "websites" y la clave "social_media" utilizan una matriz para anidar la información que pertenece a los 2 enlaces del sitio web de Noviello y 3 enlaces al perfil de la red social. Sabemos que son matrices debido al uso de corchetes.

El anidamiento en nuestro formato JSON nos permite trabajar con datos más complicados y jerárquicos.

Comparación con XML

XML, o X tensible M arkup L anguage, es una forma de almacenar datos accesibles que pueden ser leídos tanto por humanos como por máquinas. El formato XML está disponible para su uso en muchos lenguajes de programación.

En muchos sentidos, XML es muy similar a JSON, pero requiere mucho más texto, por lo que es más largo y lleva más tiempo leer y escribir. XML debe analizarse con un analizador XML, pero JSON se puede analizar con una función estándar. Además, a diferencia de JSON, XML no puede usar matrices.

Veremos un ejemplo del formato XML y luego examinaremos los mismos datos renderizados en JSON.

<users>
 <user>
 <username>NovielloShark</username> <location>Indian Ocean</location>
 </user>
 <user>
 <username>JesseOctopus</username> <location>Pacific Ocean</location>
 </user>
 <user>
 <username>DrewSquir</username> <location>Atlantic Ocean</location>
 </user>
 <user>
 <username>JamieMantisShrimp</username> <location>Pacific Ocean</location>
 </user>
 </users>
users.xml
{"users": [
 {"username": "NovielloShark", "location": "Indian Ocean"},
 {"username": "JesseOctopus", "location": "Pacific Ocean"},
 {"username": "DrewSquid", "location": "Atlantic Ocean"},
 {"username": "JamieMantisShrimp", "location": "Pacific Ocean"}
 ] }
users.json

Vemos que JSON es mucho más compacto y no requiere etiqueta final, mientras que XML sí. Además, XML no usa una matriz como lo hace este ejemplo JSON.

Si está familiarizado con HTML, notará que XML se parece bastante en el uso de etiquetas. Si bien JSON es más sencillo y menos detallado que XML y más rápido de usar en muchas situaciones, incluidas las aplicaciones AJAX, querrá comprender el tipo de proyecto en el que está trabajando antes de decidir qué estructuras de datos usar.

Recursos

JSON es un formato natural para usar en JavaScript y tiene muchas implementaciones disponibles para usar en muchos lenguajes de programación populares. Puede ver el soporte de idiomas completo en el sitio " Presentación de JSON " y la biblioteca jQuery también puede encargarse de la compatibilidad y el análisis.

La mayoría de las veces, no escribirá JSON puro, sino que lo extraerá de fuentes de datos o convertirá otros archivos de datos a JSON. Puede convertir CSV o datos delimitados por tabulaciones que puede encontrar en programas de hojas de cálculo a JSON. Puede convertir XML a JSON y viceversa. Cuando utilice herramientas automatizadas, debe verificar los resultados y eliminar la redundancia si es necesario.

Al traducir otros tipos de datos a JSON o crear los suyos propios, puede validar JSON con JSONLint y probar su JSON en un contexto de desarrollo web con JSFiddle.

Conclusión

JSON es un formato ligero que le permite compartir, almacenar y trabajar con datos fácilmente. Como formato, JSON encontró más soporte en la API.

Apóyenos si le gusta nuestro contenido. Gracias.

Buy me a coffeeBuy me a coffee

Únase a la conversación

Apóyenos con una donación.

Genial! A continuación, complete el pago para obtener acceso completo a Noviello.it.
Bienvenido de nuevo! Has iniciado sesión correctamente.
Te has suscrito correctamente a Noviello.it.
Éxito! Su cuenta está completamente activada, ahora tiene acceso a todo el contenido.
Éxito! Su información de facturación ha sido actualizada.
Su facturación no se actualizó.