Home / Tech / JSON Formatter

JSON Formatter

AC
Reviewed by Alex Chen, Tech Lead
Last Updated: November 2025

JSON Syntax Rules

JSON (JavaScript Object Notation) is a lightweight data format for transmitting structured data. It's strict—one tiny syntax error breaks everything.

✅ Valid JSON Rules:
  • Double quotes only: "name" not 'name'
  • All keys quoted: {"name": "John"} not {name: "John"}
  • No trailing commas: {"a": 1, "b": 2} not {"a": 1, "b": 2,}
  • No comments: JSON doesn't support // or /* */
  • 6 data types: String, Number, Boolean, Null, Object, Array (no undefined, NaN, Infinity)

The Trailing Comma Trap

🚨 #1 Reason APIs Fail

JavaScript allows trailing commas. JSON doesn't. Developers copy-paste JavaScript objects into JSON APIs and get cryptic errors.

✅ Valid JSON:
{"name": "John", "age": 30}
❌ Invalid JSON (trailing comma):
{"name": "John", "age": 30,}

Error: Unexpected token } in JSON at position 28

💡 Expert Tip: Minify for Production

"Pretty JSON is for humans. Minified JSON is for machines." — Alex Chen, Tech Lead

Whitespace in JSON is cosmetic. Minifying removes spaces, tabs, and newlines:

  • 100 KB formatted JSON → 70-80 KB minified (20-30% savings)
  • 1M API requests/day → Save 20-30 GB bandwidth/day
  • Combine with gzip → Total reduction of 70-90%

Best practice: Store formatted JSON in your editor for debugging, serve minified JSON from APIs for performance.

⚠️ Common Mistakes

1. Using Single Quotes

JavaScript accepts both 'hello' and "hello", but JSON only accepts double quotes. This produces: Unexpected token ' in JSON at position 1. Always use double quotes for strings.

2. Forgetting to Quote Object Keys

JavaScript allows {name: "John"} (unquoted keys). JSON requires {"name": "John"}. If you copy JavaScript object literals into JSON, your API will reject them.

3. Quoting Numbers as Strings

{"age": "30"} creates a string, not a number. When your JavaScript code expects typeof age === "number", it fails. Numbers don't need quotes: {"age": 30}.

4. Using Undefined, NaN, or Infinity

JSON doesn't support JavaScript's undefined, NaN, or Infinity. Use null instead of undefined. For NaN/Infinity, either convert to null or use quoted strings like "NaN" (then parse manually).

JSON vs JavaScript Object

Feature JavaScript Object JSON
Quotes Single or double Double only
Key quotes Optional Required
Trailing comma Allowed Forbidden
Comments Supported Not supported
Data types undefined, NaN, functions, etc. 6 types only (no undefined)

❓ Frequently Asked Questions

What's the most common JSON error?

Trailing commas. JavaScript developers write {name: 'John', age: 30,} and wonder why their API fails. JSON forbids trailing commas after the last property. Other common errors: using single quotes instead of double quotes, forgetting to quote object keys, and using comments (JSON doesn't support //).

Why does my JSON work in JavaScript but fail validation?

JavaScript is more forgiving than JSON. JavaScript accepts: single quotes ('hello'), unquoted keys ({name: 'John'}), trailing commas, and comments. Valid JSON requires: double quotes only ("hello"), quoted keys ({"name": "John"}), no trailing commas, no comments. Use JSON.parse() to test—if it works, it's valid JSON.

Should I minify JSON for production?

Yes, for API responses. Minifying removes whitespace and newlines, reducing payload size by 10-30%. For a 100 KB API response, minification saves 10-30 KB per request. With 1M requests/day, that's 10-30 GB saved. Enable gzip compression too—combining both can reduce JSON size by 70-90%.

What are the JSON data types?

JSON supports 6 data types: String ("hello"), Number (123 or 12.5, no quotes), Boolean (true/false, no quotes), Null (null, not undefined), Object ({"key": "value"}), Array ([1, 2, 3]). Common mistakes: quoting numbers ("123" is a string, not a number), using undefined instead of null, writing NaN or Infinity (not valid JSON).

What's the difference between JSON and JSON5?

JSON5 is a superset of JSON that allows: trailing commas, single quotes, unquoted keys, comments (// and /* */), and more JavaScript-like syntax. It's great for config files (package.json, tsconfig.json) but NOT for APIs—browsers and most servers only accept standard JSON. Use JSON5 for human-written configs, standard JSON for data interchange.

📚 References