Análisis JSON en JavaScript | audacia

Al desarrollar aplicaciones web, a menudo encontrará un formato de datos conocido como JSON o notación de objetos de JavaScript. Hacer solicitudes HTTP a una API REST, por ejemplo, probablemente devolverá una respuesta JSON, y dependerá de usted como desarrollador analizar y realizar operaciones en esa respuesta.

En esta publicación, exploraremos qué es JSON y cómo convertir JSON en formatos para usar en un entorno de JavaScript.

¿JSON o JavaScript?

Un objeto (literal) en JavaScript es una colección de pares clave-valor, donde valores puede ser de muchos tipos de datos diferentes (por ejemplo, números, cadenas, booleanos, matrices o incluso otro objeto). He aquí un ejemplo de un sencillo book objeto en JavaScript:

const book = {
 name: "Invisible Man",
 author: "Ralph Ellison",
 published: 1952,
 read: false,
};

En su mayor parte, tanto JSON y Las representaciones de objetos de JavaScript de esos mismos datos son bastante similares. Sin embargo, un requisito estricto para JSON es que las claves deben estar entre comillas dobles. Así es como se ven los mismos datos del libro como un objeto JSON:

{
 "name": "Invisible Man",
 "author": "Ralph Ellison",
 "published": 1952,
 "read": false
}

Tenga en cuenta que el name, author, publishedy read cada una de las propiedades está encerrada entre comillas dobles (el uso de comillas simples es JSON no válido). Además, JSON también restringe el uso de comas finales para el último par clave-valor de la colección.

Sin embargo, el fragmento de código anterior, tal como está, sigue siendo perfectamente válidoJavaScript. ¿Por qué sigue siendo necesario convertir JSON en un formato legible por JavaScript (o ningún idioma, para el caso)?

JSON es una cadena.

Aunque parece JavaScript, JSON en realidad son datos basados ​​en texto. Es decir, JSON es una cadena. Antes de que los datos representados en JSON puedan usarse en un entorno de JavaScript (nodo o navegador), primero deben convertirse (es decir, deserializarse) en un objeto nativo que JavaScript pueda comprender.

De fábrica, JavaScript proporciona un objeto JSON global con métodos para analizar y convertir valores hacia y desde JSON. Primero echemos un vistazo a cómo el JSON.parse() El método nos permite convertir una cadena JSON en un objeto JavaScript.

sintaxis.

Aquí está la firma completa para el método de análisis integrado de JavaScript:

JSON.parse(text, reviver)

El método toma dos parámetros:

• textque es la propia cadena JSON serializada, y
• reviverque es un opcional función que modifica (p. ej., filtra) los datos antes de que la función regrese

Si el análisis es exitoso, el método devuelve un objeto JavaScript nativo. Considere el siguiente ejemplo:

const book =
 '{"name": "Invisible Man", "author": "Ralph Ellison", "published": 1952, "read": false}';
 
const result = JSON.parse(book);

Para proporcionar datos JSON válidos como text a JSON.parse(), el objeto JSON debe estar entre comillas simples. Como tal, la colección completa de pares clave-valor se representa como una cadena:

console.log(typeof book); // string

Después de un análisis exitoso, el resultado es un objeto JavaScript normal:

console.log(typeof result); // object
console.log(result);
 
/*
{
 name: 'Invisible Man',
 author: 'Ralph Ellison',
 published: 1952,
 read: false
}
*/

Y como tal, podemos acceder a las propiedades del objeto resultante como lo haríamos con cualquier objeto de JavaScript:

 console.log(result.name); // "Invisible Man"
console.log(result.author); // "Ralph Ellison"
console.log(result.published); // 1952
console.log(result.read); // false

Ahora, ¿qué pasa si queremos modificar los datos JSON entrantes antes de devolverlos como un objeto JavaScript? Aquí es donde podemos aprovechar la opción reviver función.

La función revive.

Considere este ejemplo: digamos que con el JSON sin formato book datos, el read el estado del libro debe ser alternado. Es decir, antes de trabajar con esos datos en JavaScript, primero queremos que todos true estados a los que cambiar falsey todo false estados a los que cambiar true. Podemos lograr esto creando un reviver función para manejar esa manipulación de datos para nosotros.

Durante el proceso de análisis, el reviver se llama a la función para cada par clave-valor en la cadena JSON. De esta forma, podemos ejecutar cualquier lógica comercial personalizada que queramos en esos datos antes de que se devuelvan en el objeto JavaScript.

Primero definiremos los dos parámetros que el JSON.parse() acepta: el text y el reviver.

const book =
 '{"name": "Invisible Man", "author": "Ralph Ellison", "published": 1952, "read": false}';
 
function toggleRead(key, value) {
 if (key === "read") {
   return !value;
 } else {
   return value;
 }
}

Con estos dos parámetros definidos, los pasamos al método de análisis:

const result = JSON.parse(book, toggleRead);

A medida que la función de análisis itera a través de la cadena JSON, toggleRead() se llama para cada uno de los cuatro pares clave-valor en el book objeto. Como tal, el valor resultante se convierte en:

console.log(result);
 
/*
{
 name: 'Invisible Man',
 author: 'Ralph Ellison',
 published: 1952,
 read: true
}
*/

Tenga en cuenta que el read estado se ha cambiado a su valor opuesto (es decir, de su original true valor en la cadena JSON para false en el objeto JavaScript resultante).

En general, el reviver La función es un excelente lugar para incluir lógica comercial personalizada y otras transformaciones en la cadena JSON que se analiza en JavaScript.

Analizando una matriz JSON.

Además de todo lo anterior, tenga en cuenta que JSON.parse() también puede manejar arreglos JSON (después de todo, un arreglo es un objeto):

const team =
'["Andy", "Peter", "Gabriella", "Jordy"]';
 
 
const result = JSON.parse(team);
 
console.log(typeof result); // object
 
console.log(result); // ['Andy', 'Peter', 'Gabriella', 'Jordy']

Otras lecturas.

JSON está en toda la web. Es un formato de datos que es predecible, uniforme y fácil de leer y escribir. Dado que JSON es analizado y deserializado por cada idioma en objetos nativos en ese idioma, también puede ver JSON analizado en hashes en Ruby, diccionarios en Python, etc. En el caso de JavaScript, JSON se analiza a través del método integrado JSON.parse() en literales de objetos de JavaScript.

Consulte los recursos a continuación y explore el programa Intermediate JavaScript Nanodegree para estar en camino de dominar el lenguaje de programación más popular del mundo.

COMIENZA A APRENDER