You think your JSON is fine because JSON.parse didn’t throw? In reality, being parseable doesn’t mean the data is correct. What do you do when the backend returns {user_id: 123} (unquoted key)? The API expects an email field, but you only see mail? These are the three layers of JSON validation — most tutorials only cover the first. This post breaks down the 3 layers and how the Piick JSON formatter pinpoints exact error locations.

The three levels of JSON validation

Validation has three layers, and each solves a different problem:

  • Syntax layer: Whether the string is legal JSON — quotes, commas, and brackets all match. JSON.parse does this by default.
  • Structure layer: Whether the data matches a predefined schema — is user an object, is tags an array, are required fields present. JSON Schema is the de facto standard here.
  • Semantic layer: Whether the values make sense — is status in a valid enum, is age between 0 and 150, does email have the right format. This layer relies on business code, or libraries like Zod and Ajv.

90% of bugs live in the latter two layers. The syntax layer is just the entry ticket.

Syntactically correct isn’t the same as data-correct

Here’s a real scenario: the API is supposed to return { "code": 0, "data": { "userId": 123 } }, but actually returns { "data": { "userid": 123 } } — wrong casing. JSON.parse passes, but the frontend reads userId and gets undefined, so the UI shows blank. This kind of bug is particularly hard to track down in production.

The fix: use JSON Schema to generate TypeScript types, or do schema validation at the request layer. Treat the schema as the API contract and reject anything that doesn’t match immediately, instead of waiting for runtime errors.

5 common JSON errors and how to debug them

  1. Trailing commas {"a":1,} — remove the last comma, or use the Piick JSON formatter’s tolerant mode to strip them automatically
  2. Single-quoted strings {'a':1} — replace globally with double quotes, or let tolerant mode handle it
  3. Unquoted keys {a:1} — wrap keys in double quotes
  4. Leftover comments // xxx — delete them, or let tolerant mode strip them
  5. BOM header {"a":1} — save as UTF-8 without BOM

Debugging tip: don’t count brackets by eye. Use the tool’s “show line numbers” feature directly.

How to pinpoint error locations after parsing

JSON.parse errors only say Unexpected token without telling you where. Chrome DevTools, Postman, and VS Code plugins can show line numbers, but they all require manual copy-paste.

More precise is the Piick JSON formatter — it reads the position N from V8’s error, converts it to a line and column number, and displays it in the error banner. Paste broken JSON in and you’ll see exactly which line and column the error is on. For schema validation starting points, check the official JSON Schema implementations list.

Open the Piick JSON formatter now, paste in a JSON string, and try out the precise error locations it gives you.