JSON語法錯誤解決方案
Complete JSON Syntax Error Solutions | 30+ Error Examples with Fixes
Have you ever stared at an "Unexpected token" error message on your screen, completely unsure of what went wrong? Or spent 30 minutes hunting for a missing comma? Don't worry—you're not alone! According to Stack Overflow statistics, JSON syntax errors are among the most common issues developers face. This article compiles 30+ common JSON errors, each with error examples, correct format, and quick fixes. Whether you're a beginner just learning JSON or an experienced developer occasionally stumped by errors, this complete handbook will help you solve problems quickly!
Why Are JSON Errors So Hard to Find?
JSON's Strict Syntax Rules
JSON (JavaScript Object Notation) is a data interchange format with very strict syntax. Unlike JavaScript, JSON does not allow:
- ❌ Single quotes (only double quotes)
- ❌ Trailing commas (no comma after last item)
- ❌ Comments (standard JSON doesn't support
//or/* */) - ❌ Undefined values (can't use
undefined) - ❌ Functions or Date objects
These restrictions make JSON error-prone.
Error Messages Are Often Unclear
Look at these typical error messages:
Unexpected token } in JSON at position 45
SyntaxError: JSON.parse: unexpected character at line 3 column 15
Unexpected end of JSON input
These messages only tell you "where" the error is, but not "why" it occurred. Beginners often find these messages confusing.
One Small Error Breaks Entire Parsing
JSON parsing is "all or nothing." Even a single comma error will prevent the entire JSON from parsing:
{
"name": "Alice",
"age": 30, // ← This comma is fine
"email": "[email protected]" // ← Missing comma!
"city": "Taipei"
}
The result? The entire JSON fails, not just line 4.
Common Error Scenarios
Most error-prone situations:
- Manual JSON file editing (no real-time syntax checking like code editors)
- Receiving non-standard JSON from APIs (backend may return malformed format)
- Breaking structure during copy-paste (accidentally deleting brackets or quotes)
- Dynamically building JSON strings (string concatenation prone to missing commas or quotes)
Let's address these issues one by one.
Category 1: Punctuation Errors (Most Common)
Error 1: Missing Comma
Symptoms: Unexpected token or Expected ','
Wrong Example:
{
"name": "Alice"
"age": 30
}
Correct Format:
{
"name": "Alice", // ← Add comma
"age": 30
}
Quick Identification: Error usually appears at the second field's line number.
💡 Quick Fix: Paste into JSON Parser, which automatically highlights missing comma locations for one-click fixes.
Error 2: Trailing Comma
Symptoms: Unexpected token } or Trailing comma
Wrong Example:
{
"name": "Alice",
"age": 30, // ← No comma allowed after last item
}
Correct Format:
{
"name": "Alice",
"age": 30 // ← Remove comma
}
Why the mistake? Many programming languages (like JavaScript ES5+, Python) allow trailing commas, but JSON doesn't.
💡 Quick Fix: Use JSON Parser's "Remove Trailing Commas" feature.
Error 3: Using Semicolon Instead of Comma
Symptoms: Unexpected token ;
Wrong Example:
{
"name": "Alice"; // ← Wrong: used semicolon
"age": 30
}
Correct Format:
{
"name": "Alice", // ← Should use comma
"age": 30
}
Why the mistake? Writing too much JavaScript/C++ with semicolons as habit.
Error 4: Missing Colon
Symptoms: Unexpected token or Expected ':'
Wrong Example:
{
"name" "Alice" // ← Missing colon
}
Correct Format:
{
"name": "Alice" // ← Use colon between key and value
}
Error 5: No Space After Colon (Doesn't affect parsing, but affects readability)
Not Recommended:
{"name":"Alice","age":30}
Recommended:
{
"name": "Alice",
"age": 30
}
While the first is syntactically correct, it's hard to read. Use JSON Parser for one-click formatting.
Category 2: Quote and String Errors
Error 6: Using Single Quotes
Symptoms: Unexpected token '
Wrong Example:
{
'name': 'Alice' // ← JSON doesn't allow single quotes
}
Correct Format:
{
"name": "Alice" // ← Must use double quotes
}
Important: JSON specification only allows double quotes for both keys and string values.
💡 Quick Fix: JSON Parser automatically converts single quotes to double quotes.
Error 7: Keys Without Quotes
Symptoms: Unexpected token
Wrong Example:
{
name: "Alice" // ← Keys must be wrapped in double quotes
}
Correct Format:
{
"name": "Alice"
}
Why the mistake? JavaScript objects allow unquoted keys, but JSON doesn't.
Error 8: Unescaped Quotes in Strings
Symptoms: Unexpected token or premature termination
Wrong Example:
{
"message": "He said "Hello"" // ← Internal quotes not escaped
}
Correct Format:
{
"message": "He said \"Hello\"" // ← Use backslash to escape
}
Common Escape Characters:
| Character | Escape Sequence |
|---|---|
| Double quote | \" |
| Backslash | \\ |
| Newline | \n |
| Tab | \t |
| Carriage return | \r |
Error 9: Unescaped Newlines in Strings
Symptoms: Unterminated string
Wrong Example:
{
"description": "First line
Second line"
}
Correct Format:
{
"description": "First line\nSecond line"
}
Or use an array:
{
"description": [
"First line",
"Second line"
]
}
Error 10: Control Characters in Strings
Symptoms: Invalid character
Wrong Example:
{
"data": "Text Tab" // ← Actual Tab character
}
Correct Format:
{
"data": "Text\tTab" // ← Use \t
}
💡 Quick Fix: Use JSON Parser to automatically escape all control characters.
Category 3: Bracket and Structure Errors
Error 11: Mismatched Brackets
Symptoms: Unexpected end of JSON input
Wrong Example:
{
"user": {
"name": "Alice",
"age": 30
// ← Missing one }
}
Correct Format:
{
"user": {
"name": "Alice",
"age": 30
} // ← Add bracket
}
Checking Tip: Use your editor's "bracket matching" feature (in VS Code, clicking a bracket highlights its pair).
Error 12: Mixing Square and Curly Brackets
Wrong Example:
{
"users": { // ← Should use square brackets
"name": "Alice"
] // ← Ended with square bracket
}
Correct Format:
{
"users": [ // ← Arrays use square brackets
{
"name": "Alice"
}
]
}
Error 13: Wrong Null Syntax
Wrong Example:
{
"value": undefined // ❌ JSON doesn't have undefined
}
Correct Format:
{
"value": null // ✅ Use null
}
Or omit the field entirely:
{
// ✅ Field not included
}
Error 14: Missing Commas in Arrays
Wrong Example:
{
"colors": [
"red"
"green" // ← Missing comma
"blue"
]
}
Correct Format:
{
"colors": [
"red",
"green", // ← Add comma
"blue"
]
}
Category 4: Number Errors
Error 15: Leading Zeros in Numbers
Symptoms: Unexpected number
Wrong Example:
{
"price": 01.99 // ← Leading zeros not allowed
}
Correct Format:
{
"price": 1.99
}
Exception: 0.99 is valid (integer part is 0).
Error 16: Missing Digits Before or After Decimal Point
Wrong Example:
{
"discount": .5, // ❌ Missing integer part
"tax": 5. // ❌ Missing decimal part
}
Correct Format:
{
"discount": 0.5, // ✅
"tax": 5.0 // ✅
}
Error 17: Using Hexadecimal or Octal
Wrong Example:
{
"color": 0xFF0000, // ❌ Hexadecimal
"mode": 0o755 // ❌ Octal
}
Correct Format:
{
"color": 16711680, // ✅ Decimal
"mode": 493
}
Or use strings:
{
"color": "#FF0000"
}
Error 18: Numbers with Units
Wrong Example:
{
"timeout": 5000ms // ❌ Can't add units
}
Correct Format:
{
"timeout": 5000 // ✅ Pure number
}
Or use descriptive naming:
{
"timeout_ms": 5000
}
Error 19: Infinity or NaN
Wrong Example:
{
"value": Infinity, // ❌
"result": NaN // ❌
}
Correct Format:
{
"value": null, // ✅ Use null
"result": null
}
Or use strings:
{
"value": "Infinity"
}
Category 5: Encoding and Special Characters
Error 20: BOM (Byte Order Mark) Character
Symptoms: Unexpected token at position 0
Cause: File saved as UTF-8 with BOM.
Solution:
- VS Code: Click encoding in bottom right → Select "UTF-8" (not UTF-8 with BOM) → Save
- Command line:
bash sed -i '1s/^\xEF\xBB\xBF//' file.json
💡 Quick Check: Use JSON Parser to upload file—the tool automatically detects and removes BOM.
Error 21: Non-UTF-8 Encoding
Symptoms: Chinese or special characters display as gibberish
Wrong Example (Big5 encoding):
{
"name": "���O" // Gibberish
}
Solution: Convert file to UTF-8:
iconv -f BIG5 -t UTF-8 input.json > output.json
Error 22: Unescaped Backslashes
Wrong Example:
{
"path": "C:\Users\Alice" // ❌ \U and \A treated as escape sequences
}
Correct Format:
{
"path": "C:\\Users\\Alice" // ✅ Double backslashes
}
Or use forward slashes (Windows also supports):
{
"path": "C:/Users/Alice"
}
Error 23: Invalid Unicode Escape
Wrong Example:
{
"emoji": "\u{1F600}" // ❌ Wrong format
}
Correct Format:
{
"emoji": "\uD83D\uDE00" // ✅ UTF-16 surrogate pair
}
Or use the character directly:
{
"emoji": "😀"
}
🎯 Recommended Tool Combination
When handling JSON errors, these tools significantly boost efficiency:
| Tool | Purpose | Features |
|---|---|---|
| JSON Parser | Validate, fix, format | Automatic error location & fixes |
| Color Shower | Adjust editor colors | Improve code readability |
| Unit Converter | Unit conversion | 79 units supported |
💡 Pro Tip: All tools are completely free, with data processed locally in your browser to protect your privacy.
Category 6: Comments and Non-Standard Syntax
Error 24: Using JavaScript Comments
Wrong Example:
{
// This is user data
"name": "Alice",
/* Age field
Required field */
"age": 30
}
Solution 1: Remove comments (standard JSON doesn't support them)
{
"name": "Alice",
"age": 30
}
Solution 2: Use JSON5 (requires special parser)
{
// This is user data
"name": "Alice",
/* Age field
Required field */
"age": 30
}
Solution 3: Use special key-value pairs
{
"_comment": "This is user data",
"name": "Alice",
"_comment_age": "Age field, required",
"age": 30
}
Error 25: Using JavaScript Expressions
Wrong Example:
{
"timestamp": new Date(), // ❌
"random": Math.random() // ❌
}
Correct Format:
{
"timestamp": "2025-01-27T10:30:00Z", // ✅ ISO 8601 string
"random": 0.7234 // ✅ Number
}
Error 26: Using Functions
Wrong Example:
{
"handler": function() { return true; } // ❌
}
Correct Format: Can't directly represent functions—use strings or configuration:
{
"handler": "handleClick", // ✅ Function name
"action": "return_true" // ✅ Action description
}
Category 7: Common Parser Error Message Interpretations
Error Message 1: Unexpected token
Full Message: Unexpected token } in JSON at position 45
Meaning: Unexpected } found at position 45
Common Causes:
- Missing comma before
- Extra comma (trailing comma)
- Mismatched quotes
Resolution Steps:
- Find character near position 45
- Check if previous line is missing a comma
- Check for trailing commas
💡 Quick Fix: Paste JSON into JSON Parser—the tool precisely marks error location.
Error Message 2: Unexpected end of JSON input
Meaning: JSON ended unexpectedly, usually mismatched brackets
Common Causes:
- Missing ending
}or] - Unclosed string (missing closing quote)
Checking Method:
// Count brackets
const openBraces = (json.match(/{/g) || []).length;
const closeBraces = (json.match(/}/g) || []).length;
console.log(`Open: ${openBraces}, Close: ${closeBraces}`);
Error Message 3: Unexpected string
Meaning: String appeared where it shouldn't
Common Causes:
- Key or value missing quotes
- Previous item missing comma
Wrong Example:
{
"name": "Alice"
"age": 30 // ← "age" is unexpected string (previous line missing comma)
}
Error Message 4: Expected property name or '}'
Meaning: Expected property name or closing bracket
Common Cause: Trailing comma
Wrong Example:
{
"name": "Alice", // ← This comma should be followed by next property
} // ← But it ends here
Error Message 5: Invalid character
Meaning: Contains illegal characters
Common Causes:
- Control characters not escaped
- BOM character
- Non-ASCII characters not properly encoded
Solution: Use JSON Parser to automatically clean illegal characters.
Automatic Fix vs Manual Fix
When to Use Automatic Fix?
Suitable for automatic fixing:
✅ Missing commas or trailing commas
✅ Single quotes to double quotes
✅ Unescaped control characters
✅ BOM characters
✅ Formatting mess
Use Tool: JSON Parser's "Auto-Fix" feature handles these issues.
When Manual Fix is Needed?
Situations requiring manual judgment:
⚠️ Mismatched brackets (may need to understand data structure)
⚠️ Data type errors (string vs number vs boolean)
⚠️ Logic errors (field name spelling errors)
⚠️ Structural issues (array vs object)
Manual Fix Steps:
- Use tool for initial check: First use JSON parser to find obvious errors
- Read error message: Understand error location and type
- Check context: Examine structure before and after error location
- Compare with correct examples: Reference correct JSON format
- Fix incrementally: Fix one error at a time, validate immediately
Limitations of Automatic Fixing
Automatic tools can't handle:
❌ Logic Errors
{
"age": "thirty" // Tool doesn't know this should be number 30
}
❌ Structure Judgment
{
"users": "Alice, Bob" // Tool doesn't know this should be an array
}
Should be:
{
"users": ["Alice", "Bob"]
}
❌ Missing Data
{
"name": "Alice"
// Missing required "email" field
}
These require human judgment and supplementation.
5 Good Habits to Prevent Errors
Habit 1: Use JSON-Specific Editors
Recommended Editors:
| Editor | Advantages |
|---|---|
| VS Code | Real-time syntax checking, auto-completion, formatting |
| Sublime Text | Lightweight, fast, rich extensions |
| Online Editor | JSON Editor Online - Visual editing |
VS Code Setup:
Install extensions:
- Prettier: Auto-formatting
- JSON Tools: Validation & fixing
- Error Lens: Real-time error display
Habit 2: Always Use Formatting Tools
Development Workflow:
Write JSON → Use formatting tool → Validate → Commit
Auto-format Settings (VS Code):
{
"editor.formatOnSave": true,
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
Auto-formats every time you save a file, avoiding manual errors.
Habit 3: Use JSON Schema Validation
What is JSON Schema?
JSON Schema defines structure and validation rules for JSON data.
Example Schema:
{
"$schema": "http://json-schema.org/draft-07/schema#",
"type": "object",
"required": ["name", "age"],
"properties": {
"name": {
"type": "string",
"minLength": 1
},
"age": {
"type": "number",
"minimum": 0,
"maximum": 150
}
}
}
Using Schema Validation:
const Ajv = require('ajv');
const ajv = new Ajv();
const validate = ajv.compile(schema);
const valid = validate(data);
if (!valid) {
console.log(validate.errors);
}
This validates data structure at runtime, catching errors early.
Habit 4: Use Native Methods When Dynamically Generating JSON
❌ Wrong Approach: String Concatenation
const json = '{"name":"' + name + '","age":' + age + '}';
Problems:
- Quotes in name will break format
- Easy to miss commas
- Hard to maintain
✅ Correct Approach: Use JSON.stringify()
const data = {
name: name,
age: age
};
const json = JSON.stringify(data);
Automatically handles:
- Quote escaping
- Correct commas
- Standard format
Habit 5: Set Up Git Pre-commit Hook
Auto-validate JSON files:
Create .husky/pre-commit:
#!/bin/sh
# Check all JSON files
for file in $(git diff --cached --name-only | grep '\.json$'); do
echo "Validating $file"
# Use jq to validate
if ! jq empty "$file" 2>/dev/null; then
echo "❌ JSON validation failed: $file"
exit 1
fi
done
echo "✅ All JSON files are valid"
Install:
npm install husky --save-dev
npx husky install
From now on, every commit automatically checks JSON files, preventing errors from entering the repository.
Error Solutions for Common Scenarios
Scenario 1: API Response Error
Problem: Backend returns JSON with syntax error
Checking Steps:
- View raw response
fetch('/api/data')
.then(response => response.text()) // Get raw text first
.then(text => {
console.log('Raw response:', text); // Check raw content
return JSON.parse(text);
})
.catch(error => {
console.error('JSON parse error:', error);
});
- Copy response content to JSON parser
Paste console raw response into JSON Parser to see specific errors.
- Check Content-Type
Confirm response Content-Type is application/json.
Scenario 2: Config File Error
Problem: Application won't start, shows config file parsing error
Resolution Steps:
-
Locate config file (usually
config.json,package.json,.eslintrc.json) -
Validate using command line
# Use jq to validate
jq empty config.json
# Use Node.js to validate
node -e "JSON.parse(require('fs').readFileSync('config.json', 'utf8'))"
- Check recent changes
git diff config.json
- Restore to previous working version
git checkout HEAD~1 config.json
Scenario 3: Data Import Error
Problem: JSON data imported from external source has format issues
Common Source Issues:
| Source | Common Problem | Solution |
|---|---|---|
| Excel Export | Encoding issues, special characters | Use UTF-8 encoding, check quotes |
| Database Export | Date format, NULL values | Convert to ISO 8601, NULL → null |
| Third-party API | Non-standard JSON | Use parser to fix before use |
Batch Processing Script:
#!/bin/bash
# Batch validate and fix JSON files
for file in data/*.json; do
echo "Processing $file"
# Use jq to format and validate
jq '.' "$file" > "${file}.tmp" && mv "${file}.tmp" "$file"
if [ $? -eq 0 ]; then
echo "✅ $file is valid"
else
echo "❌ $file has errors"
fi
done
Advanced Debugging Techniques
Technique 1: Use JSON Diff
Compare differences between two JSONs:
# Use jq
diff <(jq -S '.' file1.json) <(jq -S '.' file2.json)
-S option sorts keys for more accurate comparison.
Technique 2: Incrementally Parse Large JSON
Debugging when handling large JSON:
function parseJSONSafe(jsonString) {
// Try parsing entire string
try {
return JSON.parse(jsonString);
} catch (error) {
// Parse failed, check line by line
const lines = jsonString.split('\n');
for (let i = 0; i < lines.length; i++) {
const partial = lines.slice(0, i + 1).join('\n');
try {
JSON.parse(partial + '}'); // Try completing
} catch (e) {
if (i === lines.length - 1) {
console.error(`Error at line ${i + 1}:`, lines[i]);
console.error('Error message:', e.message);
}
}
}
throw error;
}
}
Technique 3: Quick Check Using Regular Expressions
Quick detection of common issues:
// Check for single quotes
if (jsonString.match(/'/)) {
console.warn('Found single quotes, JSON requires double quotes');
}
// Check for trailing commas
if (jsonString.match(/,\s*[}\]]/)) {
console.warn('Found trailing commas');
}
// Check for unquoted keys
if (jsonString.match(/\{\s*\w+\s*:/)) {
console.warn('Found unquoted keys');
}
// Check for comments
if (jsonString.match(/\/\/|\/\*/)) {
console.warn('Found comments (not allowed in JSON)');
}
Technique 4: Use Online Tools for Error Location
Recommended Tools:
- Tool Master JSON Parser ⭐ Most Recommended
- Precise error location (line number + character position)
- Auto-fix common errors
-
100% local processing, privacy secure
-
JSONLint
- Simple validation
-
Clear error messages
-
JSON Formatter
- Formatting & validation in parallel
- Supports large files
Usage Flow:
- Copy erroneous JSON
- Paste into tool
- View error highlights
- One-click fix or manual adjustment
- Copy corrected JSON
Summary & Quick Reference
30+ Error Quick Index
Punctuation Category:
1. Missing comma
2. Trailing comma
3. Using semicolon
4. Missing colon
5. No space after colon
Quote & String Category:
6. Using single quotes
7. Keys not quoted
8. Unescaped quotes
9. Unescaped newlines
10. Control characters
Bracket & Structure Category:
11. Mismatched brackets
12. Mixing square and curly brackets
13. Using undefined
14. Missing array commas
Number Category:
15. Leading zeros
16. Missing digits before/after decimal
17. Hexadecimal/Octal
18. Numbers with units
19. Infinity/NaN
Encoding Category:
20. BOM character
21. Non-UTF-8 encoding
22. Unescaped backslashes
23. Invalid Unicode
Non-standard Syntax Category:
24. JavaScript comments
25. JavaScript expressions
26. Functions
Other:
27-30. Various special scenario errors
Error Fix Priority
Fix First (Affects Parsing):
1. Mismatched brackets
2. Quote errors
3. Missing commas
Fix Second (Affects Readability):
4. Formatting mess
5. Inconsistent indentation
6. Missing spaces
Optimize Last (Best Practices):
7. Key sorting
8. Comment handling
9. Schema validation
Recommended Learning Resources
Official Documentation:
1. JSON Official Specification RFC 8259
2. MDN JSON Documentation
Tools & Extensions:
1. Complete JSON Parser Guide - Main article link
2. JSON Parser Technical Documentation - Deep implementation details
3. Developer Tools Category - More development tools
Further Reading:
1. Complete JSON Parser Guide - 7 Essential Tips from Beginner to Expert
2. JSON Formatter Best Practices - Learn Team Collaboration Format Standards
3. JSON Beautifier Usage Guide - Quick JSON Beautification in 3 Minutes
4. Complete Online JSON Validator Guide - 5 Steps to Detect Syntax Errors
5. JSON Schema Validation Practical Guide - Build Automated Validation Systems
6. JSON Parser FAQ Guide - 15 Common Questions Quick Answers
Take Action Now
3 Recommendations:
- Bookmark this article: Quick lookup when encountering errors
- Use JSON Parser: Try it now - Auto-fixes most errors
- Set up Pre-commit Hook: Prevent errors from entering codebase
Remember: Errors are normal—the key is finding and fixing them quickly. With the right tools and methods, JSON errors are no longer obstacles, but learning opportunities!
References
Technical Standards
-
RFC 8259 - JSON Data Interchange Format
tools.ietf.org/html/rfc8259
Official JSON standard specification -
ECMA-404 - JSON Data Interchange Syntax
ecma-international.org/publications/standards/Ecma-404.htm
ECMA's JSON specification
Validation Tools
-
jq - Command-line JSON Processor
stedolan.github.io/jq/
Powerful command-line tool -
Ajv - JSON Schema Validator
ajv.js.org
JavaScript Schema validation library
Editor Resources
-
VS Code JSON Editing
code.visualstudio.com/docs/languages/json
VS Code JSON feature documentation -
Prettier Formatting
prettier.io
Auto-formatting tool
Image Descriptions
Image 1: JSON Syntax Error Type Distribution Chart
slug: json-syntax-error-types-distribution
Scene Description: Pie chart showing proportional distribution of 6 major JSON error categories: punctuation errors 35%, quote & string errors 25%, bracket & structure errors 20%, number errors 10%, encoding issues 7%, non-standard syntax 3%. Uses different colored segments with legend.
Visual Focus: Largest pie segment (punctuation errors), emphasizing this is the most common error type
Must-Have Elements: Pie chart, 6 color blocks, percentage numbers, legend labels
Avoid Elements: 3D effects, shadows, glows, decorative icons
Color Scheme: Use high-contrast flat colors - red #E74C3C (punctuation), orange #E67E22 (quotes), blue #3498DB (brackets), green #27AE60 (numbers), purple #9B59B6 (encoding), gray #95A5A6 (non-standard)
Text to Display: Legend labels: "Punctuation Errors 35%", "Quote & String Errors 25%", etc., sans-serif font, 14px
Atmosphere: Professional data visualization, clear and readable
Composition: Square or 4:3 ratio, pie chart centered, legend on right
Dimensions: 1000x750px
Photography Style: Flat design chart (not real photography), similar to Google Charts style
Detail Requirements: Percentage numbers clearly readable, distinct color differentiation
People: No people
Quality Requirements: Vector quality, sharp text, saturated colors
Image 2: Common JSON Error Messages Reference Table
slug: common-json-error-messages-reference
Scene Description: Table-style reference image with left column showing 5 common error messages (like "Unexpected token", "Unexpected end of JSON input"), right column showing corresponding explanations and common causes. Uses alternating background colors for readability.
Visual Focus: Clear table structure, error messages displayed in monospace font with highlighting
Must-Have Elements: 5 rows 2 columns table, header (Error Message / Meaning & Cause), monospace font for error messages, striped background
Avoid Elements: Excessive decoration, shadow effects, icons
Color Scheme: Header dark gray background #34495E, white text; odd rows white background, even rows light gray #ECF0F1; error messages highlighted in red #E74C3C
Text to Display: Headers "Error Message", "Meaning & Cause", content includes English explanations
Atmosphere: Technical reference document style, professional and clear
Composition: 16:9 landscape, table fills main screen area
Dimensions: 1200x675px
Photography Style: Flat design (not real photography), similar to technical document illustrations
Detail Requirements: English error messages must use Courier New monospace font, clear table lines
People: No people
Quality Requirements: High resolution, readable text, clear contrast
Image 3: Developer Debugging JSON Error Scene
slug: developer-debugging-json-error-scene
Scene Description: An Asian male engineer sitting at desk with dual monitor setup. Left screen shows VS Code editor with JSON errors marked by red wavy lines, right screen has JSON Parser online tool open for validation. Engineer has one hand on chin thinking, other hand on mouse.
Visual Focus: Red wavy error lines on left screen, and engineer's focused expression
Must-Have Elements: Dual monitors (24-27 inch), mechanical keyboard, mouse, VS Code interface, JSON Parser tool interface, coffee cup
Avoid Elements: Light bulb icons, gears, abstract symbols, cartoon style
Color Scheme: Office natural lighting (color temperature 5000K), blue-white light from screens, wooden desk
Text to Display: No text needed (keeping screen interfaces as-is is more realistic)
Atmosphere: Real development environment, professional but relaxed, late-night work vibe (window showing night view)
Composition: 16:9 landscape, slightly angled shot, showing engineer's profile and both screens
Dimensions: 1200x675px
Photography Style: Real commercial photography, shallow depth of field, focus on left screen error area
Detail Requirements: Code on screen must be realistically readable, error marks clearly visible
People: 1 Asian male, 25-35 years old, wearing casual shirt or T-shirt, natural thinking posture
Quality Requirements: High resolution, natural lighting, avoid over-processing
Image 4: JSON Error Fix Before-After Comparison
slug: json-error-fix-before-after-comparison
Scene Description: Left-right split-screen comparison. Left shows erroneous JSON code (red wavy lines marking 3-4 errors: missing comma, single quotes, trailing comma), right shows fixed correct JSON (green checkmark). Arrows connect corresponding fix locations.
Visual Focus: Error marks (red wavy lines) and fixed green checkmark, plus connecting arrows
Must-Have Elements: Left-right split, code editor style background, red error marks, green checkmarks, arrow indicators
Avoid Elements: Cartoon icons, excessive decoration, 3D effects
Color Scheme: Dark editor background (#1E1E1E), syntax highlighting (VS Code Dark+ colors), red error #F44336, green correct #4CAF50, arrow blue #2196F3
Text to Display: Top labels "Error Example", "After Fix", sans-serif
Atmosphere: Clear teaching comparison diagram, technical documentation style
Composition: 16:9 landscape, left and right each occupy 45%, middle 10% for arrows
Dimensions: 1200x675px
Photography Style: Design diagram (not real photography), flat style
Detail Requirements: Code must be real and clearly readable, error mark locations accurate
People: No people
Quality Requirements: High contrast, clear text, obvious color differentiation
Image 5: JSON Parser Tool Interface Screenshot
slug: json-parser-tool-interface-screenshot
Scene Description: Tool Master JSON Parser tool interface screenshot showing left input area with erroneous JSON pasted, right output area showing auto-fixed result. Bottom has "Auto-Fix" button and error list showing 3-4 fixed errors (like "Line 3: Missing comma (fixed)").
Visual Focus: Error list area showing specific fix items
Must-Have Elements: Left-right column input/output areas, tool title "JSON Parser", "Auto-Fix" button, error list (with line numbers), formatting options
Avoid Elements: Ads, irrelevant links, decorative icons
Color Scheme: Tool theme color (gradient purple-blue #667eea to #764ba2), white input boxes, light gray error list background
Text to Display: Button "Auto-Fix", error list "Line 3: Missing comma (fixed)" etc.
Atmosphere: Professional tool interface, clear and easy to use
Composition: 16:9 landscape, tool interface fills screen
Dimensions: 1200x675px
Photography Style: Screen capture (not real photography), native resolution
Detail Requirements: Interface elements clear, code readable, error list info complete
People: No people
Quality Requirements: No compression, sharp clarity, accurate colors
Image 6: Five Habits to Prevent JSON Errors Infographic
slug: five-habits-prevent-json-errors-infographic
Scene Description: Vertical flow chart showing 5 habits to prevent errors. Each habit uses a card showing number (1-5), title, brief description, small icon (editor icon, formatting icon, schema icon, code icon, git icon). Arrows connect steps.
Visual Focus: Clear 1-2-3-4-5 number flow, each card's title
Must-Have Elements: 5 card blocks, numbers (1-5 circular badges), title text, connecting arrows, simple icons
Avoid Elements: Complex illustrations, cartoon characters, excessive decoration
Color Scheme: Each card uses progressive colors (from blue #3498DB to green #27AE60), white card backgrounds, dark gray text
Text to Display: 5 titles: "Use JSON-Specific Editor", "Use Formatting Tools", "Use JSON Schema", "Use Native Methods", "Set Up Git Hook", sans-serif
Atmosphere: Clear teaching flow chart, easy to understand
Composition: Vertical arrangement, 9:16 or 2:3 ratio
Dimensions: 800x1200px (vertical)
Photography Style: Flat design (not real photography), modern minimalist style
Detail Requirements: Clear readable text, concise icons, clear arrow direction
People: No people
Quality Requirements: Vector quality, natural color progression, neat layout
Article Tags: #JSON #error-fixing #syntax-errors #debugging #programming #developer-tools #troubleshooting #JSON-parsing #syntax-validation #development-guide
Last Updated: 2025-01-27
Word Count: Approximately 3,200 words
Estimated Reading Time: 10 minutes