JSON Cheat Sheet: Syntax, Examples & JSON Tutorial in Hindi

JSON एक popular data format है जिसका use applications के बीच data exchange करने के लिए किया जाता है। अगर आप JavaScript, React, Node.js या REST APIs सीख रहे हैं, तो JSON समझना बहुत जरूरी है।

इस JSON Cheat Sheet में आप JSON syntax, data types, objects, arrays, nested JSON, JSON.parse(), JSON.stringify(), API responses, validation और common errors को practical examples के साथ सीखेंगे।

JSON क्या है?#

JSON का full form JavaScript Object Notation है। यह एक text-based data format है जिसका use structured data को store और exchange करने के लिए किया जाता है।

Example:

{
  "name": "Aman",
  "age": 25,
  "isDeveloper": true
}

इस JSON में एक व्यक्ति का name, age और developer status store है।

Simple words mein, JSON data को एक structured format में represent करता है ताकि अलग-अलग applications उसे समझ और process कर सकें।

JSON का use इन जगहों पर होता है:

• REST API requests और responses।
• Frontend और backend के बीच data exchange।
• Configuration files।
• Application settings।
• Data export और import।
• कई services और programming languages के बीच communication।

JSON क्यों जरूरी है?#

मान लीजिए आपकी React application को backend से users की list प्राप्त करनी है।

Backend यह JSON response भेज सकता है:

{
  "users": [
    {
      "id": 1,
      "name": "Aman"
    },
    {
      "id": 2,
      "name": "Priya"
    }
  ]
}

Frontend इस data को read करके users को webpage पर display कर सकता है।

Frontend Application
        ↓
    API Request
        ↓
    Backend Server
        ↓
    JSON Response
        ↓
Frontend पर Data Display

JSON का एक बड़ा फायदा यह है कि इसे JavaScript के अलावा PHP, Python, Java और कई दूसरी programming languages में भी process किया जा सकता है।

JSON का Basic Syntax#

JSON में data मुख्य रूप से key-value pairs, objects और arrays के रूप में represent होता है।

Example:

{
  "name": "Aman",
  "age": 25,
  "city": "Chandigarh"
}

यहाँ:

• "name" key है और "Aman" उसकी value है।
• "age" key है और 25 उसकी value है।
• "city" key है और "Chandigarh" उसकी value है।

JSON में syntax के कुछ important rules हैं:

1. Object keys strings होती हैं और double quotes में लिखी जाती हैं।
2. String values भी double quotes में लिखी जाती हैं।
3. Key और value के बीच colon (:) होता है।
4. Multiple properties के बीच comma लगाया जाता है।
5. Object curly braces {} से represent होता है।
6. Array square brackets [] से represent होता है।
7. Last property के बाद trailing comma नहीं लगाया जाता।
8. Standard JSON में comments allowed नहीं होते।

Valid JSON:

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

Invalid JSON:

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

इस example में key पर double quotes नहीं हैं और last property के बाद extra comma है।

JSON Data Types#

JSON में six categories के values represent किए जा सकते हैं।

Example:

{
  "name": "Aman",
  "age": 25,
  "salary": 45000.50,
  "isDeveloper": true,
  "middleName": null,
  "skills": ["HTML", "CSS", "JavaScript"],
  "address": {
    "city": "Chandigarh",
    "country": "India"
  }
}

यह example सभी six JSON value categories को demonstrate करता है।

Important: JSON में undefined, functions, symbols, NaN और Infinity valid JSON values नहीं हैं।

JSON Object#

JSON object curly braces {} के अंदर key-value pairs का collection होता है।

Example:

{
  "id": 101,
  "name": "Aman",
  "email": "aman@example.com",
  "isActive": true
}

Object में related data एक साथ रखा जा सकता है।

Nested JSON Object

एक object के अंदर दूसरा object भी रखा जा सकता है।

{
  "name": "Aman",
  "address": {
    "house": "12",
    "city": "Chandigarh",
    "state": "Punjab"
  }
}

यहाँ address एक nested object है।

Nested objects का use user profiles, product details, settings और API responses में commonly होता है।

JSON Array#

Array का use multiple values को ordered collection में represent करने के लिए किया जाता है।

Example:

{
  "skills": ["HTML", "CSS", "JavaScript", "React"]
}

यहाँ skills एक array है।

JSON arrays में strings, numbers, booleans, objects, arrays और null जैसी valid JSON values हो सकती हैं।

Example:

{
  "products": [
    {
      "id": 1,
      "name": "Keyboard",
      "price": 1200
    },
    {
      "id": 2,
      "name": "Mouse",
      "price": 600
    }
  ]
}

इस example में products array के अंदर दो objects हैं।

JSON और JavaScript Object में Difference#

JSON और JavaScript objects देखने में similar लग सकते हैं, लेकिन दोनों एक ही चीज नहीं हैं।

JavaScript object:

const user = {
  name: "Aman",
  greet() {
    return "Hello";
  }
};

यह एक valid JavaScript object है, लेकिन पूरा code valid JSON नहीं है क्योंकि इसमें method है और property key/string syntax भी JSON format के अनुरूप नहीं है।

इसलिए API से JSON data प्राप्त करने और JavaScript object के साथ काम करने के बीच conversion समझना जरूरी है।

JSON.parse() क्या है?#

JSON.parse() JSON text को JavaScript value में convert करता है।

Example:

const jsonString = '{"name":"Aman","age":25}';

const user = JSON.parse(jsonString);

console.log(user.name); // Aman
console.log(user.age); // 25

यहाँ jsonString एक string है। JSON.parse() इसे JavaScript object में convert करता है।

JSON.parse() का Syntax

JSON.parse(text);

text में valid JSON string होनी चाहिए।

Array को Parse करना

const jsonString = '["HTML", "CSS", "JavaScript"]';

const skills = JSON.parse(jsonString);

console.log(skills[0]); // HTML
console.log(skills[2]); // JavaScript

Invalid JSON को Parse करना

const jsonString = '{"name": "Aman",}';

try {
  const data = JSON.parse(jsonString);
  console.log(data);
} catch (error) {
  console.error("Invalid JSON:", error.message);
}

इस example में trailing comma की वजह से parsing fail होती है और error handle किया जाता है।

JSON.stringify() क्या है?#

JSON.stringify() JavaScript value को JSON-formatted string में convert करता है।

इस process को serialization कहा जाता है।

Example:

const user = {
  name: "Aman",
  age: 25
};

const jsonString = JSON.stringify(user);

console.log(jsonString);

Output:

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

JSON.stringify() का Syntax

JSON.stringify(value);

यह method API requests के लिए request body बनाने और JSON text generate करने में useful है।

Pretty-Printed JSON

Readable formatting के लिए तीसरे argument के बजाय दूसरे argument के रूप में replacer और तीसरे argument के रूप में space दिया जा सकता है।

const user = {
  name: "Aman",
  age: 25,
  city: "Chandigarh"
};

const jsonString = JSON.stringify(user, null, 2);

console.log(jsonString);

Output:

{
  "name": "Aman",
  "age": 25,
  "city": "Chandigarh"
}

यह formatted JSON debugging और configuration files पढ़ने में helpful है।

JSON.parse() और JSON.stringify() में Difference#

याद रखने का आसान तरीका:

JSON Text
    ↓
JSON.parse()
    ↓
JavaScript Value

JavaScript Value
    ↓
JSON.stringify()
    ↓
JSON Text

JavaScript में JSON Data Access करना#

मान लीजिए आपके पास JSON string है:

const jsonString = `{
  "name": "Aman",
  "skills": ["HTML", "CSS", "JavaScript"]
}`;

const data = JSON.parse(jsonString);

console.log(data.name);
console.log(data.skills[0]);
console.log(data.skills[2]);

Output:

Aman
HTML
JavaScript

Object की property dot notation से और array के element index से access किए जा सकते हैं।

JSON में Data Update करना#

JSON text को सीधे JavaScript object की तरह update नहीं कर सकते। पहले parse करके JavaScript value बनाएं।

const jsonString = '{"name":"Aman","age":25}';

const user = JSON.parse(jsonString);

user.age = 26;
user.city = "Chandigarh";

const updatedJson = JSON.stringify(user, null, 2);

console.log(updatedJson);

Output:

{
  "name": "Aman",
  "age": 26,
  "city": "Chandigarh"
}

इस तरह आप data को update करके दोबारा JSON string में convert कर सकते हैं।

JSON को File में Save करना#

Browser या Node.js में JSON data को file में save करने के तरीके अलग होते हैं।

Node.js में fs module की मदद से JSON text file में लिख सकते हैं।

const fs = require("node:fs");

const user = {
  name: "Aman",
  age: 25
};

fs.writeFileSync(
  "user.json",
  JSON.stringify(user, null, 2),
  "utf8"
);

यह example CommonJS-style Node.js environment के लिए है।

यह user.json नाम की file लिखता है। File लिखने से पहले सुनिश्चित करें कि application को उस location पर write permission है।

JSON file को वापस पढ़ने का example:

const fs = require("node:fs");

const jsonString = fs.readFileSync("user.json", "utf8");
const user = JSON.parse(jsonString);

console.log(user.name);

Production applications में बड़ी files और error handling की requirements के अनुसार asynchronous file APIs का use करना बेहतर हो सकता है।

JSON API Response Example#

REST APIs में JSON commonly response format के रूप में use होता है।

Example response:

{
  "success": true,
  "message": "Users fetched successfully",
  "data": [
    {
      "id": 1,
      "name": "Aman"
    },
    {
      "id": 2,
      "name": "Priya"
    }
  ]
}

इस response में:

• success operation status को represent करता है।
• message descriptive message है।
• data users की array है।

यह एक example response structure है, कोई universal API standard नहीं। अलग-अलग APIs अलग response structures use कर सकती हैं।

Fetch API के साथ JSON#

JavaScript में fetch() से API request करके JSON response पढ़ सकते हैं।

async function getUsers() {
  try {
    const response = await fetch(
      "https://jsonplaceholder.typicode.com/users"
    );

    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }

    const users = await response.json();

    console.log(users);
  } catch (error) {
    console.error("Unable to fetch users:", error.message);
  }
}

getUsers();

यहाँ:

1. fetch() HTTP request करता है।
2. response.ok HTTP status को check करता है।
3. response.json() response body को parse करके JavaScript value देता है।
4. catch() network, parsing और throw किए गए errors को handle कर सकता है।

Important: response.json() asynchronous है और Promise return करता है। इसे await या Promise handlers के साथ use करें।

Fetch API के साथ JSON POST Request#

जब frontend backend को JSON data भेजता है, तो request body में JSON string भेजी जा सकती है।

async function createUser() {
  const user = {
    name: "Aman",
    email: "aman@example.com"
  };

  try {
    const response = await fetch("/api/users", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(user)
    });

    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }

    const result = await response.json();

    console.log(result);
  } catch (error) {
    console.error("Request failed:", error.message);
  }
}

यहाँ JSON.stringify(user) JavaScript object को JSON text में convert करता है।

Content-Type: application/json server को बताता है कि request body JSON format में है।

/api/users एक example endpoint है। इसे अपने backend के actual endpoint से replace करें।

JSON में Null और Undefined#

null JSON में valid value है, लेकिन undefined valid JSON value नहीं है।

Valid JSON:

{
  "middleName": null
}

Invalid JSON:

{
  "middleName": undefined
}

JavaScript में JSON.stringify() कुछ values को अलग तरीके से handle करता है।

console.log(JSON.stringify({ name: "Aman", age: undefined }));

Output:

{"name":"Aman"}

Object property की value undefined होने पर वह property JSON output से omit हो जाती है।

लेकिन array में undefined element null बन जाता है:

console.log(JSON.stringify([1, undefined, 3]));

Output:

[1,null,3]

इन differences को समझना API payloads और data storage के लिए important है।

JSON में Comments क्यों नहीं होते?#

Standard JSON format comments support नहीं करता।

Invalid JSON:

{
  // User details
  "name": "Aman"
}

अगर आपको explanation लिखनी है, तो documentation में लिखें या schema/design के अनुसार अलग description field रखें।

Example:

{
  "name": "Aman",
  "description": "User profile"
}

ध्यान दें कि description यहाँ actual data field है, comment नहीं।

JSON Validation#

JSON validation का मतलब यह check करना है कि data expected format या structure को follow करता है या नहीं।

Syntax Validation

JSON.parse() valid JSON text को parse कर सकता है।

const jsonString = '{"name":"Aman","age":25}';

try {
  const data = JSON.parse(jsonString);
  console.log("Valid JSON syntax", data);
} catch (error) {
  console.error("Invalid JSON syntax");
}

Structure Validation

सिर्फ valid JSON होना यह guarantee नहीं करता कि data आपकी application की requirements पूरी करता है।

Example:

{
  "name": 123,
  "age": "twenty-five"
}

यह valid JSON है, लेकिन application के expected schema से match न करे।

Real applications में required fields, data types, allowed values और business rules को validate करना चाहिए। इसके लिए application-level validation या JSON Schema जैसे tools use किए जा सकते हैं।

JSON Schema क्या है?#

JSON Schema एक vocabulary/specification है जिसकी मदद से JSON data का expected structure describe और validate किया जा सकता है।

Example schema:

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string"
    },
    "age": {
      "type": "integer"
    }
  },
  "required": ["name", "age"]
}

यह schema describe करता है कि data एक object होना चाहिए, उसमें name string और age integer होना चाहिए, और दोनों required हैं।

ध्यान दें: Schema लिखने से data automatically validate नहीं होता। उसे validate करने के लिए JSON Schema-compatible validator या library use करनी होती है।

JSON Security Best Practices#

• External JSON data को parse करने के बाद भी validate करें।
• JSON values को बिना validation के trusted application data न मानें।
• JSON parse करने के लिए eval() use न करें; JSON.parse() use करें।
• User-provided values को DOM में insert करते समय safe APIs use करें।
• API credentials और passwords को public frontend JSON files में store न करें।
• Sensitive data को API response में unnecessary include न करें।
• API input की type, length और allowed values check करें।
• बड़े JSON payloads पर size limits और error handling consider करें।
• Invalid JSON और unexpected structure को gracefully handle करें।

JSON format खुद authentication, authorization या encryption provide नहीं करता। ये protections application और communication layer पर implement करनी होती हैं।

Common JSON Errors#

1. Single Quotes Use करना

Invalid:

{
  'name': 'Aman'
}

Valid:

{
  "name": "Aman"
}

2. Trailing Comma

Invalid:

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

Valid:

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

3. Missing Quotes Around Keys

Invalid:

{
  name: "Aman"
}

Valid:

{
  "name": "Aman"
}

4. String के अंदर Unescaped Quotes

Invalid:

{
  "message": "He said "Hello""
}

Valid:

{
  "message": "He said \"Hello\""
}

5. JSON.parse() को Object देना

गलत:

const user = {
  name: "Aman"
};

JSON.parse(user);

सही:

const user = {
  name: "Aman"
};

const jsonString = JSON.stringify(user);
const parsedUser = JSON.parse(jsonString);

JSON.parse() को JSON text चाहिए, जबकि user पहले से JavaScript object है।

JSON Troubleshooting Checklist#

जब JSON काम नहीं कर रहा हो, तो ये checks करें:

1. Keys और strings double quotes में हैं?
2. कहीं trailing comma तो नहीं है?
3. Braces {} और brackets [] सही तरीके से close हैं?
4. String के अंदर quotes properly escaped हैं?
5. JSON.parse() को string मिल रही है?
6. API response का status successful है?
7. Response body वास्तव में JSON है?
8. Parsed data का structure expected format से match करता है?
9. undefined, functions या unsupported values JSON में भेजने की कोशिश तो नहीं हो रही?
10. API request में सही Content-Type header set है?

इन checks से JSON-related errors identify करने में काफी मदद मिल सकती है।

JSON Quick Reference#

JSON Practice Exercises#

Beginner Exercises

1. एक JSON object बनाएं जिसमें name, age, city और email हों।
2. एक array बनाएं जिसमें पाँच programming languages हों।
3. Nested object बनाएं जिसमें user का address और city हो।
4. एक valid JSON string को JSON.parse() से JavaScript object में convert करें।
5. एक JavaScript object को JSON.stringify() से JSON string में convert करें।

Intermediate Exercises

1. Products की array बनाएं जिसमें हर product का id, name और price हो।
2. JSON string को parse करके किसी object की property update करें।
3. JSON.stringify(data, null, 2) से formatted JSON generate करें।
4. एक invalid JSON string को try...catch से handle करें।
5. Fetch API से users का data प्राप्त करके उनके names console में print करें।

Advanced Exercises

1. एक JSON response structure design करें जिसमें success, message और data हों।
2. एक JSON Schema लिखें जिसमें name और email required हों।
3. API से मिलने वाले data के structure और required fields को validate करें।
4. Node.js में JSON file read करके उसका data update करें और file में वापस write करें।
5. JSON POST request implement करें जिसमें HTTP errors और invalid responses handle हों।

JSON Knowledge Check#

1. JSON का full form क्या है?
2. JSON को data exchange के लिए क्यों use किया जाता है?
3. JSON में कौन-कौन से value types valid हैं?
4. JSON और JavaScript object में क्या difference है?
5. JSON.parse() क्या करता है?
6. JSON.stringify() क्या करता है?
7. JSON में keys के लिए कौन-से quotes जरूरी हैं?
8. क्या JSON में comments और trailing commas allowed हैं?
9. null और undefined में क्या difference है?
10. API response में response.json() क्या return करता है?
11. Valid JSON और valid application data में क्या अंतर है?
12. JSON Schema का क्या purpose है?
13. JSON.stringify() में null, 2 arguments का क्या मतलब है?
14. JSON को parse करने के लिए eval() क्यों avoid करना चाहिए?
15. JSON format अपने आप data को secure क्यों नहीं बनाता?

Summary#

JSON एक text-based data format है जिसका use applications के बीच structured data exchange करने के लिए किया जाता है।

इस Cheat Sheet में आपने सीखा:

• JSON क्या है और क्यों जरूरी है।
• JSON syntax और data types।
• Objects, arrays और nested JSON।
• JSON और JavaScript object का difference।
• JSON.parse() और JSON.stringify()।
• JSON में data access और update करना।
• Node.js में JSON files read/write करना।
• REST APIs और Fetch API के साथ JSON।
• JSON validation और JSON Schema।
• Security best practices और common errors।
• Quick reference और practice exercises।

याद रखें:

JSON Text
   ↓
JSON.parse()
   ↓
JavaScript Value

JavaScript Value
   ↓
JSON.stringify()
   ↓
JSON Text

ये दोनों methods JavaScript applications और APIs में JSON के साथ काम करने की foundation हैं।

आगे क्या सीखें?#

आपकी The Easy Master learning path में अगला topic है Fetch / REST APIs।

इसमें आप सीखेंगे:

• API क्या है और REST API कैसे काम करती है।
• HTTP methods: GET, POST, PUT, PATCH और DELETE।
• Request और response।
• HTTP status codes।
• Fetch API से data प्राप्त करना।
• JSON data भेजना और receive करना।
• Headers और query parameters।
• Error handling और API debugging।
• Practical API integration examples।

Suggested learning sequence:

1. HTML
2. CSS
3. JavaScript
4. JSON
5. Fetch / REST APIs
6. Node.js
7. npm
8. Build Tools (Vite)
9. TypeScript
10. React

अगला कदम: JSON को JavaScript में parse करना और किसी public test API से data fetch करके console में display करना practice करें।