JSON ट्री व्यूअर

JSON ट्री व्यूअर क्या है?#

एक JSON ट्री व्यूअर JSON दस्तावेज़ को पार्स करता है और उसे तह किए जा सकने वाली रूपरेखा के रूप में खींचता है, ठीक वैसे ही जैसे कोई फ़ाइल एक्सप्लोरर डायरेक्टरी ट्री दिखाता है। इंडेंटेड टेक्स्ट की एक लंबी दीवार पढ़ते हुए यह गिनती करने के बजाय कि क्या किसके अंदर नेस्टेड है, आप संरचना एक नज़र में देखते हैं: ऑब्जेक्ट्स और ऐरे ऐसी शाखाएँ हैं जिन्हें आप खोलने या बंद करने के लिए क्लिक कर सकते हैं, और लीफ वैल्यूज़ — स्ट्रिंग्स, नंबर्स, बूलियन्स, null — सिरों पर बैठते हैं।

यह तब सबसे ज़्यादा मायने रखता है जब दस्तावेज़ गहरा या अपरिचित हो। एक ही API रिस्पॉन्स आसानी से सैकड़ों पंक्तियों तक जा सकता है; किसी कॉन्फ़िग फ़ाइल में सेटिंग्स ऐसे नामों के नीचे चार-पाँच स्तर गहरी नेस्टेड हो सकती हैं जो एक जैसे दिखते हैं। एक फ़्लैट फ़ॉर्मेटर में आप स्क्रॉल करते हैं और अपनी जगह खो देते हैं। एक ट्री में आप अपनी दिलचस्प शाखा को छोड़कर सब कुछ संक्षिप्त कर देते हैं, और बाकी चीज़ें आपका ध्यान हड़पना बंद कर देती हैं।

यह पेज आपके JSON को ब्राउज़र में पार्स करता है और नोड-दर-नोड एक संक्षिप्य ट्री रेंडर करता है, सादे टेक्स्ट कंटेंट का उपयोग करते हुए इनपुट को HTML के रूप में इंटरप्रेट करने के बजाय — इसलिए ऐसा दस्तावेज़ जिसमें <script> टैग या HTML जैसी दिखने वाली स्ट्रिंग्स हों, भी निष्क्रिय दिखाया जाता है, न कि चलाया जाता।

इसका उपयोग कैसे करें#

1. अपना JSON बाईं ओर इनपुट पैनल में चिपकाएँ। टाइप करते ही पार्सिंग होती है।
2. ट्री दाईं ओर दिखाई देता है। प्रत्येक ऑब्जेक्ट या ऐरे एक ▼ टॉगल, उसका ओपनिंग ब्रैकेट ({ या [), अंदर प्रविष्टियों की संख्या, और उसका क्लोजिंग ब्रैकेट दिखाता है। उस शाखा को तह करने या खोलने के लिए टॉगल — या ब्रैकेट्स खुद — पर क्लिक करें।
3. हर शाखा को उसकी लीफ तक खोलने के लिए सभी विस्तृत करें का उपयोग करें, और पूरे दस्तावेज़ को केवल रूट तक सिकोड़ने के लिए सभी संक्षिप्त करें। संक्षिप्त करना ही वह तरीका है जिससे आप किसी विस्तृत पेलोड का एक-पंक्ति का ओवरव्यू पहले प्राप्त करते हैं, फिर अंदर जाते हैं।
4. दाईं ओर का हेडर रूट की टॉप-लेवल प्रविष्टियों की संख्या दिखाता है (जैसे 5 items), ताकि आप एक नज़र में बता सकें कि दस्तावेज़ कितना बड़ा है।
5. नमूना एक नेस्टेड प्रदर्शन दस्तावेज़ लोड करता है; साफ़ करें दोनों पैनलों को खाली कर देता है।

प्रमुख विशेषताएँ#

• किसी भी शाखा को स्वतंत्र रूप से तह करें। प्रत्येक कंटेनर अपने आप खुलता और बंद होता है, इसलिए आप संदर्भ के लिए एक सब-ऑब्जेक्ट को विस्तृत रख सकते हैं जबकि बाकी संक्षिप्त रहे।
• गहराई गाइड। चिल्ड्रन एक वर्टिकल गाइड लाइन के नीचे इंडेंट होते हैं, जिससे घने दस्तावेज़ों में भी यह स्पष्ट हो जाता है कि कोई प्रविष्टि किस ब्रेस की है।
• XSS-सुरक्षित रेंडरिंग। हर लेबल और वैल्यू सादे टेक्स्ट कंटेंट के रूप में लिखा जाता है — इनपुट कभी HTML के रूप में पार्स नहीं होता। एक दुर्भावनापूर्ण दिखने वाली स्ट्रिंग सीधे टेक्स्ट के रूप में दिखाई देती है।
• विश्वसनीय लीफ वैल्यूज़। स्ट्रिंग्स अपने घेरने वाले कोट्स रखती हैं और नंबर्स बिलकुल वैसे ही रेंडर होते हैं जैसे JSON.stringify उन्हें लिखता, इसलिए true (बूलियन) दृश्य रूप से "true" (स्ट्रिंग) से अलग दिखता है।
• लाइव गणना। हेडर बताता है कि रूट कितनी प्रविष्टियाँ रखता है, आप संपादन करते ही अपडेट होता है।

कार्य उदाहरण#

नमूना लोड करें और पार्स किया गया ट्री पाँच टॉप-लेवल प्रविष्टियों वाला एक रूट ऑब्जेक्ट दिखाता है:

▼ { 5
    "name": "ArpGate DevTools"
    "version": 1
    "active": true
  ▼ "tags": [ 3 ]
  ▼ "features": { 2 }

इनमें से दो प्रविष्टियाँ खुद कंटेनर हैं। tags को खोलने पर तीन-तत्व वाला ऐरे ("json", "encoding", "crypto") दिखता है, और features को खोलने पर पता चलता है कि static true है जबकि backend null है — एक भेद जिसे ट्री स्पष्ट रूप से रेंडर करता है बजाय इसके कि आपको किसी फ़्लैट डंप से अनुमान लगाना पड़े।

यदि आपको केवल features सब-ऑब्जेक्ट से मतलब है, तो टॉप लेवल पर हर दूसरे ▼ को तह करने के लिए क्लिक करें। रूट पर गणना 5 सटीक रहती है, और गहराई गाइड स्पष्ट करता है कि static और backend features से हैं, रूट से नहीं।

अक्सर पूछे जाने वाले प्रश्न#

क्या यह मेरे JSON को संशोधित या पुनर्संरचित करता है?#

नहीं। ट्री पार्स किए गए मान का एक केवल-पढ़ने योग्य दृश्य है। आपका इनपुट टेक्स्ट कभी दोबारा नहीं लिखा, पुनः-इंडेंट, या निकाला नहीं जाता। यदि आप चाहते हैं कि दस्तावेज़ टेक्स्ट के रूप में प्रिंटी-प्रिंट हो, तो फ़ॉर्मेटर का उपयोग करें; यह औज़ार नेविगेट करने के लिए है, नॉर्मलाइज़ करने के लिए नहीं।

ट्री में स्ट्रिंग्स के पास अभी भी कोट्स क्यों हैं?#

क्योंकि यही है JSON खुद एक स्ट्रिंग को एक खाली कीवर्ड से अलग करने का तरीका। कोट्स के बिना, true और "true" एक जैसे दिखेंगे, और ऐसे ही null और स्ट्रिंग "null"। कोट्स रखने से (बिलकुल वैसे ही जैसे JSON.stringify उन्हें बनाता है) वह भेद एक नज़र में बना रहता है।

यह बहुत बड़े दस्तावेज़ों को कैसे संभालता है?#

पार्सिंग और रेंडरिंग पूरी तरह आपके ब्राउज़र में होती है, इसलिए न कोई अपलोड है और न कोई सर्वर राउंड-ट्रिप। सामान्य कॉन्फ़िग और API रिस्पॉन्स के लिए यह तुरंत होता है। किसी मल्टी-मेगाबाइट दस्तावेज़ के लिए ट्री को हर वैल्यू का एक नोड बनाना पड़ता है, जो सुस्त हो सकता है — ऐसी शाखाएँ संक्षिप्त करें जिनकी आपको ज़रूरत नहीं, ताकि दृश्यमान नोड गणना नियंत्रण में रहे।

क्या HTML वाली स्ट्रिंग HTML के रूप में रेंडर होगी?#

कभी नहीं। औज़ार हर वैल्यू को टेक्स्ट कंटेंट के रूप में लिखता है, जिसे ब्राउज़र निष्क्रिय कैरेक्टरों के रूप में मानता है। एक स्ट्रिंग जिसमें मौक़े पर <script> या <img onerror=...> हो, वैसे ही टेक्स्ट के रूप में दिखाई देती है — इसे मार्कअप के रूप में पार्स नहीं किया जाता और यह नहीं चल सकती।