Concept and Features of JSON

📖 Theory

Data Text है; App को Objects चाहिए

FestConnect का events.xml browser तक text की एक wall की तरह पहुँचता है। इसे USE करने के लिए, आपके JavaScript को एक parsed tree walk करना ज़रूरी है, node by node, हर element से इसके children पूछते हुए: workable, verbose, joyless।

इस बीच, JavaScript के अंदर, आपके पास एक event के लिए पहले से एक perfect shape है: object literal {name: "Garba Night", seats: 350}।

तो obvious question, 2001 के आस-पास पूछा गया और Douglas Crockford से answered: DATA FILE को OBJECT जैसा क्यों न बनाया जाए? वह answer है JSON।

📖 Theory

JSON, Formally

JSON (JavaScript Object Notation) एक lightweight, text-based data-interchange format है: JavaScript की object-literal syntax से born, पर language-independent: Python, Java, PHP और VB.NET सब इसे happily parse करते हैं।

पूरी grammar:

• data "key": value pairs में रहता है
• { } pairs का एक object hold करता है; [ ] values का एक array hold करता है
• keys हमेशा double-quoted strings हैं
• values: string (double quotes), number, object, array, true, false, null

और कुछ exist नहीं करता: कोई functions नहीं, कोई undefined नहीं, कोई comments नहीं।

⌨️ Practical

events.json: पूरा Fest, एक नज़र में Readable

{
  "fest": "TechnoUtsav 2026",
  "events": [
    {
      "name": "Garba Night",
      "venue": "Main Ground",
      "seats": 350,
      "online": false
    },
    {
      "name": "Coding Contest",
      "venue": "Lab 2",
      "seats": 60,
      "online": true
    }
  ]
}

⌨️ Practical

एक Parse: Text एक Live Object बनता है (इसे Run कीजिए)

// The file arrives as plain TEXT (a string):
const text = '{"name": "Garba Night", "venue": "Main Ground", "seats": 350}';

// One call turns text into a real JavaScript object:
const event = JSON.parse(text);

console.log(event.name);        // Garba Night
console.log(event.seats - 1);   // 349: a real number, maths works

// And the reverse, object back to text for sending:
const outgoing = JSON.stringify({ name: "Robo Race", seats: 80 });
console.log(outgoing);

This example runs in Gri-Learn on the web, where you can edit it and see the output.

📖 Theory

Features की List (Exam Form)

• Lightweight: कोई end tags नहीं; same data के लिए XML की bulk का एक fraction
• Human-Readable: ऊपर वाली listing को किसी manual की ज़रूरत नहीं
• Easy to Parse: एक JSON.parse(text) एक live object देता है; JSON.stringify(obj) इसे reverse करता है: इसे एक XML tree walk करने से compare कीजिए
• Language-Independent: हर language में text अंदर, native structures बाहर
• JavaScript के लिए Natural Fit: parsed result एक JS object IS है; event.seats बस काम करता है

Housekeeping: files .json में खत्म होती हैं, servers इसे application/json label करते हैं।

🧩 Quiz

इनमें से कौन valid JSON है?

1. { 'name': 'Garba Night' }
2. { "name": "Garba Night" }
3. { name: "Garba Night" }
4. { "name": "Garba Night", }

💭 Think first

JSON ने Web क्यों जीता?

XML ने data-interchange throne hold किया था जब JSON आया। आज की 2 listings और features list से, tap करने से पहले वे 2 reasons argue कीजिए JSON ने web APIs के लिए इसे क्यों displace किया।

⚠️ Watch out

JSON, JavaScript नहीं है

नाम दोनों directions में mislead करता है:

JS से Stricter: single quotes, unquoted keys, trailing commas, comments: सब एक JS literal में fine, सब JSON.parse के लिए fatal।

JS से Smaller: कोई functions नहीं, कोई undefined नहीं, कोई Date type नहीं (dates strings की तरह travel करती हैं)।

और याद रखिए यह parse होने तक TEXT है: raw string पर text.name undefined है; object सिर्फ़ JSON.parse के बाद exist करता है।

📖 Theory

events.json कहाँ जा रहा है

Pipeline को view में रखिए: events.json server पर बैठता है; Unit 4 का AJAX इसे बिना reload text की तरह fetch करता है; JSON.parse इसे objects में बदलता है; और Unit 2 के append/text methods इसे page में pour करते हैं: इस subject की हर unit उस pipe का एक segment है। अगला lesson formal XML-vs-JSON comparison stage करता है जो exam को पसंद है, दोनों formats same fest data side by side carry करते हुए।

✅ Summary

Key takeaways

• JSON = JavaScript Object Notation: lightweight, text-based data interchange, language-independent।
• Grammar: {"key": value} objects और [value, value] arrays; keys हमेशा double-quoted।
• छह value types: string (double quotes), number, object, array, true/false, null: कुछ और नहीं।
• JSON.parse(text) एक live object देता है; JSON.stringify(obj) sendable text देता है।
• Features: lightweight, readable, easy to parse, language-independent, JS के लिए native।
• JS literals से stricter: कोई single quotes नहीं, unquoted keys नहीं, trailing commas या comments नहीं।
• Memory hook: वह data file जो बनने वाले object जैसी दिखती है।