¿Crees que tu JSON está bien porque JSON.parse no lanzó error? En realidad, que sea parseable no significa que los datos sean correctos. ¿Qué haces cuando el backend devuelve {user_id: 123} (clave sin comillas)? ¿La API espera un campo email pero solo ves mail? Estas son las tres capas de la validación JSON — la mayoría de tutoriales solo cubren la primera. Este artículo desglosa las 3 capas y cómo el formateador JSON de Piick señala la ubicación exacta de los errores.

Los tres niveles de validación JSON

La validación tiene tres capas, y cada una resuelve un problema diferente:

  • Capa de sintaxis: Si la cadena es JSON legal — comillas, comas y corchetes coinciden. JSON.parse hace esto por defecto.
  • Capa de estructura: Si los datos coinciden con un esquema predefinido — ¿user es un objeto?, ¿tags es un array?, ¿están los campos obligatorios? JSON Schema es el estándar de facto aquí.
  • Capa semántica: Si los valores tienen sentido — ¿status está en un enum válido?, ¿age está entre 0 y 150?, ¿email tiene el formato correcto? Esta capa depende del código de negocio, o de bibliotecas como Zod y Ajv.

El 90% de los bugs vive en las dos últimas capas. La capa de sintaxis es solo el ticket de entrada.

Correcto sintácticamente no es lo mismo que correcto en datos

Aquí tienes un escenario real: la API debería devolver { "code": 0, "data": { "userId": 123 } }, pero en realidad devuelve { "data": { "userid": 123 } } — uso de mayúsculas incorrecto. JSON.parse pasa, pero el frontend lee userId y obtiene undefined, así que la UI se muestra en blanco. Este tipo de bug es particularmente difícil de rastrear en producción.

La solución: usa JSON Schema para generar tipos TypeScript, o haz validación de esquema en la capa de petición. Trata el esquema como el contrato de la API y rechaza de inmediato cualquier cosa que no coincida, en lugar de esperar errores en tiempo de ejecución.

5 errores comunes de JSON y cómo depurarlos

  1. Comas finales {"a":1,} — quita la última coma, o usa el modo tolerante del formateador JSON de Piick para eliminarlas automáticamente
  2. Cadenas con comillas simples {'a':1} — reemplaza globalmente por comillas dobles, o deja que el modo tolerante las maneje
  3. Claves sin comillas {a:1} — envuelve las claves con comillas dobles
  4. Comentarios sobrantes // xxx — bórralos, o deja que el modo tolerante los elimine
  5. Encabezado BOM {"a":1} — guarda como UTF-8 sin BOM

Consejo de depuración: no cuentes corchetes a ojo. Usa directamente la función “mostrar números de línea” de la herramienta.

Cómo localizar la posición exacta del error tras parsear

Los errores de JSON.parse solo dicen Unexpected token sin decirte dónde. Chrome DevTools, Postman y los plugins de VS Code pueden mostrar números de línea, pero todos requieren copiar y pegar manualmente.

Más preciso es el formateador JSON de Piick — lee la position N del error de V8, la convierte a un número de línea y columna, y la muestra en el banner de error. Pega un JSON roto y verás exactamente en qué línea y columna está el error. Para puntos de partida sobre validación de esquemas, consulta la lista oficial de implementaciones de JSON Schema.

Abre ahora el formateador JSON de Piick, pega una cadena JSON y prueba las posiciones exactas de error que te da.