-
Hajipur, Bihar, 844101
Hajipur, Bihar, 844101
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 Functions
Function Definitions
Function Parameters
Function Invocation
Function Call
Function Apply
Function Bind
Function Closures
JS Arrow Function
JS Objects
JS Objects
JS Object Properties
JS Object Methods
JS Object Display
JS Object Constructors
Object Definitions
Object Get / Set
Object Prototypes
Object Protection
JS Classes & Modules
JS Async Programming
JS Advanced
JS Destructuring
JS Bitwise
JS RegExp
JS Precedence
JS Errors
JS Scope
JS Hoisting
JS Strict Mode
JS this Keyword
JS HTML DOM
DOM Intro
DOM Methods
DOM Document
DOM Elements
DOM HTML
DOM Forms
DOM CSS
DOM Animations
DOM Events
DOM Event Listener
DOM Navigation
DOM Nodes
DOM Collections
DOM Node Lists
JS BOM (Browser Object Model)
JS Web APIs
Web API Intro
Web Validation API
Web History API
Web Storage API
Web Worker API
Web Fetch API
Web Geolocation API
JS AJAX
AJAX Intro
AJAX XMLHttp
AJAX Request
AJAX Response
AJAX XML File
AJAX PHP
AJAX ASP
AJAX Database
AJAX Applications
AJAX Examples
JS JSON
JSON Intro
JSON Syntax
JSON vs XML
JSON Data Types
JSON Parse
JSON Stringify
JSON Objects
JSON Arrays
JSON Server
JSON PHP
JSON HTML
JSON JSONP
JS Graphics & Charts
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.
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.
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.
Let’s take a look at a slightly bigger example.
<employees>
<employee>
<name>Vicky</name>
<role>Developer</role>
</employee>
<employee>
<name>Sanjana</name>
<role>Designer</role>
</employee>
</employees>
{
"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.
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 |
Let’s represent a bookstore in both formats.
{
"books": [
{ "title": "Learn JavaScript", "author": "Vicky", "price": 499 },
{ "title": "Master PHP", "author": "Sanjana", "price": 399 }
]
}
<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.
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 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.
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.
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.
Here’s why most developers and APIs now prefer JSON over XML:
Smaller File Size – Faster to download and transmit.
Easier Parsing – Especially with JavaScript and web technologies.
Language Compatibility – Every modern language supports JSON easily.
Human-Friendly – Short, clean, and easy to understand.
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.
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.
Convert the following XML data into a JSON object:
<person>
<name>Vicky</name>
<age>28</age>
<city>Mumbai</city>
</person>
Write JSON data for a bookstore with three books. Each book should have title, author, and price. Then write the equivalent XML structure.
Parse this JSON data in JavaScript and print the name of the first employee:
{
"employees": [
{ "name": "Vicky", "role": "Developer" },
{ "name": "Sanjana", "role": "Designer" }
]
}
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.
Write a JSON object representing a movie with nested objects for director and cast. Then show the equivalent XML format.
Create a JSON array of 5 products (id, name, price). Write JavaScript code to print all products with price greater than 500.
Identify errors in this XML and JSON pair and correct them:
JSON: {"name": "Vicky", "age": 28,}
XML: <person><name>Vicky</name><age>28</age>
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.
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 Functions
Function Definitions
Function Parameters
Function Invocation
Function Call
Function Apply
Function Bind
Function Closures
JS Arrow Function
JS Objects
JS Objects
JS Object Properties
JS Object Methods
JS Object Display
JS Object Constructors
Object Definitions
Object Get / Set
Object Prototypes
Object Protection
JS Classes & Modules
JS Async Programming
JS Advanced
JS Destructuring
JS Bitwise
JS RegExp
JS Precedence
JS Errors
JS Scope
JS Hoisting
JS Strict Mode
JS this Keyword
JS HTML DOM
DOM Intro
DOM Methods
DOM Document
DOM Elements
DOM HTML
DOM Forms
DOM CSS
DOM Animations
DOM Events
DOM Event Listener
DOM Navigation
DOM Nodes
DOM Collections
DOM Node Lists
JS BOM (Browser Object Model)
JS Web APIs
Web API Intro
Web Validation API
Web History API
Web Storage API
Web Worker API
Web Fetch API
Web Geolocation API
JS AJAX
AJAX Intro
AJAX XMLHttp
AJAX Request
AJAX Response
AJAX XML File
AJAX PHP
AJAX ASP
AJAX Database
AJAX Applications
AJAX Examples
JS JSON
JSON Intro
JSON Syntax
JSON vs XML
JSON Data Types
JSON Parse
JSON Stringify
JSON Objects
JSON Arrays
JSON Server
JSON PHP
JSON HTML
JSON JSONP
JS Graphics & Charts