Un tutorial sobre cómo trabajar con JSON en JavaScript

Introducción

Hay muchas formas en que JSON se puede utilizar en JavaScript. Uno de sus usos más básicos es almacenar datos. También puede usarlo para transferir datos entre clientes, entre servidores o de servidor a cliente. Otras aplicaciones útiles incluyen la capacidad de configurar y verificar datos, así como generar estructuras de datos.

En este tutorial, exploraremos cómo puede utilizar JSON en sus programas de JavaScript. Si tiene experiencia previa programando con JavaScript, esto debería resultarle sencillo.

¿Qué es JSON?

JSON significa JavaScript Object Notation (Notación de Objetos de JavaScript). Es un formato diseñado para permitir el intercambio de diferentes tipos de datos. JSON utiliza principalmente JavaScript como su lenguaje de programación principal. También funciona con otros lenguajes como Python, PHP, Ruby, así como Java. Es fácil de leer, extremadamente ligero y no requiere mucho formato. Puede familiarizarse con la sintaxis y estructura general del formato siguiendo nuestro tutorial: Una descripción general del formato de intercambio de datos JSON.

JSON se puede utilizar por sí solo o definir en otro formato de archivo. Cuando está por sí solo, utiliza la extensión .json. Cuando está en otro formato, aparece como una cadena JSON entre comillas o como un objeto asignado a una variable. Por ejemplo, JSON también se puede utilizar en formato .html también. Este formato le permite realizar la transferencia de datos entre el servidor y el navegador con relativa facilidad.

El formato JSON está basado en texto. Los datos de clave-valor aparecen entre llaves. Así es como se ve un archivo típico .json típico:

Si tiene un objeto JSON en un archivo .js o .html, aparecerá como una variable como esta:

En algunos casos, es posible que los vea todos en una sola línea. Esto ocurre cuando el JSON se representa como una cadena en lugar de como un objeto en el archivo JavaScript:

Puede convertir objetos JSON en cadenas. Esto es útil cuando desea realizar una transferencia rápida de datos.

JSON frente a objeto JavaScript

Como mencionamos antes, JSON funciona con cualquier lenguaje de programación. Sin embargo, solo puede trabajar con objetos JavaScript utilizando JavaScript. La sintaxis en JSON y JavaScript es similar. La diferencia es que las claves de los objetos JavaScript no requieren comillas. Además, los objetos JavaScript pueden usar funciones como valores, lo que significa que están menos limitados.

En el siguiente ejemplo, mostramos la opción de JavaScript de un usuario. El usuario es Sammy Shark y está en línea en este momento:

Como puede ver, no hay comillas alrededor de ninguna clave como first_name, last_name, online, o full_name. Además, hay un valor de función colocado en la última línea. Si desea acceder a los datos en forma de cadena, puede llamar a user.first_name utilizando la notación de punto. Si en su lugar desea el nombre completo, utilizará user.full_name(), ya que es una función.

Cómo acceder a los datos JSON

Como mencionamos en la sección anterior, puede acceder a los datos JSON en JavaScript utilizando la notación de punto. Tomemos el ejemplo de un objeto JSON llamado sammy:

Nuestra notación de punto para acceder a los valores será:

La variable va primero. Después de eso, colocamos un punto. Por último, mencionamos la clave a la que queremos acceder.

Digamos que queremos crear una alerta en JavaScript que muestre el valor de la first_name clave. Para hacer que aparezca en una ventana emergente, utilizaremos la función JavaScript alert() de esta manera:

Otra forma de acceder a los datos de JSON es utilizando la sintaxis de corchetes. La clave debe colocarse entre comillas dobles dentro de los corchetes. Aquí hay una continuación del ejemplo anterior:

¿Qué pasa si está trabajando con elementos de un array anidado? En este caso, tiene que llamar al número del elemento en el array. Tome el siguiente ejemplo:

Digamos que deseamos acceder a la cadena facebook. Así es como utilizaremos la notación de puntos para acceder a ese elemento en el array usando su número:

Recuerde agregar un punto adicional por cada elemento anidado.

Funciones utilizadas con JSON

A continuación, veremos un par de funciones que puede utilizar con JSON. La transferencia y el almacenamiento de datos se vuelven bastante sencillos cuando puede convertir JSON de objeto a cadena o de cadena a objeto. Exploraremos cómo puede convertir a cadena y analizar JSON de dos maneras diferentes:

• JSON.stringify()

Es mejor utilizar cadenas cuando se intenta transferir datos de manera ligera. Por eso se utilizan para almacenar y transferir datos del cliente al servidor. Considere el siguiente ejemplo. Digamos que está recopilando datos de la configuración del usuario en una máquina. Necesita enviar esta información a su servidor. Utilizaría una cadena para este propósito. Luego puede volver a convertirla usando JSON.parse() para leerla y trabajar con ella.

La función que destacaremos aquí es JSON.stringify(). Esta función convierte un objeto JSON en una cadena JSON. En este ejemplo, asignaremos nuestro objeto a la variable obj. Lo convertiremos usando la función  JSON.stringify(). Para hacer esto, pasaremos el obj a la función y luego asignaremos la cadena a la variable s de esta manera:

Llamar a la variable s le devolverá el JSON como cadena:

• JSON.parse()

Como es de esperar, JSON.parse() realiza la función opuesta. Después de terminar de transportar los datos, debe volver a convertirlos en un objeto JSON para poder trabajar con ellos. Una opción es utilizar la función eval(). Sin embargo, este enfoque no es muy seguro. Por eso preferimos utilizar la función JSON.parse().

Considere el ejemplo anterior una vez más. Pasaremos la cadena s a la función JSON.parse(). Luego, le asignaremos una nueva variable:

Nuestro nuevo objeto es ahora o. Será el mismo que obj. Se obtiene una mejor comprensión cuando consideramos JSON.parse() en un archivo HTML como este:

Aquí, realmente puedes ver cómo convertimos la cadena s en un objeto recuperable. Por lo tanto, JSON.parse() es una opción segura para convertir cadenas JSON en objetos.

Conclusión

Como vimos a lo largo de este tutorial, JSON tiene muchas implementaciones en JavaScript. Es especialmente útil ya que se puede usar con casi cualquier lenguaje de programación, lo que lo convierte en la opción natural. Además de eso, solo hemos rascado la superficie. Hay mucho más que puedes hacer con JSON. Ya es compatible con las API.

Aquí tienes más recursos de nuestro blog que te ayudarán a programar con JavaScript:

• Aprende cómo operan los prototipos y la herencia en JavaScript.
• Explora en detalle cómo agregar JavaScript a HTML.
• Si estás creando tu propia aplicación web, echa un vistazo a nuestra guía sobre cómo elegir la mejor configuración de servidor.

¡Feliz computación!