Working with JSON: A Beginner Guide to Data Interchange
A beginner-friendly deep dive on JSON: the six data types, strict syntax rules, validation and formatting, string escaping, converting to and from other formats, and using JSON safely in code.
Step 1 — Understand what JSON is and why it dominates
JSON (JavaScript Object Notation) is a lightweight, text-based format for representing structured data. It grew out of JavaScript object literal syntax but is language-independent: nearly every programming language can read and write it. Its dominance in modern APIs, configuration files, and data interchange comes from being both human-readable and machine-parseable — a rare combination.
A JSON value is one of six types: string (in double quotes), number, boolean (true or false), null, array (an ordered list in square brackets), and object (a set of key-value pairs in curly braces). Objects and arrays can nest arbitrarily, which lets JSON represent complex, hierarchical data — a user with an address that contains an array of phone numbers, each with a type and a value.
The format simplicity is its strength and its constraint. JSON has no comments, no dedicated date type (dates are conventionally represented as ISO 8601 strings), no multi-line strings, and no way to reference one part of the document from another. These limitations are deliberate — they keep parsing unambiguous — but they mean JSON is not suited to every data task, and workarounds (like JSON5 or JSON with comments) exist for cases where the constraints bite.
Step 2 — Read and write JSON syntax
The syntax is small and strict. Objects are curly-braced sets of key-value pairs, where keys must be double-quoted strings and values are separated by colons: {"name": "Ada", "age": 36}. Arrays are square-braced ordered lists: [1, 2, 3]. Strings use double quotes only — single quotes are invalid. A trailing comma after the last element is an error, which is a common source of broken JSON generated by hand.
Numbers are written plainly (42, 3.14, -7, 1.5e3) without quotes. Booleans are the unquoted lowercase words true and false. Null is the unquoted word null. These literal types are distinct from strings: "true" (a four-character string) is not the same as true (a boolean), and code that checks for one will not catch the other.
Nesting follows naturally: an object value can be another object or an array, and an array element can be an object, an array, or a primitive. {"users": [{"name": "Ada"}, {"name": "Grace"}]} is an object with one key whose value is an array of objects. Reading deeply nested JSON is a matter of following the keys and indices: data.users[1].name resolves to "Grace".
Step 3 — Validate and format JSON
Because JSON is strict, a single misplaced comma or quote makes the entire document unparseable. Validation is the first step in debugging any JSON that should work but does not. A validator parses the document and reports the exact location of the first syntax error, which is usually a missing comma, an extra comma, a single quote where a double quote is required, or an unescaped quote inside a string.
Formatting (pretty-printing) rewrites valid JSON with consistent indentation and line breaks, making it readable. Minification does the opposite, removing all whitespace to produce the smallest possible representation for transmission. The two forms are semantically identical — a parser produces the same data from either — but they serve different purposes: formatted JSON for humans reading and editing, minified JSON for efficient transfer.
The Code Tools include a JSON formatter and validator that handles both directions. When you receive minified JSON from an API and need to inspect it, formatting it makes the structure visible. When you are sending JSON to an API, minifying it reduces the payload. Keeping a formatter handy is the single most useful JSON habit, because reading a wall of unformatted JSON is where most errors hide.
Step 4 — Escape strings correctly
Strings in JSON must escape certain characters with a backslash: the double quote (\"), the backslash itself (\\), and control characters like newline (\n), tab (\t), and carriage return (\r). Unicode characters outside the basic range use \u followed by four hex digits. Failing to escape a double quote inside a string breaks the parse, because the parser treats it as the end of the string.
The most common escaping pitfall is embedding a string that contains quotes. A product description containing the phrase 7-inch screen must be written with the inner quote escaped, or the parser stops the string at that quote. HTML or code snippets inside JSON strings require the same care, because both use characters JSON treats specially.
Forward slashes may be escaped (\/) but do not need to be — JSON permits but does not require it. This historical quirk comes from the use of JSON inside HTML script tags, where a literal closing script sequence would end the tag. Modern usage rarely needs to escape slashes, but you will encounter them in JSON produced by older systems, and a validator will confirm they are harmless.
Step 5 — Convert between JSON and other formats
JSON is one of several data interchange formats, and converting between them is a common task. CSV (comma-separated values) is tabular and flat — each row is a record, each column a field. Converting JSON to CSV works cleanly when the JSON is an array of flat objects, but nested objects and arrays do not map to rows without flattening decisions that lose structure.
XML is hierarchical like JSON but uses tags instead of braces and is more verbose. Converting between JSON and XML is possible but lossy in edge cases, because XML distinguishes attributes from child elements and JSON does not. YAML is a superset of JSON that adds comments, multi-line strings, and a more readable indentation-based syntax — useful for configuration, but its complexity introduces parsing pitfalls JSON avoids.
The Conversion Tools handle JSON-to-CSV and related conversions, applying sensible defaults for the ambiguous cases (flattening nested objects with dot notation, for example). When a conversion is lossy — and conversions between differently-shaped formats often are — the job is to make the loss explicit rather than silent, so you know what structure was sacrificed to fit the target format.
Common mistakes and a worked example
The most common JSON error is the trailing comma. A list written as [1, 2, 3,] looks harmless but is invalid — the parser expects a value after the final comma and fails. The same applies to objects: a trailing comma after the last key is an error. Most editors flag this, but hand-written or generated JSON breaks here routinely. The second is single quotes: JSON requires double quotes for both keys and string values, full stop — single-quoted strings are invalid.
The third is confusing types. The string "true" is not the boolean true, and the string "42" is not the number 42. Code that checks a flag behaves differently for the string "true" (truthy) and the string "false" (also truthy, because non-empty strings are truthy in JavaScript). Always parse with the native parser and trust the types it produces; never hand-build JSON with string concatenation, which invites both type confusion and injection through unescaped quotes.
A worked example ties these together. Suppose you receive a user profile as minified JSON: an id of 1042, a name string, an active boolean, an array of role strings, and a nested meta object with a joined date. Reading it: the id is the number 1042, the name is a string, active is the boolean true, roles is an array, and meta.joined is a nested string. Each type is distinct and must be handled as its type — comparing the numeric id to the string "1042" with strict equality returns false, because a number is not a string. The Code Tools formatter, validator, and minifier handle all of this; the discipline when you write code is to parse, trust the types, and never use eval.
Step 6 — Use JSON safely in code
In JavaScript, JSON.parse() converts a JSON string into a native object, and JSON.stringify() does the reverse. parse() throws on invalid JSON, so wrapping it in try/catch is standard practice when the input is untrusted — a malformed response from an API should not crash your application. stringify() accepts parameters for formatting (null, 2 produces indented output) and for filtering which properties to include.
A subtle security point: never use eval() or function constructors to parse JSON, even though JSON is valid JavaScript syntax in most cases. eval() executes arbitrary code, so a malicious string that looks like JSON but contains script can run that script. JSON.parse() parses only data, never code, which is why it is the only safe way to handle untrusted JSON in the browser.
The Code Tools JSON formatter, validator, and minifier cover the everyday operations. For working with JSON in your own code, the discipline is: always validate untrusted input, always parse with JSON.parse (never eval), handle parse failures gracefully, and format for readability when editing by hand. JSON strictness is what makes it reliable — respecting that strictness, with a validator when editing and try/catch when parsing, is what keeps your data interchange robust.
Try the related tools