Introducción al Error Unexpected Token en JSON
Uno de los errores más comunes a los que se enfrentan los desarrolladores web al trabajar con JavaScript y APIs es SyntaxError: Unexpected token in JSON at position X. Este fallo ocurre casi siempre cuando la función JSON.parse() intenta convertir una cadena de texto que no cumple estrictamente con el formato JSON estándar en un objeto JavaScript.
Causas Principales del Error
Comprender por qué se rompe el parseo es fundamental para aplicar la solución correcta. Las causas más frecuentes incluyen:
- La respuesta del servidor no es un JSON válido, sino HTML (por ejemplo, una página de error 404 o 500).
- Uso de comillas simples en lugar de comillas dobles dentro de la estructura de datos.
- Presencia de comas finales (trailing commas) en arrays u objetos.
- La cadena de texto llega vacía o corrupta desde el backend.
Método 1: Inspeccionar la Respuesta Cruda del Servidor
El error suele aparecer porque el cliente espera JSON pero recibe HTML o texto plano. Sigue estos pasos para detectarlo:
- Abre las herramientas de desarrollo de tu navegador (F12).
- Dirígete a la pestaña Network (Red) y realiza la petición que genera el error.
- Haz clic sobre la petición fallida y revisa la pestaña Response o Preview.
- Verifica si el contenido comienza con etiquetas HTML como
<html>o<!--en lugar de llaves{o corchetes[.
Método 2: Implementar Bloques Try-Catch y Sanitización
Para evitar que tu aplicación se rompa por completo, debes envolver el parseo en un bloque try...catch y asegurarte de validar los datos antes de procesarlos:
try {
const data = JSON.parse(responseText);
console.log(data);
} catch (error) {
console.error('Error al parsear JSON:', error.message);
console.error('Texto recibido:', responseText);
}
Método 3: Validar el Tipo de Contenido (Content-Type)
Si estás utilizando la API fetch, asegúrate de verificar que el servidor realmente esté respondiendo con JSON antes de intentar parsearlo:
fetch('/api/data')
.then(response => {
const contentType = response.headers.get('content-type');
if (!contentType || !contentType.includes('application/json')) {
throw new TypeError('Oops, no hemos recibido JSON!');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));