Cómo trabajar con JSON en JavaScript

Introducción

Debido a que JSON se deriva del lenguaje de programación JavaScript, es una opción natural para usar como formato de datos en JavaScript. JSON, abreviatura de Notación de objetos JavaScript, generalmente se pronuncia como el nombre «Jason.»

Para obtener más información sobre JSON en términos generales, lea el tutorial «Introducción a JSON».

Para comenzar a pensar en dónde puede usar JSON en sus programas JavaScript, algunos casos generales de uso de JSON incluyen:

• Almacenar datos
• Generar estructuras de datos a partir de la entrada del usuario
• Transferir datos de servidor a cliente, de cliente a servidor y de servidor a servidor
• Configurar y verificar datos

Este tutorial le proporcionará una introducción al trabajo con JSON en JavaScript. Para aprovechar al máximo esta introducción, debe estar familiarizado con el lenguaje de programación JavaScript.

Formato JSON

El formato JSON se deriva de la sintaxis de objetos JavaScript, pero está completamente basado en texto. Es un formato de datos clave-valor que normalmente se representa en llaves.

Cuando trabaje con JSON, es probable que vea objetos JSON en un archivo .json, pero también pueden existir como un objeto o cadena JSON dentro del contexto de un programa. Lea más sobre la sintaxis y la estructura aquí.

Cuando esté trabajando con un archivo .json, se verá así:

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

Si, en su lugar, tiene un objeto JSON en un archivo .js o .html, es probable que lo vea establecido en una variable:

var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

Además, es posible que vea JSON como una cadena en lugar de un objeto dentro del contexto de un archivo o script de programa JavaScript. En este caso, también puede verlo todo en una línea:

var sammy = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';

Convertir objetos JSON en cadenas puede ser particularmente útil para transportar datos de manera rápida.

Hemos repasado el formato general de JSON y cómo puede esperar verlo como un archivo .json, o dentro de JavaScript como un objeto o una cadena.

Comparación con Objetos JavaScript

Vale la pena tener en cuenta que JSON fue desarrollado para ser utilizado por cualquier lenguaje de programación, mientras que los objetos JavaScript solo se pueden trabajar directamente a través del lenguaje de programación JavaScript.

En términos de sintaxis, los objetos JavaScript son similares a JSON, pero las claves de los objetos JavaScript no son cadenas entre comillas. Además, los objetos JavaScript son menos limitados en términos de tipos pasados a valores, por lo que pueden usar funciones como valores.

Veamos un ejemplo de un objeto JavaScript del usuario del sitio web Sammy Shark que está actualmente en línea.

var user = { first_name: "Sammy", last_name : "Shark", online : true, full_name : function() { return this.first_name + " " + this.last_name; }};

Esto le resultará muy familiar como objeto JSON, pero no hay comillas alrededor de ninguna de las claves (first_namelast_nameonline, o full_name), y hay un valor de función en la última línea.

Si queremos acceder a los datos del objeto JavaScript anterior, podríamos usar la notación de puntos para llamar a user.first_name; y obtener una cadena, pero si queremos acceder al nombre completo, tendríamos que hacerlo llamando a user.full_name(); porque es una función.

Los objetos JavaScript solo pueden existir dentro del lenguaje JavaScript, por lo que cuando trabaje con datos a los que deben acceder varios idiomas, es mejor optar por JSON.

Acceder a datos JSON

Normalmente se accede a los datos JSON en Javascript a través de la notación de puntos. Para entender cómo funciona esto, consideremos el objeto JSON sammy:

var sammy = { "first_name" : "Sammy", "last_name" : "Shark", "online" : true }

Para acceder a cualquiera de los valores, usaremos la notación de puntos que se parece a esto:

sammy.first_namesammy.last_namesammy.online

La variable sammy es el primero, seguido de un punto, seguido de la clave a la que se debe acceder.

Para crear una alerta de JavaScript que nos muestre el valor asociado con la clave first_name en una ventana emergente, podemos hacerlo llamando a la función JavaScript alert() :

alert(sammy.first_name);

Output
Sammy

Aquí, hemos llamado correctamente el valor asociado con la etiqueta first_name clave de la etiqueta sammy objeto JSON.

También podemos usar sintaxis de corchetes cuadrados para acceder a los datos de JSON. Para hacer eso, mantendríamos la clave entre comillas dobles entre corchetes. Para nuestra variable sammy anterior, usando sintaxis de corchetes en una función alert() se ve así:

alert(sammy);

Output
true

Cuando trabaje con elementos de matriz anidados, debe llamar al número del elemento de su matriz. Consideremos el JSON a continuación:

var user_profile = { "username" : "SammyShark", "social_media" : }

Para acceder a la cadena facebook, podemos llamar a ese elemento en el array dentro del contexto de notación de puntos:

alert(user_profile.social_media.description);

Output
facebook

Observe que para cada elemento anidado usaremos un punto adicional.

El uso de notación de puntos o sintaxis de corchetes nos permite acceder a los datos contenidos en formato JSON.

Funciones para trabajar con JSON

Esta sección analizará dos métodos para stringificar y analizar JSON. Poder convertir JSON de objeto a cadena y viceversa es útil para transferir y almacenar datos.

JSON.stringify ()

La función JSON.stringify() convierte un objeto en una cadena JSON. Las cadenas

son útiles para transportar datos de un cliente a un servidor a través del almacenamiento o el paso de información de forma ligera. Por ejemplo, puede recopilar la configuración de un usuario en el lado del cliente y luego enviarla a un servidor. Más tarde, puede leer la información con el método JSON.parse() y trabajar con los datos según sea necesario.

Veremos un objeto JSON que asignamos a la variable obj, y luego lo convertiremos usando JSON.stringify()pasando obj a la función. Podemos asignar esta cadena a la variable s:

var obj = {"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}var s = JSON.stringify(obj)

Ahora, si trabajamos con la etiqueta s, tendremos el JSON disponible para nosotros como una cadena en lugar de un objeto.

'{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}'

La función JSON.stringify() nos permite convertir objetos en cadenas. Para hacer lo contrario, veremos la función JSON.parse().

JSON.las cadenas parse()

son útiles para el transporte, pero querrás poder convertirlas de nuevo en un objeto JSON en el lado del cliente y/o del servidor. Si bien puede convertir texto en un objeto con la función eval(), no es muy seguro, por lo que usaremos la función JSON.parse() en su lugar.

Para convertir el ejemplo en el JSON.stringify() en la sección anterior, nos gustaría pasar la cadena s a la función, y asignarlo a una variable nueva:

var o = JSON.parse(s)

Entonces, tendríamos el objeto o para trabajar, lo cual sería idéntica a la de objeto obj.

Para echar un vistazo más profundo, consideremos un ejemplo de JSON.parse() dentro del contexto de un archivo HTML:

<!DOCTYPE html><html><body><p></p><script>var s = '{"first_name" : "Sammy", "last_name" : "Shark", "location" : "Ocean"}';var obj = JSON.parse(s);document.getElementById("user").innerHTML ="Name: " + obj.first_name + " " + obj.last_name + "<br>" +"Location: " + obj.location;</script></body></html>

Output
Name: Sammy SharkLocation: Ocean

Dentro del contexto de un archivo HTML, podemos ver cómo la cadena JSON s se convierte en un objeto que se puede recuperar en la representación final de la página accediendo al JSON a través de notación de puntos.

JSON.parse() es una función segura para analizar cadenas JSON y convertirlas en objetos.

Conclusión

JSON es un formato natural para usar en JavaScript y tiene muchas implementaciones disponibles para usar en muchos lenguajes de programación populares. Si desea utilizar el formato en otro idioma de programación, puede ver el soporte completo del idioma en el sitio «Presentación de JSON».

Debido a que es liviano y se transfiere fácilmente entre lenguajes de programación y sistemas, JSON ha experimentado un mayor soporte en API, incluida la API de Twitter.