Introduction
JSON formatting mistakes are among the most common issues developers encounter. These seemingly small errors can cause significant problems, from broken APIs to frustrated users. Understanding these common pitfalls can save you hours of debugging time.
In this article, we'll explore the 7 most common JSON formatting mistakes and how to avoid them. Each mistake includes examples and solutions to help you write better JSON.
1. Missing Quotes Around Property Names
JSON requires all property names to be enclosed in double quotes, unlike JavaScript objects.
❌ Incorrect:
{
name: "John",
age: 30,
city: "New York"
}✅ Correct:
{
"name": "John",
"age": 30,
"city": "New York"
}2. Trailing Commas
JSON doesn't allow trailing commas, which are valid in JavaScript but will cause parsing errors in JSON.
❌ Incorrect:
{
"name": "John",
"age": 30,
"city": "New York",
}✅ Correct:
{
"name": "John",
"age": 30,
"city": "New York"
}3. Using Single Quotes Instead of Double Quotes
JSON only supports double quotes for strings, not single quotes like JavaScript.
❌ Incorrect:
{
'name': 'John',
'age': 30,
'city': 'New York'
}✅ Correct:
{
"name": "John",
"age": 30,
"city": "New York"
}4. Unescaped Special Characters
Special characters in strings must be properly escaped in JSON.
❌ Incorrect:
{
"message": "He said "Hello" to me"
}✅ Correct:
{
"message": "He said "Hello" to me"
}5. Invalid Number Formats
JSON has specific rules for number formatting that differ from JavaScript.
❌ Incorrect:
{
"price": 10.50,
"quantity": 1e3,
"discount": .15
}✅ Correct:
{
"price": 10.50,
"quantity": 1000,
"discount": 0.15
}6. Mixing Data Types in Arrays
While technically valid, mixing data types in arrays can cause confusion and parsing issues.
⚠️ Problematic:
{
"data": [1, "two", true, null, {"key": "value"}]
}✅ Better:
{
"numbers": [1, 2, 3, 4, 5],
"strings": ["one", "two", "three"],
"booleans": [true, false, true]
}7. Inconsistent Naming Conventions
While not a syntax error, inconsistent naming can cause confusion and integration issues.
⚠️ Inconsistent:
{
"firstName": "John",
"last_name": "Doe",
"EmailAddress": "john@example.com",
"phoneNumber": "123-456-7890"
}✅ Consistent:
{
"firstName": "John",
"lastName": "Doe",
"emailAddress": "john@example.com",
"phoneNumber": "123-456-7890"
}How to Avoid These Mistakes
1. Use a JSON Validator
Always validate your JSON using tools like JsonHub.dev's JSON validator before using it in production.
2. Use JSON.stringify()
When generating JSON from JavaScript objects, use JSON.stringify() to ensure proper formatting.
3. Follow a Style Guide
Establish and follow consistent naming conventions and formatting rules for your team.
4. Use TypeScript
TypeScript can help catch many JSON-related errors at compile time.
Conclusion
JSON formatting mistakes are common but easily avoidable. By understanding these common pitfalls and following best practices, you can write more reliable JSON and avoid frustrating debugging sessions.
Remember to always validate your JSON, use consistent naming conventions, and leverage tools and libraries that can help catch these issues early in your development process.