Analizar cadenas JSON en React

Un componente React trabaja con valores de JavaScript, como objetos y arreglos, mientras que una API o un archivo puede proporcionar JSON como texto. El análisis convierte ese texto en un valor de JavaScript que puedes inspeccionar y mostrar. Para una cadena existente, usa JSON.parse(); para el cuerpo de una respuesta de Fetch, usa el método asíncrono response.json().

Comprender el análisis de JSON en React

JSON es un formato de texto para representar valores como objetos, arreglos, cadenas, números, valores booleanos y null. Un objeto JSON se parece a un objeto de JavaScript, pero sigue siendo texto hasta que se analiza. Por ejemplo, '{"name":"Ada","city":"London"}' es una cadena; después de analizarla, se puede leer su propiedad name como Ada.

El análisis y la serialización funcionan en sentidos opuestos: JSON.parse(jsonText) convierte texto JSON en un valor de JavaScript, mientras que JSON.stringify(value) convierte un valor de JavaScript serializable en texto JSON. React no necesita un analizador especial. Analiza los datos antes de usar sus propiedades en un componente y mantén las solicitudes asíncronas fuera del cuerpo de renderizado del componente.

Analizar una cadena JSON con JSON.parse()

Usa JSON.parse() cuando ya tengas una cadena que contenga JSON válido. Devuelve el valor de JavaScript correspondiente, así que puedes acceder a un objeto con la notación habitual de propiedades. JSON exige comillas dobles alrededor de las claves de los objetos y de los valores de cadena; la sintaxis propia de JavaScript, como los comentarios, las cadenas entre comillas simples y las comas finales, no es válida en JSON.

Ejecuta este ejemplo:

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

const jsonText = '{"name":"Ada","role":"Engineer"}';
const person = JSON.parse(jsonText);
console.log(person.name);

Ada

El analizador puede devolver un objeto, un arreglo, una cadena, un número, un valor booleano o null, según el texto JSON. Si el texto está mal formado, JSON.parse() genera un SyntaxError. Si la cadena proviene de fuera de tu aplicación, gestiona ese error donde se realiza el análisis; consulta la sección sobre errores más abajo.

Crear y analizar un ejemplo local de JSON

Si tus datos empiezan como un objeto de JavaScript, conviértelos en texto JSON con JSON.stringify() y luego analiza ese texto para recuperar un valor de JavaScript. Esto ilustra ambos sentidos de la conversión, pero no hace falta serializar con JSON.stringify() datos que ya están en formato de texto JSON.

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

const original = { product: "Notebook", price: 12 };
const jsonText = JSON.stringify(original);
const restored = JSON.parse(jsonText);
console.log(`${restored.product}: $${restored.price}`);

Notebook: $12

La serialización solo incluye valores compatibles con JSON. Por ejemplo, se omiten las propiedades de un objeto cuyos valores sean funciones o undefined. Si recibes los datos como una cadena JSON, omite JSON.stringify() y analiza la cadena directamente.

Mostrar datos analizados en JSX

Analiza una cadena JSON conocida antes del return del componente para que la conversión sea fácil de localizar y los errores se puedan gestionar por separado. Después, usa el valor resultante como cualquier otro objeto de JavaScript. Por ejemplo, tras definir const person = JSON.parse(jsonText), un componente puede mostrar el nombre con <p>{person.name}</p>.

Las llaves de JSX evalúan expresiones de JavaScript; no analizan JSON por sí solas. Guarda el texto JSON y el valor analizado en variables con nombres claros, y muestra solo las propiedades que necesita la interfaz. Si el valor analizado puede ser null o tener otra estructura, compruébalo antes de leer propiedades anidadas.

Obtener y analizar JSON en un componente de React

Una llamada a fetch() se resuelve en un Response; no devuelve directamente los datos analizados. Comprueba response.ok para detectar estados HTTP de error y luego llama a response.json() con await para leer el cuerpo y analizarlo. El resultado es una promesa que contiene un valor de JavaScript. Esto difiere de JSON.parse(), que recibe una cadena que ya tienes.

En un componente de React, inicia la solicitud en un efecto y guarda el resultado en el estado. El siguiente fragmento es un patrón que puedes adaptar en una aplicación React; es específico del framework y no constituye un ejemplo independiente para el entorno de ejecución del artículo:

useEffect(() => { let ignore = false; async function load() { try { const response = await fetch('/api/profile'); if (!response.ok) throw new Error('Request failed: ' + response.status); const profile = await response.json(); if (!ignore) setData(profile); } catch (error) { if (!ignore) setError(error); } } load(); return () => { ignore = true; }; }, []);

La marca de limpieza evita que una solicitud completada actualice el estado después de que se haya limpiado el efecto. En una aplicación, define el estado correspondiente con useState y sustituye el endpoint del ejemplo por uno que devuelva JSON. Aunque el estado HTTP sea correcto, si el cuerpo no contiene JSON válido, response.json() puede rechazar la promesa. Los mensajes de texto literales del fragmento se mantienen en inglés.

Gestionar errores de análisis y de solicitudes

JSON.parse() puede fallar si el texto está mal formado. Captura el error de análisis en el punto donde conviertes texto que no es de confianza y, en vez de dar por hecho que el resultado es un objeto, elige un valor alternativo útil o muestra un mensaje de error.

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

const jsonText = '{"name":';
let person;

try {
  person = JSON.parse(jsonText);
} catch (error) {
  console.log(error instanceof SyntaxError ? "Could not read JSON" : "Unexpected error");
}

Could not read JSON

Las solicitudes de Fetch pueden fallar de distintas maneras. Los errores de red rechazan la promesa de fetch(), mientras que una respuesta HTTP como 404 normalmente sí la resuelve; comprueba response.ok y gestiona el caso en que su valor sea falso. El análisis del cuerpo de la respuesta también puede fallar si no contiene JSON válido. Coloca la comprobación del estado y la llamada a response.json() dentro del mismo bloque try para que el componente pueda mostrar un estado de error ante cualquiera de estos fallos.

Mostrar los datos obtenidos con el estado de React

Guarda el estado de la solicitud y los datos obtenidos en el estado de React y luego muestra el estado que corresponda. Un componente puede empezar con un mensaje de carga, mostrar un error si falla la solicitud o el análisis y, si todo va bien, mostrar los datos. Por ejemplo, el renderizado condicional puede seguir esta estructura: if (error) return <p role="alert">Could not load profile.</p>; if (data === null) return <p>Loading…</p>; return <p>{data.name}</p>;. Inicializa el estado y elige una representación de carga adecuada para los posibles valores que devuelva la API. El mensaje literal Could not load profile. del ejemplo se mantiene en inglés.

No inicies una solicitud ni llames a JSON.parse() como efecto secundario durante el renderizado. El renderizado debe usar el estado actual; un efecto realiza la solicitud y actualiza ese estado cuando termina. Así, la interfaz sigue respondiendo y los estados de carga, éxito y error quedan explícitos.