TextSorter

The Practical Guide to JSON: How to Format, Validate, and Fix Broken Payloads Without Losing Your Hair

· 20 min read

If you write software in the 21st century, you spend half your waking life staring at JSON.

JSON is everywhere. It is in your REST APIs, your GraphQL responses, your configuration files, your database dumps, your webhooks, and your browser network tab.

And yet, despite being only a few simple rules, JSON has caused more developer headaches than almost anything else.

You have probably had this happen: you copy an API payload from a log file. You paste it into your code editor. You run your program.

SyntaxError: Unexpected token ' in JSON at position 42

You stare at the screen. You squint. You wonder why your life took this turn. You spend ten minutes searching for an invisible single quote or a misplaced comma at the end of an array.

In this guide, we are going to master JSON completely. We will cover the strict rules of the RFC 8259 specification, explore the sneaky traps that break production apps, and show you how to format, validate, and convert JSON data in seconds.

                    +------------------------------------+
                    |       HOW JSON PARSING WORKS       |
                    +-----------------+------------------+
                                      |
            +-------------------------+-------------------------+
            |                                                   |
            v                                                   v
+-------------------------+                         +-------------------------+
|   VALID JSON STRING     |                         |   BROKEN JAVASCRIPT OBJ |
|   {"name": "Alice"}     |                         |   {name: 'Alice',}      |
+------------+------------+                         +------------+------------+
             |                                                   |
             v                                                   v
+-------------------------+                         +-------------------------+
|   JSON.parse() SUCCESS  |                         |   SyntaxError THROWN!   |
|   Clean object in memory|                         |   Unquoted key or comma |
+-------------------------+                         +-------------------------+

The Six Data Types of JSON

JSON stands for JavaScript Object Notation, but it is not JavaScript. It is a strict data interchange format that any programming language (Python, Go, Java, Rust, C#) can understand.

There are only six basic types allowed in valid JSON:

1. Strings

Strings must ALWAYS be wrapped in double quotes ("hello"). Single quotes ('hello') are strictly forbidden. You can escape special characters with a backslash, like \" or \\ or \n.

2. Numbers

Numbers can be integers (42), negative numbers (-10), or decimals (3.14159). You can also use scientific notation (1e5). But you cannot have leading zeros (0123 is illegal), and you cannot use NaN or Infinity.

3. Booleans

Only two literal values: true or false in all lowercase. TRUE, FALSE, 1, or 0 are not JSON booleans.

4. Null

The literal word null in all lowercase, indicating an empty or non-existent value. undefined does not exist in JSON.

5. Objects

A collection of key and value pairs wrapped in curly brackets {}. Every single key must be a string enclosed in double quotes.

6. Arrays

An ordered list of values wrapped in square brackets [], separated by commas.

+-----------+-----------------------+---------------------------------------+
| Data Type | Valid Example         | Invalid Mistake                       |
+-----------+-----------------------+---------------------------------------+
| String    | "hello world"         | 'hello world' (Single quotes illegal) |
| Number    | 42 or -3.14           | 042 (Leading zero illegal)            |
| Boolean   | true or false         | TRUE or False (Must be lowercase)     |
| Null      | null                  | undefined (Not allowed in JSON)       |
| Object    | {"user": "alex"}      | {user: "alex"} (Unquoted keys illegal)|
| Array     | [1, 2, 3]             | [1, 2, 3,] (Trailing comma illegal)   |
+-----------+-----------------------+---------------------------------------+

The Three Sneaky Traps That Break Production Apps

Let us talk about the bugs that catch even senior engineers off guard.

Trap 1: The 64-Bit Integer Precision Bug

JavaScript numbers are represented using the IEEE 754 floating point standard, which gives you 53 bits of safe integer precision (up to 9,007,199,254,740,991).

If your backend database uses 64-bit integer IDs (like Snowflake IDs or Twitter tweet IDs) and sends this: {"id": 1583920194829104829}

When JavaScript runs JSON.parse(), it silently rounds the number to: 1583920194829104900

Your app will now request the wrong record from the database! The Fix: Always serialize large 64-bit IDs as strings in your API ({"id": "1583920194829104829"}).

Trap 2: Circular References

If an object points to itself, running JSON.stringify() will crash your server with a fatal error: TypeError: Converting circular structure to JSON

Trap 3: Comments Are Forbidden

Unlike JavaScript code, you cannot add // comment or /* comment */ inside a JSON file. If you need comments in your configuration files, use YAML or JSON5 instead. You can convert between them using our YAML to JSON Converter.

Formatting and Validating JSON Like a Pro

When APIs return minified single-line JSON, it looks like a giant wall of text:

{"status":"success","data":{"users":[{"id":1,"name":"Sarah","role":"admin"},{"id":2,"name":"Marcus","role":"editor"}]}}

Reading that by eye is impossible.

When you paste it into our Free JSON Formatter & Validator, it formats it with clean two-space indentation:

{
  "status": "success",
  "data": {
    "users": [
      {
        "id": 1,
        "name": "Sarah",
        "role": "admin"
      },
      {
        "id": 2,
        "name": "Marcus",
        "role": "editor"
      }
    ]
  }
}

It checks every bracket, validates the syntax, and points out the exact line and column number if there is a syntax error.

Converting JSON Across Modern Formats

Modern developers frequently need to move data between different shapes:

Conclusion: Keep Your Data Clean and Private

JSON is the foundation of the modern web. Understanding its strict rules and common edge cases saves you hours of debugging time.

Whenever you need to format, validate, or convert JSON payloads, keep the TextSorter JSON Formatter handy. Everything runs 100% locally in your browser, keeping your API secrets and customer records safe.

Deep Dive: The V8 JavaScript Engine and JSON Optimization

Have you ever wondered how your web browser parses a 50-megabyte JSON file in a fraction of a second without crashing your computer?

It comes down to specialized optimizations built directly into modern JavaScript engines like Google V8 (used in Chrome, Edge, and Node.js) and SpiderMonkey (used in Firefox).

In the early days of JavaScript, parsing JSON was done using eval('(' + jsonString + ')'). Not only was this a massive security nightmare that allowed arbitrary code execution, but it was also painfully slow because the JavaScript compiler had to run full lexical and grammar analysis on every single character.

When Douglas Crockford formalized RFC 4627, browser vendors introduced native C++ parsers. In V8, JSON.parse() is implemented in highly optimized assembly and C++ that bypasses the JavaScript bytecode compiler entirely.

Let us look at how the V8 parser processes a JSON stream:

  1. Fast Scan Pass: The parser scans the byte stream sequentially, validating character encoding and token boundaries.
  2. Direct Memory Allocation: Instead of creating intermediate JavaScript objects, V8 allocates memory directly in the V8 Heap for arrays and object shapes.
  3. Hidden Classes (Shapes): If your JSON contains an array of 10,000 objects with the exact same keys (like [{"id": 1, "name": "Alice"}, {"id": 2, "name": "Bob"}]), V8 creates a single internal Map shape. Every object in the array shares the exact same memory structure, reducing RAM consumption by over 70%.

Why Object.assign and Spread Operators Can De-Optimize JSON

When working with large JSON datasets in React or Vue state management, developers often clone objects using the object spread operator ({ ...item }).

While convenient, doing this inside a loop of 50,000 items forces the JavaScript engine to allocate 50,000 brand new heap objects and re-run garbage collection passes.

Here is a performance comparison:

// SLOW: Creates 50,000 intermediate heap allocations
const updatedList = largeJsonArray.map(item => ({
  ...item,
  processedAt: Date.now()
}));

// FAST: Mutates in-place or uses typed array buffers
for (let i = 0; i < largeJsonArray.length; i++) {
  largeJsonArray[i].processedAt = Date.now();
}

Advanced JSON Schema: Automating API Validation in Production

When building public REST APIs or microservices, you cannot simply hope that client apps send valid data. You need a formal contract.

JSON Schema (draft 2020-12) is the industry standard for declaring the exact shape, types, constraints, and required fields for any JSON payload.

Here is a complete, production-ready JSON Schema example for a user registration endpoint:

{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "title": "UserRegistrationPayload",
  "type": "object",
  "required": ["username", "email", "age", "roles"],
  "properties": {
    "username": {
      "type": "string",
      "minLength": 3,
      "maxLength": 30,
      "pattern": "^[a-zA-Z0-9_-]+$"
    },
    "email": {
      "type": "string",
      "format": "email"
    },
    "age": {
      "type": "integer",
      "minimum": 18,
      "maximum": 120
    },
    "roles": {
      "type": "array",
      "items": {
        "type": "string",
        "enum": ["viewer", "editor", "admin"]
      },
      "uniqueItems": true,
      "minItems": 1
    },
    "preferences": {
      "type": "object",
      "properties": {
        "darkMode": { "type": "boolean" },
        "emailNotifications": { "type": "boolean" }
      },
      "additionalProperties": false
    }
  },
  "additionalProperties": false
}

By running incoming HTTP requests through a validator like Ajv (Another JSON Schema Validator) in Node.js or Pydantic in Python, you catch malformed payloads at the API gateway before they ever reach your database.

Edge Cases: Handling Special Characters and Unicode Escapes

One of the most confusing parts of JSON is character escaping.

Under RFC 8259, strings must escape quotation marks, reverse solidus (backslashes), and control characters (U+0000 through U+001F).

Here is the complete table of valid JSON escape sequences:

+---------------------+-------------------------------+-----------------------------------+
| Escape Sequence     | Character Represented         | Unicode Code Point                |
+---------------------+-------------------------------+-----------------------------------+
| \"                  | Quotation mark                | U+0022                            |
| \\                 | Reverse solidus (Backslash)   | U+005C                            |
| \/                  | Solidus (Forward slash)       | U+002F (Optional escaping)        |
| \b                  | Backspace                     | U+0008                            |
| \f                  | Form feed                     | U+000C                            |
| \n                  | Line feed (Newline)           | U+000A                            |
| \r                  | Carriage return               | U+000D                            |
| \t                  | Tab                           | U+0009                            |
| \uXXXX              | 4-hex digit Unicode character | U+XXXX (e.g. \u00A9 for (c))      |
+---------------------+-------------------------------+-----------------------------------+

Notice that forward slashes (/) can be optionally escaped as \/. This historic quirk was introduced so that JSON could be safely embedded inside HTML <script> tags without prematurely closing the script tag with </script>.

Real-World Case Studies: When Bad JSON Caused Production Outages

Case Study 1: The E-Commerce Price Corruption Bug

A major retail platform stored discount pricing rules in a central JSON document. A developer accidentally formatted a discount value as a string instead of a floating point number: {"discountPercentage": "15"} In the checkout service, a JavaScript expression calculated the final price as: const finalPrice = originalPrice - (originalPrice * discountPercentage / 100); Because JavaScript performs automatic string coercion, originalPrice * "15" evaluated correctly to a number, but when a different payment microservice written in Go parsed the field into a float64 struct, it threw an unhandled unmarshaling error, rejecting all credit card payments during peak Black Friday sales.

Case Study 2: The Infinite Recursive JSON Loop

A customer service ticketing system allowed agents to link related tickets. When an agent linked Ticket #101 to Ticket #102, and another agent linked Ticket #102 back to Ticket #101, an automated webhook system attempted to serialize the full ticket tree into JSON: const payload = JSON.stringify(ticketTree); The Node.js event loop immediately crashed with RangeError: Maximum call stack size exceeded, taking down the customer support portal for three hours. Adding cyclic reference detection or shallow depth limits completely prevents this vulnerability.

Practical Recipes for Cleaning Broken JSON in the Browser

When working with third-party webhooks or legacy database exports, you often receive “almost-JSON” text:

  • Single quotes instead of double quotes
  • Unquoted property names
  • Trailing commas at the end of objects and arrays
  • Newlines inside unescaped string values

You can use the following client-side sanitizer logic to clean and fix minor JSON syntax errors automatically before passing it to JSON.parse():

function sanitizeLooseJson(text) {
  return text
    // Replace single quotes around keys and values with double quotes
    .replace(/'([^'\\]*(\\.[^'\\]*)*)'/g, '"$1"')
    // Add quotes around unquoted object keys
    .replace(/([{,]s*)([a-zA-Z0-9_]+?)s*:/g, '$1"$2":')
    // Strip trailing commas before closing braces and brackets
    .replace(/,s*([}]])/g, '$1')
    // Clean up empty whitespace
    .trim();
}

You can run this automatically using the TextSorter JSON Formatter to fix syntax errors in one click.

Summary Checklist for Production JSON Hygiene

Before you deploy any service that parses or emits JSON, run through this final sanity checklist:

  1. Double Quotes Everywhere: Are all keys and string values wrapped in strict double quotes?
  2. No Trailing Commas: Have you verified there are no commas after the final array item or object key?
  3. Strings for 64-Bit IDs: Are large database IDs and snowflakes serialized as strings to prevent JavaScript precision loss?
  4. UTF-8 Encoding: Is the payload explicitly transmitted with the Content-Type: application/json; charset=utf-8 HTTP header?
  5. Schema Validation: Do your API endpoints validate payloads against a strict JSON Schema before executing business logic?
  6. Zero Telemetry in Tools: Are you formatting and testing private production payloads using 100% client-side local browser tools?

Mastering these core principles guarantees that your web applications, API pipelines, and cloud services communicate reliably without unexpected parsing crashes.

Frequently Asked Questions

Why does JSON hate single quotes and trailing commas?

JSON was designed by Douglas Crockford to be as strict and simple as possible so that any programming language could parse it reliably. That means all keys and strings must use strict double quotes, and trailing commas after the last item are forbidden by RFC 8259 rules.

Why does JSON.parse() silently corrupt large numbers in JavaScript?

JavaScript represents numbers as 64-bit floating point values. Any integer larger than 9,007,199,254,740,991 loses precision. If an API sends you a giant database ID like 1583920194829104829, JavaScript rounds the last digits to zero unless the number is wrapped in quotation marks as a string.

How can I generate TypeScript interfaces from a JSON response automatically?

You can paste your raw payload into the TextSorter JSON to Types generator. It analyzes your keys, detects nested objects and arrays, and outputs clean TypeScript interfaces instantly.

Is it safe to paste confidential company JSON into online formatters?

Most random online formatters send your text to their servers, risking data leaks. The TextSorter JSON Formatter runs 100% locally in your browser memory using client-side JavaScript, ensuring API keys and customer records stay private.