JavaScript

coding learning websites codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JSON vs XML


When we talk about data exchange between a client and a server, two formats often come up: JSON and XML.
Both are designed to store and transport data, but they do it in very different ways.

Before JSON became popular, XML was the standard format for many years. But as web apps became faster and lighter, developers started preferring JSON because it’s easier to read, smaller in size, and more efficient.

In this tutorial, we’ll compare JSON and XML in detail — structure, syntax, readability, and how they are used in real-world applications.

What is XML?

XML (Extensible Markup Language) is a markup language designed to store and transport data in a structured way.
It uses tags (similar to HTML) to define data.

Example:

<person>
  <name>Vicky</name>
  <age>28</age>
  <city>Mumbai</city>
</person>

Here:

  • <person> is the root element

  • <name>, <age>, and <city> are child elements

  • Data is stored between opening and closing tags

XML was widely used because it’s flexible, supports complex structures, and can be validated easily.

What is JSON?

As you already know, JSON (JavaScript Object Notation) is a lightweight data-interchange format that uses key/value pairs.
It’s simpler, faster, and more compact than XML.

The same data shown above in JSON looks like this:

{
  "name": "Vicky",
  "age": 28,
  "city": "Mumbai"
}

This version is much shorter, easier to read, and uses fewer characters — which is one of the main reasons JSON has replaced XML in most web applications.

JSON vs XML: Structural Difference

Let’s take a look at a slightly bigger example.

XML Example:

<employees>
  <employee>
    <name>Vicky</name>
    <role>Developer</role>
  </employee>
  <employee>
    <name>Sanjana</name>
    <role>Designer</role>
  </employee>
</employees>

JSON Example:

{
  "employees": [
    { "name": "Vicky", "role": "Developer" },
    { "name": "Sanjana", "role": "Designer" }
  ]
}

Both examples represent the same data — a list of employees and their roles.
However, JSON is shorter, cleaner, and easier to parse programmatically.

Key Differences Between JSON and XML

Here’s a detailed comparison to help you understand how both formats differ:

Feature JSON XML
Structure Key/value pairs Tags (like HTML)
Readability Easy for humans Verbose and harder to read
Data Size Smaller and faster Larger due to opening/closing tags
Data Type Support Supports numbers, strings, booleans, arrays, null Treats everything as text
Parsing Very fast Slower
Syntax Simple and minimal Complex and tag-based
Read/Write Ease Very easy in JavaScript Needs parsers like DOM/SAX
Comments Not supported Supported
Schema Validation Needs external tools Built-in via DTD/XSD
Primary Use Web APIs and configuration files Older systems, document storage

Example: JSON vs XML Data Representation

Let’s represent a bookstore in both formats.

JSON Example:

{
  "books": [
    { "title": "Learn JavaScript", "author": "Vicky", "price": 499 },
    { "title": "Master PHP", "author": "Sanjana", "price": 399 }
  ]
}

XML Example:

<books>
  <book>
    <title>Learn JavaScript</title>
    <author>Vicky</author>
    <price>499</price>
  </book>
  <book>
    <title>Master PHP</title>
    <author>Sanjana</author>
    <price>399</price>
  </book>
</books>

Now look carefully — the XML version repeats the opening and closing tags for every data point, making it longer.
JSON, on the other hand, uses a simple bracket-based structure.

Data Types in JSON vs XML

JSON supports multiple data types directly:

  • String

  • Number

  • Boolean

  • Array

  • Object

  • Null

Example:

{
  "name": "Vicky",
  "age": 28,
  "married": false,
  "children": ["Riya", "Aarav"],
  "address": { "city": "Delhi" },
  "spouse": null
}

XML, however, treats everything as text.
If you store a number or a boolean, it is still considered a string unless you define additional schema rules.

Example:

<person>
  <name>Vicky</name>
  <age>28</age>
  <married>false</married>
</person>

Here, 28 and false are both just plain text.

Parsing and Speed

Parsing means converting text data into usable programmatic data.

  • JSON is natively supported in JavaScript. You can easily parse it using:

    let obj = JSON.parse(jsonData);
    

    or convert back to a string with:

    let text = JSON.stringify(obj);
    
  • XML needs a parser (like DOM or SAX).
    Parsing XML requires more processing time because it needs to handle tags, attributes, and hierarchy.

So, when it comes to speed, JSON is significantly faster than XML.

Readability and Simplicity

JSON is designed to be simple and clean.
It’s short, uses fewer symbols, and is easy for both humans and machines to understand.

XML, while very structured, often looks bulky — especially when you have lots of nested elements.
For example, representing 100 products in XML would be almost double the size of the same data in JSON.

When XML Is Still Useful

Although JSON is now the default for most APIs and modern web applications, XML still has its place.

You might still find XML being used when:

  • You need document-style data (like invoices, e-books, or configuration files).

  • The system already uses XML (such as older enterprise applications).

  • You require data validation using XML Schema (XSD).

  • The format must support attributes or mixed content (text + tags).

So, while XML isn’t dead, it’s more common in backend systems and enterprise software than in modern web or mobile applications.

Why JSON Is More Popular Today

Here’s why most developers and APIs now prefer JSON over XML:

  1. Smaller File Size – Faster to download and transmit.

  2. Easier Parsing – Especially with JavaScript and web technologies.

  3. Language Compatibility – Every modern language supports JSON easily.

  4. Human-Friendly – Short, clean, and easy to understand.

  5. Ideal for APIs – REST APIs and AJAX both use JSON for quick communication.

In short, JSON is faster, simpler, and more web-friendly, which makes it the go-to choice for most modern development.

Summary of the Tutorial

Let’s recap what we’ve learned in this tutorial:

  • JSON and XML are both used to store and exchange data.

  • JSON uses key/value pairs, while XML uses tags.

  • JSON is more compact, readable, and faster.

  • XML supports comments and validation but is more verbose.

  • JSON is mainly used in modern web APIs, while XML remains in legacy systems.

So, whenever you’re building an application that needs to send or receive data, JSON should be your first choice — unless you’re working with a system that specifically requires XML.


Practice Questions

  1. Convert the following XML data into a JSON object:

<person>
  <name>Vicky</name>
  <age>28</age>
  <city>Mumbai</city>
</person>
  1. Write JSON data for a bookstore with three books. Each book should have title, author, and price. Then write the equivalent XML structure.

  2. Parse this JSON data in JavaScript and print the name of the first employee:

{
  "employees": [
    { "name": "Vicky", "role": "Developer" },
    { "name": "Sanjana", "role": "Designer" }
  ]
}
  1. Identify the difference between the following JSON and XML representations:

{ "age": 28 }``` vs  
```xml
<age>28</age>```  
Explain why JSON is preferred in web apps.  

5. Write a JSON object for a music album containing title, artist, year, and tracks (array). Convert it to an XML structure.  

6. Given this XML:  
```xml
<students>
  <student><name>Amit</name><score>88</score></student>
  <student><name>Riya</name><score>95</score></student>
</students>

Convert it into JSON and access the score of Riya using JavaScript.

  1. Write a JSON object representing a movie with nested objects for director and cast. Then show the equivalent XML format.

  2. Create a JSON array of 5 products (id, name, price). Write JavaScript code to print all products with price greater than 500.

  3. Identify errors in this XML and JSON pair and correct them:
    JSON: {"name": "Vicky", "age": 28,}
    XML: <person><name>Vicky</name><age>28</age>

  4. Write a JSON object for a school that has multiple classes. Each class should include className and students (array). Then convert the same data into XML format.


JavaScript

online coding class codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

Go Back Top