JSON (JavaScript Object Notation) is a lightweight data format used to store and exchange data between a server and a client (for example, between a web browser and a web server).

Itโ€™s easy for humans to read and write, and easy for machines to parse and generate.

๐Ÿง  Why Use JSON?
  • โœ… Simpler and lighter than XML
  • โœ… Widely used in APIs and web services
  • โœ… Supported by almost all modern programming languages
  • โœ… Easy to convert between JSON and data structures like objects, arrays, or dictionaries
๐Ÿงฑ Basic Structure of JSON

JSON data is written as keyโ€“value pairs, similar to JavaScript objects.

{
  "name": "Raj",
  "age": 25,
  "isStudent": true,
  "skills": ["HTML", "CSS", "JavaScript"],
  "address": {
    "city": "Mumbai",
    "country": "India"
  }
}
๐Ÿ” Explanation:
  • { } โ†’ Represents a JSON object
  • [ ] โ†’ Represents a JSON array
  • "key": "value" โ†’ Each key is a string, and each value can be:
    • A string ("Raj")
    • A number (25)
    • A boolean (true or false)
    • An array (["HTML", "CSS"])
    • Another object ({"city": "Mumbai"})
    • null
๐Ÿงพ JSON Data Types
TypeExample
String"Hello"
Number100, 12.5
Booleantrue, false
Array["red", "green", "blue"]
Object{"name": "Raj", "age": 25}
Nullnull
โš™๏ธ JSON in JavaScript

Converting a JavaScript Object โ†’ JSON string

const user = { name: "Raj", age: 25 };
const jsonString = JSON.stringify(user);
console.log(jsonString);
// Output: {"name":"Raj","age":25}

Converting a JSON string โ†’ JavaScript Object

const jsonData = '{"name": "Raj", "age": 25}';
const obj = JSON.parse(jsonData);
console.log(obj.name);
// Output: Raj
๐ŸŒ Where JSON is Commonly Used
  • APIs (e.g., fetching data from web servers)
  • Configuration files (e.g., package.json in Node.js)
  • Data storage in NoSQL databases (like MongoDB)
  • Web applications for client-server communication
โš ๏ธ JSON Rules
  1. Keys must be strings (in double quotes)
  2. Values canโ€™t include functions or comments
  3. JSON is case-sensitive
  4. Commas separate pairs, but no trailing comma

โœ… Correct:

{ "name": "Raj", "age": 25 }

โŒ Incorrect:

{ name: "Raj", age: 25, }

3 Comments

  1. mani varma

    This is great! Do you have any recommendations for resources or follow-up tutorials on this topic?

  2. Pavan VJK

    Iโ€™ve been experimenting with this myself and was wondering: have you considered [alternative approach or tool]? Curious to hear your thoughts on it.

  3. Vinay Varma

    I can see a lot of effort went into this.

Leave a Reply

Your email address will not be published. Required fields are marked *