7/10/25, 8:52 PM JSON Tutorial - GeeksforGeeks
Search...
JSON Tutorial
Last Updated : 27 Feb, 2025
JSON (JavaScript Object Notation) is a widely-used, lightweight data
format for representing structured data. It is used extensively in APIs,
configuration files, and data exchange between servers and clients.
JSON (JavaScript Object Notation) and XML (eXtensible Markup
Language) are popular formats for data representation.
This comprehensive article covers everything we need to know about
JSON, including its structure, syntax, applications, and how to work with
it in different programming languages.
What is JSON (JavaScript Object Notation)?
JSON stands for JavaScript Object Notation and is a lightweight, text-
based data format designed for easy data exchange. JSON is widely
used to transmit data between a server and a client as part of a web
API response. It is easy to read and write for humans and machines
alike, which makes it a preferred choice for data interchange in web
applications.
Key Characteristics of JSON
Text-based: JSON is a simple text format, making it lightweight and
easy to transmit.
Human-readable: It uses key-value pairs, making the structure easy
to understand.
Language-independent: While it is derived from JavaScript, JSON is
supported by many programming languages including Python, Java,
PHP, and more.
Data structure: It represents data as objects, arrays, strings,
numbers, booleans, and null.
JSON Data Flow: From Server to Client
https://www.geeksforgeeks.org/javascript/json/ 1/11
7/10/25, 8:52 PM JSON Tutorial - GeeksforGeeks
JSON Data Flow: From Server to Client - JSON Tutorial
JSON vs XML: A Quick Comparison
When it comes to data formats, JSON and XML are the two most
common choices. JSON is generally preferred for web applications due
to its smaller size, ease of use, and better performance. Here's a quick
comparison:
Feature JSON XML
Human-readable but more
Readability Human-readable
verbose
Data Size Smaller and more compact Larger due to extra markup
Easier to parse in most
Parsing More complex parsing
languages
Broad support across Initially JavaScript, but now
Support
languages widely supported
Web APIs, configuration Data storage, document
Use Cases
files, data transfer formatting
How JSON Data Flow Works in Web Applications
https://www.geeksforgeeks.org/javascript/json/ 2/11
7/10/25, 8:52 PM JSON Tutorial - GeeksforGeeks
In a typical web application, JSON (JavaScript Object Notation) is used
to transfer data between the server and the client (frontend).
DSA with JS - Self Paced JS Tutorial JS Exercise JS Interview Questions JS Sign In
Server Side:
Data is stored as a JavaScript object.
Before sending the data to the client, it's converted to a JSON string
using JSON.stringify().
Client Side:
The JSON string is received as part of an API response (e.g., via an
HTTP GET request).
The client parses this string back into a JavaScript object using
JSON.parse().
The parsed object is then used in the frontend code.
Here’s a JSON string received from the server
const jsonString = '{"name":"Mohit", "age":30}';
It has an object with the properties
name: "Mohit"
age: 30
To access its properties, we need to parse it into a JavaScript object:
const jsonS = '{"name":"Mohit", "age":30}';
const obj = JSON.parse(jsonS);
let name = obj.name;
let age = obj.age;
console.log(`Name: ${name}, Age: ${age}`);
Output
Name: Mohit, Age: 30
https://www.geeksforgeeks.org/javascript/json/ 3/11
7/10/25, 8:52 PM JSON Tutorial - GeeksforGeeks
JSON Structure
The basic structure of JSON consists of two primary components:
Objects: These are enclosed in curly braces {} and contain key-value
pairs.
Arrays: Arrays are ordered lists enclosed in square brackets [].
Objects in JSON
A JSON object is a collection of key-value pairs enclosed in curly braces
{}. The key is always a string, and the value can be a variety of data
types, including strings, numbers,arrays and even other objects.
Example:
{
"name": "Mohit Kumar",
"age": 30,
"isStudent": false
}
In this example, name, age, and isStudent are keys, and "John Doe", 30, and
false are their respective values.
Arrays in JSON
A JSON array is an ordered collection of values enclosed in square
brackets []. These values can be of any type, including objects, arrays,
or primitive data types.
Example:
{
"fruits": ["apple", "banana", "cherry"]
}
Here, fruits is a key, and the value is an array containing the elements
"apple", "banana", and "cherry".
Key JSON Data Types
JSON supports the following data types:
https://www.geeksforgeeks.org/javascript/json/ 4/11
7/10/25, 8:52 PM JSON Tutorial - GeeksforGeeks
String: A sequence of characters, e.g., "hello".
Number: Integer or floating-point numbers, e.g., 10, 3.14.
Boolean: A value representing true or false.
Array: An ordered list of values.
Object: A collection of key-value pairs.
Null: A null value indicating the absence of any value.
How to Work with JSON in JavaScript
In JavaScript, we can easily parse JSON data into a JavaScript object and
vice versa using built-in methods like JSON.parse() and JSON.stringify().
Parse JSON to Object
To parse a JSON string into a JavaScript object, use JSON.parse().
Example:
let jsonS = '{"name": "Mohit", "age": 30}';
let jsonObj = JSON.parse(jsonS);
console.log(jsonObj.name);
Output
Mohit
Convert Object to JSON
To convert a Javascript object into a JSON string, use JSON.stringify()
Example:
let obj = {name: "Mohit", age: 30};
let jsonS= JSON.stringify(obj);
console.log(jsonS);
Output
https://www.geeksforgeeks.org/javascript/json/ 5/11
