FlowingDev

JSON, समझाया गया: इंटरनेट का पसंदीदा डेटा फ़ॉर्मेट

JSON (JavaScript Object Notation) के मूल सिद्धांतों को जानें, यह एक हल्का डेटा-इंटरचेंज फ़ॉर्मेट है जो आधुनिक वेब APIs और एप्लिकेशन्स को शक्ति प्रदान करता है।

टूल आज़माएँ: JSON व्यूअर

एक वाक्य में

JSON डेटा को एक लिस्ट या डिक्शनरी की तरह स्ट्रक्चर करने का एक टेक्स्ट-आधारित तरीका है, जिससे कंप्यूटर और इंसानों दोनों के लिए जानकारी को पढ़ना, लिखना और आदान-प्रदान करना अविश्वसनीय रूप से आसान हो जाता है।

यह कौन सी समस्या हल करता है

2000 के दशक की शुरुआत के वेब की कल्पना करें। अगर आप चाहते थे कि आपका वेब पेज बिना पूरे-पेज रीलोड के नया डेटा लाए (एक नया हॉट कॉन्सेप्ट जिसे AJAX कहा जाता था), तो आप शायद XML से जूझ रहे थे। XML (eXtensible Markup Language) उस समय डेटा इंटरचेंज का बादशाह था। यह शक्तिशाली, सख़्त, और... सच कहूँ तो, थोड़ा बोझिल था।

एक XML डॉक्यूमेंट बहुत ज़्यादा शब्दों वाला होता है। डेटा का हर टुकड़ा ओपनिंग और क्लोजिंग टैग में लिपटा होता है।

<user>
  <id>123</id>
  <name>Alex</name>
  <isAdmin>true</isAdmin>
</user>

यह बहुत बुरा नहीं है, लेकिन यह भारी-भरकम है। इससे भी महत्वपूर्ण बात यह है कि इसे JavaScript—ब्राउज़र की भाषा—में पार्स करना एक दर्द भरा काम था। आपको एक जटिल डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) को नेविगेट करना पड़ता था, जिसमें नोड्स, एट्रिब्यूट्स और टेक्स्ट कंटेंट से निपटना होता था। यह छोटे से काम के लिए बहुत बड़ा औजार इस्तेमाल करने जैसा लगता था।

फिर आए डगलस क्रॉकफ़ोर्ड, जो उस कंपनी में एक डेवलपर थे जो बाद में Yahoo! बनी। उन्होंने एक शानदार चीज़ पर ध्यान दिया: JavaScript के पास पहले से ही स्ट्रक्चर्ड डेटा को परिभाषित करने का एक बहुत अच्छा, बिल्ट-इन तरीका था। इसे "ऑब्जेक्ट लिटरल नोटेशन" कहा जाता था।

// यह बस सादा पुराना JavaScript है!
var user = {
  "id": 123,
  "name": "Alex",
  "isAdmin": true
};

क्रॉकफ़ोर्ड ने महसूस किया कि JavaScript सिंटैक्स का यह सबसेट अपने आप में एक शानदार डेटा फ़ॉर्मेट था। यह हल्का था, इंसानों के लिए पढ़ना आसान था, और—यह सबसे ज़बरदस्त फ़ीचर था—JavaScript के लिए पार्स करना बच्चों का खेल था। आप इसे मूल रूप से eval() कर सकते थे (हालांकि सुरक्षा कारणों से, अब हम JSON.parse() जैसे सुरक्षित तरीके इस्तेमाल करते हैं)।

उन्होंने इस फ़ॉर्मेट को औपचारिक रूप दिया, इसे JavaScript Object Notation (JSON) नाम दिया, और इसे समझाने वाली एक साधारण एक-पेज की वेबसाइट बनाई। इसने एक ऐसे डेटा फ़ॉर्मेट की ज़रूरत को हल किया जो XML से कम बोझिल और वेब वातावरण के लिए नेटिव हो। JSON जंगल की आग की तरह फैल गया, जो APIs, कॉन्फ़िगरेशन फ़ाइलों और अनगिनत अन्य एप्लिकेशन्स के लिए de facto भाषा बन गया। यह जीता क्योंकि यह सरल, व्यावहारिक था, और उसी भाषा से पैदा हुआ था जिसकी सेवा के लिए इसे डिज़ाइन किया गया था।

यह अंदर से कैसे काम करता है

मूल रूप से, JSON डेटा को टेक्स्ट के रूप में लिखने के लिए नियमों का एक सेट है। इसे डेटा स्ट्रक्चर के लिए एक यूनिवर्सल ब्लूप्रिंट की तरह सोचें। इसमें चीजों को स्ट्रक्चर करने के केवल दो तरीके और अंदर रखने के लिए छह सरल डेटा टाइप्स हैं।

बिल्डिंग ब्लॉक्स: डेटा टाइप्स

JSON की खूबसूरती इसके वैल्यू टाइप्स के न्यूनतम सेट से आती है। JSON में सब कुछ इन्हीं में से एक है।

टाइप उदाहरण विवरण
String "Hello, world!" यूनिकोड कैरेक्टर्स का एक क्रम, जो डबल कोट्स में लिपटा होता है।
Number 42, -3.14, 2.99e8 एक पूर्णांक या फ़्लोटिंग-पॉइंट नंबर। इसमें NaN या Infinity नहीं होता।
Boolean true, false true और false के लिए लॉजिकल वैल्यू, हमेशा लोअरकेस में।
Null null किसी वैल्यू की जानबूझकर अनुपस्थिति को दर्शाता है, हमेशा लोअरकेस में।
Array [1, "two", false] वैल्यूज़ की एक क्रमित सूची, जो स्क्वायर ब्रैकेट्स [] में बंद होती है।
Object {"key": "value"} की/वैल्यू पेयर्स का एक अक्रमित संग्रह, जो कर्ली ब्रेसेस {} में होता है।

बस इतना ही। कोई तारीखें नहीं, कोई फ़ंक्शंस नहीं, कोई विशेष टाइप्स नहीं। यह सादगी एक फ़ीचर है, कोई कमी नहीं, क्योंकि यह गारंटी देता है कि डेटा को लगभग किसी भी प्रोग्रामिंग भाषा द्वारा समझा जा सकता है।

संरचना: ऑब्जेक्ट्स और एरेज़

असली जादू तब होता है जब आप इन बिल्डिंग ब्लॉक्स को मिलाते हैं।

  • ऑब्जेक्ट्स तब के लिए हैं जब आपके पास नामित चीजों का संग्रह हो। "कीज़" (नाम) डबल कोट्स में स्ट्रिंग्स होनी चाहिए। "वैल्यूज़" छह डेटा टाइप्स में से कोई भी हो सकती हैं, जिसमें कोई दूसरा ऑब्जेक्ट या एरे भी शामिल है। इस तरह आप पदानुक्रम (hierarchy) बनाते हैं।

  • एरेज़ तब के लिए हैं जब आपके पास चीजों की एक क्रमित सूची हो। क्रम मायने रखता है, और आप आइटम्स को उनकी स्थिति (इंडेक्स) से एक्सेस करते हैं, जो शून्य से शुरू होती है।

आइए एक सरल यूजर प्रोफ़ाइल बनाते हैं। यह एक ऑब्जेक्ट है क्योंकि इसमें name और email जैसे नामित गुण हैं। उन गुणों में से एक, skills, एक लिस्ट है, इसलिए हम एक एरे का उपयोग करते हैं।

{
  "userId": "u-9a8b7c",
  "username": "CodeWizard",
  "isActive": true,
  "lastLogin": null,
  "profile": {
    "realName": "Dana Scully",
    "location": "Washington, D.C."
  },
  "skills": [
    "Forensic Pathology",
    "Firearms",
    "Rational Skepticism"
  ]
}

नेस्टिंग देखी आपने? एक ऑब्जेक्ट (profile) मुख्य ऑब्जेक्ट के अंदर एक वैल्यू है। एक एरे (skills) एक और वैल्यू है। यह पेड़ जैसी संरचना जितनी गहरी आपको चाहिए उतनी हो सकती है, जिससे आप अविश्वसनीय रूप से जटिल डेटा को मॉडल कर सकते हैं।

JavaScript में, इस डेटा तक पहुंचना खूबसूरती से सहज है: data.username आपको "CodeWizard" देगा। data.profile.realName आपको "Dana Scully" देगा। data.skills[0] आपको "Forensic Pathology" देगा।

देशी भाषा संरचनाओं के साथ यह सीधी मैपिंग ही डेवलपर्स को पसंद आने का कारण है।

सड़क के नियम: सिंटैक्स

एक वैध JSON होने के लिए, आपको कुछ सख़्त नियमों का पालन करना होगा। यह सख़्ती ही इसे मशीनों द्वारा विश्वसनीय रूप से पार्स करने योग्य बनाती है।

  1. केवल डबल कोट्स: सभी कीज़ (keys) और सभी स्ट्रिंग वैल्यूज़ को डबल कोट्स (") में ही बंद किया जाना चाहिए। सिंगल कोट्स (') एक सिंटैक्स एरर है।
  2. कोई ट्रेलिंग कॉमा नहीं: एक कॉमा का उपयोग एरे में एलिमेंट्स या ऑब्जेक्ट में पेयर्स को अलग करने के लिए किया जाता है। आप अंतिम आइटम के बाद कॉमा नहीं लगा सकते।
    // खराब! `true` के बाद अतिरिक्त कॉमा
    {
      "key1": "value1",
      "key2": true, 
    }
    
  3. ऑब्जेक्ट्स और एरेज़: डेटा को ऑब्जेक्ट्स ({}) या एरेज़ ([]) में स्ट्रक्चर किया जाता है। एक वैध JSON डॉक्यूमेंट एक सिंगल वैल्यू (जैसे स्ट्रिंग "hello") हो सकता है, लेकिन यह लगभग हमेशा टॉप-लेवल कंटेनर के रूप में एक ऑब्जेक्ट या एरे होता है।
  4. व्हाइटस्पेस लचीला है: स्ट्रिंग्स के बाहर स्पेस, टैब्स और नई लाइनें कोई मायने नहीं रखतीं। यह इंसानी पठनीयता के लिए "सुंदर" इंडेंटेड फ़ॉर्मेट और कुशल नेटवर्क ट्रांसफर के लिए "मिनिफाइड" सिंगल-लाइन फ़ॉर्मेट दोनों की अनुमति देता है।

असल दुनिया की कहानियाँ

सोशल मीडिया फ़ीड

एक फ्रंट-एंड डेवलपर, माया को एक नए सोशल नेटवर्क के लिए इनफिनिट-स्क्रॉल फ़ीड बनाने का काम सौंपा गया है। हर बार जब यूज़र नीचे स्क्रॉल करता है, तो उसके JavaScript कोड को सर्वर से और पोस्ट के लिए पूछना पड़ता है। सर्वर HTML के साथ नहीं, बल्कि शुद्ध डेटा के साथ जवाब देता है। यह एक JSON एरे भेजता है, जहाँ प्रत्येक आइटम एक पोस्ट का प्रतिनिधित्व करने वाला एक ऑब्जेक्ट है। इस ऑब्जेक्ट में पोस्ट का टेक्स्ट, लेखक का यूज़रनेम, उनकी प्रोफ़ाइल पिक्चर का लिंक, लाइक्स की संख्या, और यहाँ तक कि पहले कुछ कमेंट्स का एक नेस्टेड एरे भी होता है। माया का कोड यह साफ JSON प्राप्त करता है, एरे के माध्यम से लूप करता है, और गतिशील रूप से प्रत्येक पोस्ट के लिए HTML बनाता है, इसे पेज में जोड़ता है।

सबक: JSON आधुनिक डायनामिक वेब एप्लिकेशन्स की जीवन रेखा है, जो सर्वर के दिमाग और ब्राउज़र की प्रस्तुति के बीच हल्के संदेशवाहक के रूप में काम करता है।

गेम कॉन्फ़िगरेशन

एक इंडी गेम डेवलपर, लियो, एक रोल-प्लेइंग गेम बना रहा है। उसे सैकड़ों आइटम्स को मैनेज करने की ज़रूरत है: तलवारें, पोशन्स, कवच, आदि। प्रत्येक आइटम के गुणों (नाम, क्षति, वजन, कीमत) को सीधे गेम के C++ कोड में हार्ड-कोड करना संतुलित और अपडेट करने के लिए एक बुरा सपना होता। इसके बजाय, वह एक items.json फ़ाइल बनाता है। यह एक विशाल JSON ऑब्जेक्ट है जहाँ प्रत्येक की (key) एक आइटम आईडी (जैसे "longsword") है और वैल्यू एक और ऑब्जेक्ट है जिसमें उसके सभी आँकड़े हैं। जब गेम शुरू होता है, तो यह इस फ़ाइल को पढ़ता है और सभी आइटम डेटा को मेमोरी में लोड करता है। गेम को फिर से संतुलित करने के लिए, उसे केवल टेक्स्ट फ़ाइल को एडिट करना होता है, रीकंपाइलिंग की कोई आवश्यकता नहीं होती।

सबक: JSON कॉन्फ़िगरेशन फ़ाइलों के लिए एक उत्कृष्ट फ़ॉर्मेट है, जो एप्लिकेशन के डेटा को उसके लॉजिक से अलग करता है और इसे इंसानों द्वारा आसानी से एडिट करने योग्य बनाता है।

माइक्रोसर्विस ऑर्केस्ट्रा

एक बैकएंड इंजीनियर, फातिमा, दर्जनों माइक्रोसर्विसेज से बने एक सिस्टम पर काम करती है। एक "यूज़र सर्विस" यूज़र खातों का प्रबंधन करती है, एक "ऑर्डर सर्विस" खरीद का प्रबंधन करती है, और एक "नोटिफिकेशन सर्विस" ईमेल भेजती है। जब कोई यूज़र ऑर्डर देता है, तो ऑर्डर सर्विस को यूज़र के शिपिंग पते की पुष्टि करने की आवश्यकता होती है। यह सीधे डेटाबेस से क्वेरी नहीं करती; इसके बजाय, यह यूज़र सर्विस के API एंडपॉइंट पर एक HTTP अनुरोध करती है, जैसे GET /api/users/123/address। यूज़र सर्विस एक साधारण JSON ऑब्जेक्ट के साथ जवाब देती है: {"street": "123 Main St", "city": "Anytown"}। ऑर्डर सर्विस इसे पार्स करती है, ऑर्डर को मान्य करती है, और फिर रसीद ईमेल करने के लिए नोटिफिकेशन सर्विस को एक अनुरोध (JSON पेलोड के साथ भी) भेजती है।

सबक: एक डिस्ट्रिब्यूटेड सिस्टम में, JSON एक सार्वभौमिक, भाषा-निरपेक्ष कॉन्ट्रैक्ट के रूप में कार्य करता है, जो Go, Python, और Node.js में लिखी गई सेवाओं को एक-दूसरे के साथ निर्बाध रूप से संवाद करने की अनुमति देता है।

आम गलतियाँ और जाल

  • ट्रेलिंग कॉमा: यह सबसे आम वैलिडेशन एरर है। JavaScript एरेज़ और ऑब्जेक्ट्स अक्सर अधिक उदार होते हैं, लेकिन JSON सख़्त है: किसी कलेक्शन में अंतिम एलिमेंट के बाद कोई कॉमा नहीं।
  • कमेंट्स: JSON में कमेंट्स नहीं होते। बस। // या /* */ के आदी डेवलपर्स अक्सर उन्हें जोड़ने की कोशिश करते हैं, जो JSON को तुरंत अमान्य कर देता है। इसका "आधिकारिक" हैक यह है कि "_comment": "Your note here" जैसी एक की (key) जोड़ दी जाए, जिसे एक पार्सर सिर्फ डेटा का एक और टुकड़ा मानेगा।
  • सिंगल कोट्स बनाम डबल कोट्स: सभी कीज़ और सभी स्ट्रिंग्स को अनिवार्य रूप से डबल कोट्स (") का उपयोग करना चाहिए। यदि आप Python डिक्शनरी या कुछ JavaScript स्टाइल गाइड से आ रहे हैं, तो आप सिंगल कोट्स के आदी हो सकते हैं, लेकिन वे JSON में निषिद्ध हैं।
  • Undefined जैसी कोई चीज़ नहीं: JavaScript में, एक अनुपस्थित ऑब्जेक्ट प्रॉपर्टी undefined होती है। JSON में इसकी कोई अवधारणा नहीं है। किसी अनुपस्थित या खाली वैल्यू का प्रतिनिधित्व करने के लिए, आपको स्पष्ट रूप से null का उपयोग करना चाहिए।
  • अनएस्केप्ड कोट्स: यदि आपकी स्ट्रिंग वैल्यू में एक डबल कोट होना चाहिए, तो आपको इसे एक बैकस्लैश (\) से एस्केप करना होगा। इसे भूलना ({"quote": "She said "Hello""}) स्ट्रक्चर को तोड़ देगा। सही तरीका है {"quote": "She said \"Hello\""}।

यह आपके रडार पर क्यों होना चाहिए

आधुनिक सॉफ्टवेयर डेवलपमेंट में, JSON सिर्फ "रडार पर" नहीं है; यह खुद रडार है। यह इतने सारे महत्वपूर्ण कार्यों के लिए डिफ़ॉल्ट फ़ॉर्मेट है कि इससे अपरिचित होना एक ऐसे बावर्ची (शेफ़) की तरह है जिसे नमक के बारे में नहीं पता।

आपको JSON के बारे में सोचना चाहिए जब भी:

  • आप एक वेब API बना रहे हैं या उसका उपभोग कर रहे हैं।
  • आपको एक एप्लिकेशन के लिए कॉन्फ़िगरेशन फ़ाइल की आवश्यकता है।
  • आपको स्ट्रक्चर्ड डेटा को एक साधारण टेक्स्ट फ़ाइल में या MongoDB जैसी NoSQL डेटाबेस में स्टोर करने की आवश्यकता है।
  • आप एक सर्वर-साइड प्रक्रिया से क्लाइंट-साइड JavaScript एप्लिकेशन में डेटा भेज रहे हैं।
  • आपको किसी ऑब्जेक्ट को नेटवर्क पर भेजने या डिस्क पर सहेजने के लिए सीरियलाइज़ करने के लिए एक सरल, मानव-पठनीय फ़ॉर्मेट की आवश्यकता है।

अनिवार्य रूप से, यदि आपको दो अलग-अलग प्रोग्रामों को एक-दूसरे से बात करने की आवश्यकता है, या यदि आपको अपने डेटा को अपने कोड से अलग करने की आवश्यकता है, तो JSON लगभग हमेशा आपका पहला, सबसे अच्छा जवाब है।

और गहराई में जाएँ

  • JSON.org: डगलस क्रॉकफ़ोर्ड द्वारा मूल, एक-पृष्ठ का स्पेसिफिकेशन। संक्षिप्त डॉक्यूमेंटेशन का एक उत्कृष्ट नमूना।
  • RFC 8259: The JavaScript Object Notation (JSON) Data Interchange Format: आधिकारिक, औपचारिक इंटरनेट स्टैंडर्ड। यह सघन है लेकिन निर्णायक है।
  • MDN Web Docs: JSON: वेब डेवलपर्स के लिए एक उत्कृष्ट और व्यावहारिक गाइड, जो JavaScript के बिल्ट-इन JSON ऑब्जेक्ट पर केंद्रित है।
  • Wikipedia: JSON: इसके इतिहास, विकल्पों और प्रोग्रामिंग की दुनिया में इसकी भूमिका का एक उच्च-स्तरीय अवलोकन के लिए।
  • Google TechTalks: The JSON Saga: डगलस क्रॉकफ़ोर्ड का एक वीडियो जिसमें वे खुद JSON के पीछे के इतिहास और डिज़ाइन दर्शन को समझा रहे हैं। एक मजेदार और ज्ञानवर्धक वीडियो।

थ्योरी हो गई। अब हाथ आज़माइए — 100% आपके ब्राउज़र में।

टूल आज़माएँ: JSON व्यूअर