JSON vs XML
JSON and XML both describe structured, human-readable data, but JSON's lighter syntax and native fit with JavaScript made it the default choice for modern web APIs.
Two Formats, One Goal
Before JSON became dominant, XML (Extensible Markup Language) was the standard for exchanging structured data between systems, especially in enterprise SOAP-based web services. Both formats let you represent nested, labeled data - but they go about it very differently, and those differences ended up mattering a great deal for the web.
The same data in JSON
<!DOCTYPE html>
<html>
<body>
<h2>Result</h2>
<p id="demo"></p>
<script>
const bookJson = {
"title": "The Silent Orbit",
"author": "L. Marsh",
"year": 2019,
"tags": ["sci-fi", "space"]
};
console.log(JSON.stringify(bookJson));
</script>
</body>
</html>The same data in XML
<!DOCTYPE html>
<html>
<body>
<h2>Result</h2>
<p id="demo"></p>
<script>
<!--
<book>
<title>The Silent Orbit</title>
<author>L. Marsh</author>
<year>2019</year>
<tags>
<tag>sci-fi</tag>
<tag>space</tag>
</tags>
</book>
-->
console.log("XML has no native array - repeated elements simulate a list");
</script>
</body>
</html>Structural Differences
XML wraps every value in an opening and closing tag, and can additionally carry metadata in tag attributes. JSON has no concept of attributes at all - every piece of data is just a key-value pair, a value in an array, or a nested structure. This makes JSON's grammar smaller and its documents visibly shorter for equivalent data.
Why JSON Won for Web APIs
JSON's rise tracks directly with the rise of JavaScript-heavy web applications. Because JSON's syntax is a subset of JavaScript object literal syntax, browsers could parse it natively without a separate library, and the format maps directly onto the objects and arrays developers already work with in code. XML, by contrast, requires dedicated parsing (DOMParser, XPath, or XML-to-object mapping libraries) even in JavaScript environments.
- Smaller payloads: no closing tags means less data over the wire
- Direct language mapping: JSON.parse() yields native objects/arrays with zero extra libraries
- Simpler mental model: no attributes-vs-elements ambiguity that XML schemas require
- Ecosystem momentum: REST APIs, npm packages, and browser tooling standardized around JSON
- XML still persists where document markup, namespaces, or strict schema validation (XSD) matter, like some enterprise, legacy SOAP, or publishing systems
Parsing cost in practice
<!DOCTYPE html>
<html>
<body>
<h2>Result</h2>
<p id="demo"></p>
<script>
// JSON: one built-in call
const data = JSON.parse('{"status":"ok","count":3}');
console.log(data.count); // 3
// XML: requires a parser object before you can read anything
const xmlString = "<result><status>ok</status><count>3</count></result>";
const parser = new DOMParser();
const doc = parser.parseFromString(xmlString, "application/xml");
console.log(doc.querySelector("count").textContent); // "3" - always a string, needs manual conversion
</script>
</body>
</html>Exercise: JSON vs XML
What do JSON and XML have in common?
