We've all been there: staring at a "SyntaxError: Unexpected token" for 15 minutes, only to realize we left a trailing comma at the end of a list. JSON is the language of the modern web, but it's also incredibly unforgiving. One tiny typo is all it takes to break an entire application.
JSON (JavaScript Object Notation) was designed to be easy for humans to read and write. For the most part, it is. But because it's so strict, it's also prone to those "hidden" errors that are hard to spot with the naked eye. This guide covers the essential rules of JSON and how to avoid the mistakes that trip up even experienced developers.
The Golden Rules of JSON
If you want your JSON to be valid, you have to follow a handful of non-negotiable rules. Most "invalid JSON" errors come from breaking one of these:
- Quotes Must Be Double: In JavaScript, you can use single quotes or backticks. In JSON, only double quotes (
") are allowed for both keys and string values. Single quotes will break the parser every time. - No Trailing Commas: This is the most common one. JavaScript is okay with
[1, 2,], but JSON will throw an error if you have a comma after the last item in an array or object. - Keys are Strings: Every key in a JSON object must be wrapped in double quotes.
{ "id": 1 }is valid;{ id: 1 }is not. - No Comments: JSON does not support comments. No
//, no/* */. If you need to include notes, you have to add them as actual data fields (like"_comment": "note here"), though this isn't standard practice.
The "Big 7" Common Errors
When a JSON parser fails, it's usually because of one of these:
| Error Type | Invalid Example | Valid Fix |
|---|---|---|
| Single Quotes | {'key': 'val'} | {"key": "val"} |
| Trailing Comma | [1, 2, 3,] | [1, 2, 3] |
| Unquoted Key | { name: "Dev" } | { "name": "Dev" } |
| Bad Number | 007 | 7 |
Why You Need a Formatter (Beautifier)
APIs often return "minified" JSON — everything on one line with no spaces — to save bandwidth. While machines love this, it's impossible for humans to debug. Formatting (or beautifying) JSON isn't just about making it look nice; it's about revealing the structure of the data so you can actually understand it.
A good formatter will:
- Add consistent indentation (usually 2 or 4 spaces).
- Place each key-value pair on its own line.
- Properly align brackets and braces.
- Highlight different data types in different colors.
Debug JSON Faster
Don't spend your time manually hunting for missing commas. Use our free JSON Validator & Formatter. It gives you real-time feedback, highlights exactly where your syntax is broken, and turns minified blobs into an interactive tree you can actually explore.
It's 100% client-side, meaning your data never leaves your browser. It's the fastest way to get your JSON right and get back to actually building your project.