Learn JSON
JSON (JavaScript Object Notation) is a lightweight, text-based format for representing structured data that both humans and machines can read easily.
What Is JSON?
JSON is a plain-text data format built from two simple structures: a collection of name/value pairs (an object) and an ordered list of values (an array). Despite the name, JSON is not tied to JavaScript — it is language-independent, and libraries exist to read and write it in Python, Java, C#, PHP, Go, and virtually every other modern language.
JSON grew out of JavaScript object literal syntax in the early 2000s, but it was formalized as its own specification (ECMA-404 and RFC 8259) so that any programming environment could parse and generate it without needing a JavaScript engine.
Why JSON Exists
Before JSON became popular, XML was the dominant format for exchanging structured data between systems. XML is powerful but verbose: every value needs an opening and closing tag, attributes add extra complexity, and parsing it typically requires a dedicated library with significant overhead. JSON was designed to solve the same problem — transmitting structured data between a server and a client — with far less ceremony.
A Simple JSON Document
<!DOCTYPE html>
<html>
<body>
<h2>Result</h2>
<p id="demo"></p>
<script>
const data = {
"name": "Ada Lovelace",
"born": 1815,
"programmer": true,
"languages": ["Analytical Engine Notation"]
};
document.getElementById("demo").innerHTML = data.name;
</script>
</body>
</html>Where JSON Is Used
- Web APIs — nearly every modern REST or GraphQL API sends and receives JSON.
- Configuration files — tools like package.json, tsconfig.json, and many others store settings in JSON.
- Data storage — NoSQL databases such as MongoDB store documents in JSON-like formats natively.
- Data interchange between services — microservices frequently pass messages as JSON over HTTP or message queues.
- Browser storage — localStorage and sessionStorage commonly hold serialized JSON strings.
Because nearly every language ships with (or has a lightweight library for) a JSON parser, it has become the de facto standard for data interchange on the web, replacing XML in the vast majority of new APIs.
Fetching JSON From an API
<!DOCTYPE html>
<html>
<body>
<h2>Result</h2>
<p id="demo"></p>
<script>
fetch("https://api.example.com/users/1")
.then(response => response.json())
.then(data => console.log(data.name));
</script>
</body>
</html>JSON vs. JavaScript Objects
A JSON document looks almost identical to a JavaScript object literal, which is why the two are often confused. The key difference is that JSON is a string format meant for storage and transmission, while a JavaScript object is a live, in-memory value. You convert between the two using JSON.parse() (string to object) and JSON.stringify() (object to string), both covered in later lessons.
Converting Between the Two
<!DOCTYPE html>
<html>
<body>
<h2>Result</h2>
<p id="demo"></p>
<script>
const obj = { city: "Paris", population: 2148000 };
const json = JSON.stringify(obj);
const parsed = JSON.parse(json);
console.log(json, typeof json);
console.log(parsed, typeof parsed);
</script>
</body>
</html>Exercise: JSON Introduction
What does the abbreviation "JSON" stand for?
Frequently Asked Questions
- What is JSON actually used for?
- Moving structured data between systems: API responses, configuration files, and anything one program needs to hand to another. It is text, so it crosses languages and platforms without a shared runtime.
- What is the difference between JSON and a JavaScript object?
- JSON is a text format that borrows JavaScript's syntax. It requires double-quoted keys, allows only a fixed set of value types, and cannot hold functions, comments or trailing commas. A JavaScript object is a live value in memory with none of those restrictions.
- Why does my JSON fail to parse?
- Nearly always a trailing comma, a single quote where a double quote belongs, an unquoted key, or a stray newline inside a string. Run the text through a validator; the reported position is usually a character or two after the real mistake.
