← Back to Blog

The Complete JSON Guide: Structure, Pitfalls, and Modern Usage

What Is JSON?

JSON (JavaScript Object Notation, RFC 8259) is a lightweight, language-independent data-interchange format. It describes structured data as minimal text that humans can read directly and virtually every programming language can parse at low cost. Almost every app you open, every REST API you call, and every NoSQL document you write exchanges data through JSON.

JSON defeated XML as the de facto standard of the web for three reasons: it is simple (six types cover most cases), strict (no ambiguity, predictable parsing), and universal (native support from browsers to embedded devices).

The Six Data Types of JSON

The first step to mastering JSON is remembering it has exactly six value types:

Type Example Notes
String "oltool" Must be double-quoted; supports \n, \t, \uXXXX escapes
Number 42, 3.14, -0.5 No integer/float distinction; always a double
Boolean true / false Lowercase, not a string
Null null "Present but empty", distinct from "key absent"
Object {"k": "v"} Unordered key/value pairs; keys must be strings
Array [1, 2, 3] Ordered list of values of any type

A real-world JSON usually mixes several types:

{
  "user": {
    "id": "u_1001",
    "name": "denni",
    "active": true,
    "roles": ["admin", "editor"],
    "metadata": null
  },
  "score": 98.5
}

Nested Structures: Objects and Arrays Combined

JSON's power comes from the fact that objects can nest objects, arrays can nest arrays, and objects and arrays can nest each other. This combination expresses arbitrarily complex data while the syntax stays consistent:

  • Use an object for "the attributes of one record".
  • Use an array for "a set of homogeneous elements".
  • Use an array of objects for "a table" (the most common API response shape).

When nesting gets deep, the human eye struggles. During development, expand a one-line blob into an indented tree with a JSON formatter, browse it as a collapsible tree with a JSON tree viewer, or convert a large backend response into a spreadsheet with JSON to CSV.

Typical Usage: APIs, Config, and Storage

1. API data exchange. This is JSON's home turf. Request bodies, responses, and webhook callbacks are almost always JSON. Its strict typing means "what you send is what you get" without pre-negotiating a schema.

2. Configuration files. From package.json to tsconfig.json, the Node ecosystem treats JSON as the default declarative format. Human-edited config is more often written in YAML and converted to JSON at build time — use YAML to JSON and JSON to YAML to convert both ways.

3. Document storage. MongoDB, DynamoDB, and RedisJSON model data directly as JSON documents, letting fields flex per record — ideal for fast schema evolution.

JSON vs XML / YAML / MessagePack

Dimension JSON XML YAML MessagePack
Readability Good Fair Best Poor (binary)
Parse speed Fast Slow Slow Fastest
Comments No Yes Yes No
Size Medium Large Medium Smallest
Typical use API / storage Legacy / SOAP Human config High-perf transport

The takeaway is clear: pick JSON for high-frequency machine exchange, YAML for human-written config, and MessagePack for extreme performance/bandwidth (it keeps JSON semantics underneath). XML mostly survives in banking and telecom legacy systems; new projects rarely choose it.

High-Frequency Pitfalls (Watch Out)

1. Large-number precision loss

This is the most insidious and dangerous trap. JSON has no integer type; every number parses as an IEEE 754 double. Integers above 2^53 (about 9 quadrillion) cannot be represented exactly — typical victims are 64-bit snowflake IDs, database primary keys, and ID numbers. Once JSON.parse runs in JavaScript, the large integer is silently rounded to an approximation, with no error.

Defense: transmit large integers as strings across languages; on the frontend, use JSON.parse's reviver with BigInt, or a parser that supports big numbers.

2. Trailing commas and quotes

JSON is stricter than JavaScript: the last element of an object/array must not have a trailing comma, keys must be double-quoted (single quotes are illegal), and double quotes inside strings must be escaped as \". Writings that run fine in the browser console all fail in a standard JSON parser.

3. Newlines and invisible characters in strings

Multi-line text copied from Excel, Word, or a web textbox often carries real newlines, tabs, or a BOM. Standard JSON requires newlines inside strings to be written as \n; a raw newline fails parsing outright. Running a formatter/validator before submitting saves a lot of debugging.

4. Circular references and functions

JSON.stringify throws a TypeError on circular objects, and it silently drops functions, undefined, and Symbols. If your data mixes these types, the serialized result quietly diverges from expectations — especially when stringifying whole frontend state.

5. JSON injection

Concatenating untrusted user input directly into a JSON string (instead of using JSON.stringify), or parsing untrusted strings with eval / JSON.parse on the frontend, can enable injection. Always use standard serialize/parse APIs and validate external input.

Modern Workflow Tips

All of these run locally in Mawu's online tools — your data stays in your browser, never uploaded, and works offline.

Summary

JSON looks simple but is the most important "lingua franca" of modern software. Learning its six types and nesting rules is just the start; the real edge comes from vigilance about precision traps, strict syntax, and injection risk. Treat it as a contract to be respected and validated, not a string to be concatenated carelessly, and you will eliminate a whole class of bizarre bugs from your APIs and configs.

Frequently Asked Questions

What is the difference between JSON and a JavaScript object?

JSON is a language-agnostic text format that borrows JavaScript object-literal syntax, but it is just a string: keys must be double-quoted, and comments, functions, undefined, and trailing commas are forbidden. A JavaScript object is an in-memory data structure whose keys may be unquoted and which supports functions and more types.

Why do large integers lose precision in JSON?

JSON has no separate integer type; every number is parsed as an IEEE 754 double. Integers larger than 2^53 (such as 64-bit snowflake IDs or database primary keys) cannot be represented exactly and get rounded. Transmit large integers as strings, or use a parser that supports BigInt explicitly.

Can JSON have comments?

Standard JSON (RFC 8259) does not allow comments. If you need annotations, common options are JSONC (e.g. VS Code settings, tsconfig), a separate metadata field, or a comment-friendly format like YAML/TOML. Do not rely on non-standard parsers that quietly allow comments, as that breaks interoperability.

How do I troubleshoot JSON parse failures?

Most parse errors come from a trailing comma, single instead of double quotes, unquoted keys, unescaped newlines or tabs inside strings, or a BOM / invisible characters. Locate the error line and column with a formatter/validator first, then fix item by item. In production, catch parse exceptions and log the raw payload for reproduction.

Should I choose JSON or YAML?

JSON fits high-frequency machine-to-machine exchange (fast parse, strict typing, huge ecosystem); YAML fits human-authored config (readable, comment-friendly, indentation expresses hierarchy). They convert freely: write config in YAML, convert to JSON at runtime — a common DevOps pattern.

← Back to Blog