• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

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 Introduction

← Previous Next →

If you’ve ever shared data between a website and a server, you’ve probably come across something called JSON. It’s everywhere — in web apps, APIs, mobile apps, and even databases. JSON is simple, lightweight, and easy to read, which is why it has become one of the most popular data formats in the world.

In this tutorial, we’ll understand what JSON is, why it’s so widely used, and how it helps web developers send and receive data efficiently.

What is JSON?

JSON stands for JavaScript Object Notation.
It’s a text-based format used to store and exchange data between a client (like a web browser) and a server.

In simple terms, JSON is a way to represent data just like you would write an object in JavaScript, but in plain text so it can be easily shared across different systems.

Here’s a simple example of JSON data:

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

This looks almost like a JavaScript object, right? That’s because JSON was originally inspired by JavaScript’s object syntax.
But the good part is — JSON isn’t limited to JavaScript anymore. It’s supported by almost all modern programming languages, such as PHP, Python, Java, C#, and many others.

Why JSON Was Created

Before JSON became popular, another format called XML (Extensible Markup Language) was widely used for data exchange.
While XML was powerful, it was also verbose (too much syntax) and harder to read.

For example, here’s how you’d represent the same data in XML:

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

Now compare it with the JSON version again:

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

The JSON format is shorter, cleaner, and easier to read — and that’s exactly why it became the preferred format for web data communication.

Key Features of JSON

Here are the main reasons developers love JSON:

  1. Lightweight and Fast
    JSON doesn’t include extra tags or attributes like XML. That means less data to send and faster communication.

  2. Human-Readable
    JSON looks simple — even beginners can understand it at a glance. It’s written in plain text, so it’s easy to edit and debug.

  3. Language-Independent
    Even though JSON originated from JavaScript, it’s now supported by nearly every language.
    Every major programming language can easily parse (read) and generate (write) JSON.

  4. Structured and Organized
    JSON supports nested objects and arrays, allowing you to store complex data in a clean and organized structure.

  5. Easy to Integrate with APIs
    Most web APIs (like Google Maps API, OpenWeather API, etc.) use JSON to send and receive data. This makes integration smooth and efficient.

Where JSON is Used

You’ll find JSON in almost every corner of modern web development. Some common uses include:

  • APIs — When a web application fetches or sends data to a server, JSON is usually the format used.

  • Configuration Files — Many tools and frameworks use JSON to store settings (for example, package.json in Node.js).

  • Databases — NoSQL databases like MongoDB store data in a JSON-like format called BSON.

  • Data Storage — Small apps sometimes store data in JSON files instead of full databases.

  • Web Services — RESTful APIs commonly send JSON responses to clients.

Example:
When you sign in to a website, your login information might be sent as JSON like this:

{
  "username": "vicky123",
  "password": "mypassword"
}

And the server might respond with JSON too:

{
  "status": "success",
  "userId": 101,
  "message": "Welcome Vicky!"
}

This exchange happens quickly and smoothly because JSON is lightweight and universal.

JSON Structure

A JSON file or data structure is built using two main types of components:

  1. Key/Value Pairs

  2. Arrays

1. Key/Value Pairs

The basic building block of JSON is a key/value pair, just like in JavaScript objects.

  • A key is always a string written inside double quotes (" ").

  • A value can be:

    • A string

    • A number

    • A boolean (true or false)

    • An object (another JSON)

    • An array

    • Or null

Example:

{
  "name": "Vicky",
  "age": 28,
  "isDeveloper": true
}

Here:

  • "name" is the key, and "Vicky" is the value.

  • "age" is the key, and 28 is the value.

  • "isDeveloper" is the key, and true is the value.

2. Arrays

Arrays are used to store multiple values in a single variable.
In JSON, arrays are written inside square brackets [].

Example:

{
  "students": ["Vicky", "Sanjana", "Rohit"]
}

You can also store multiple objects inside an array:

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

This makes JSON great for representing lists of data.

JSON Syntax Rules

JSON has very strict syntax rules. Even a small mistake (like missing a quote or comma) can break the entire file.

Here are the key rules:

  1. Data is written in key/value pairs.

  2. Keys must be in double quotes.

  3. Values can be strings, numbers, objects, arrays, booleans, or null.

  4. Strings must be in double quotes.

  5. No trailing commas (the last item in an object or array cannot have a comma after it).

  6. JSON data must always start and end with curly braces {} if it’s an object, or square brackets [] if it’s an array.

Example of valid JSON:

{
  "id": 1,
  "name": "Vicky",
  "skills": ["HTML", "CSS", "JavaScript"],
  "active": true
}

JSON File Format

JSON files are saved with the extension .json.
For example: data.json

You can open and edit these files in any text editor like VS Code, Notepad++, or Sublime Text.

When you view a JSON file, it’s always plain text — that’s what makes it so versatile and easy to share.

Advantages of JSON

Let’s quickly summarize why JSON is preferred over other data formats:

Feature JSON XML
Readability Easy and short Long and complex
Data Size Compact Larger
Syntax Simple (key-value) Verbose (tags)
Parsing Speed Fast Slower
Supported Languages Almost all Almost all
Best For APIs and web data Older enterprise systems

Clearly, JSON wins in most cases, especially in web and app development.

Real-Life Example

Let’s say your website shows user profiles. When the browser requests data from the server, it might receive something like this:

{
  "users": [
    {
      "name": "Vicky",
      "email": "vicky@example.com",
      "role": "Developer"
    },
    {
      "name": "Sanjana",
      "email": "sanjana@example.com",
      "role": "Designer"
    }
  ]
}

Now your front-end JavaScript code can easily read this JSON, display it on the webpage, or even update it dynamically.

Summary of the Tutorial

  • JSON stands for JavaScript Object Notation.

  • It’s a lightweight, text-based format used for storing and transferring data.

  • JSON data is structured as key/value pairs and arrays.

  • It’s easy to read, easy to write, and supported across almost every language.

  • JSON is mostly used in APIs, configurations, and databases.

In short, JSON is the bridge that allows your web browser and server to communicate smoothly — and once you master it, you’ll use it everywhere in web development.

Practice Questions

  1. Create a JSON object that stores your personal details like name, age, city, and profession. Print the value of each key using JavaScript.

  2. Write a JSON object to store details of 3 students (name, roll number, marks). Access the marks of the second student and display it.

  3. Convert the following JavaScript object into a JSON string using JSON.stringify():

let user = { name: "Vicky", age: 25, city: "Delhi" };

  1. Convert this JSON string into a JavaScript object using JSON.parse():

'{ "name": "Sanjana", "course": "Web Development" }'

  1. Create a JSON array containing 5 employee names. Write JavaScript code to print each name using a loop.

  2. You have a JSON object of products:

{
  "products": [
    { "id": 1, "name": "Laptop", "price": 55000 },
    { "id": 2, "name": "Mouse", "price": 700 }
  ]
}

Write JavaScript code to print the total price of both products.

  1. Create a JSON object to represent a book with keys: title, author, year, and genres (array). Display the author’s name and first genre.

  2. Write a JSON object for a car that includes model, color, fuel type, and an array of service dates. Print the last service date.

  3. Given this JSON data:

{
  "students": [
    { "name": "Vrinda", "score": 88 },
    { "name": "Sanjana", "score": 95 },
    { "name": "Vicky", "score": 72 }
  ]
}

Write JavaScript code to find and print the student with the highest score.

  1. Write a JSON object that contains user login information (username, password, isActive). Convert it to a string using JSON.stringify(), then parse it back to an object and print only the username.

← Previous Next →

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

codepractice logo
Login
Go Back Top