JSON vs XML

Before JSON became the favorite, XML was the standard way to send structured data, and you still meet it in feeds, vector graphics, and office documents. Seeing the same data in both formats shows why JSON took over the web, and where XML still earns its place.

// The Same Data, Two Ways

{
  "student": {
    "name": "Ava",
    "grade": 10,
    "clubs": ["robotics", "chess"]
  }
}

<student>
  <name>Ava</name>
  <grade>10</grade>
  <clubs>
    <club>robotics</club>
    <club>chess</club>
  </clubs>
</student>

Both describe the same student. XML marks every piece with an opening and a closing tag, and it has no built-in idea of an array, so the list of clubs becomes a <clubs> element containing several <club> elements.

// XML in Thirty Seconds

• The data is a tree of elements, each written <tag>content</tag>
• There must be exactly one root element that holds everything else
• Every opening tag needs a matching closing tag, and tags must nest properly
• An element can carry attributes: <student id="7">
• Everything is text. XML has no numbers, booleans, or null unless a program decides what the text means

// Side by Side

// JSON Is Smaller

const json = '{"name":"Ava","grade":10}';
const xml = "<student><name>Ava</name><grade>10</grade></student>";
console.log(json.length);
console.log(xml.length);

On a big list of records the difference adds up, which matters for loading time on a phone connection.

// Reading JSON in JavaScript

JSON becomes ordinary objects and arrays with one call, because JSON was modeled on JavaScript values:

const data = JSON.parse('{"name":"Ava","clubs":["robotics","chess"]}');
console.log(data.name);
console.log(data.clubs[1]);

// Reading XML in JavaScript

XML needs a parser that builds a document. The browser has one called DOMParser. You then search the document with querySelector and read text with textContent, or an attribute with getAttribute:

const text = `<student id="7"><name>Ava</name><clubs><club>robotics</club><club>chess</club></clubs></student>`;
const doc = new DOMParser().parseFromString(text, "application/xml");

console.log(doc.querySelector("name").textContent);
console.log(doc.querySelector("student").getAttribute("id"));
console.log(doc.querySelectorAll("club").length);
console.log(doc.querySelectorAll("club")[1].textContent);

Notice that the id comes back as the text "7", not the number 7. XML values are always text until you convert them.

// Bad XML Does Not Throw

Unlike JSON.parse, DOMParser does not throw an error for broken XML. It quietly returns a document that contains a parsererror element, so you have to look for it:

const bad = "<student><name>Ava</student>";
const doc = new DOMParser().parseFromString(bad, "application/xml");
console.log(doc.querySelector("parsererror") !== null);

const good = "<student><name>Ava</name></student>";
const ok = new DOMParser().parseFromString(good, "application/xml");
console.log(ok.querySelector("parsererror") !== null);

// Why JSON Won the Web

• It is shorter, so it loads faster
• It maps straight onto the objects, arrays, strings, and numbers JavaScript already has, so JSON.parse does all the work
• It is easy for people to read and write
• Almost every language can read it

// Where XML Still Wins

XML is not gone. It suits documents (text mixed with markup), data that needs comments or attributes, and tools built on its strict rules:

• Feeds such as RSS and Atom, which podcast and news apps read
• SVG, the vector image format, is XML
• Office files like Word and Excel documents are zipped XML
• Sitemaps that tell search engines about a website
• Many older business services and configuration files

// Quick Check

const doc = new DOMParser().parseFromString('<a id="5"></a>', "application/xml");
console.log(typeof doc.querySelector("a").getAttribute("id"));

// Try It

▶ Open Playground

1. Click Open Playground and run it. Which format gives the shorter text?
2. Write the XML for a pet with a name and two toys, then read the second toy with querySelectorAll
3. Break the XML by removing a closing tag and detect the problem with parsererror
4. Find one place you have seen XML in real life (an RSS feed, an SVG image, a sitemap) and look at its source