JSON को मनुष्यों के लिए अधिक पठनीय बनाना
JSON के साथ काम करना डेवलपर्स के लिए एक सामान्य कार्य है, खासकर एपीआई और डेटा स्टोरेज के साथ काम करते समय। हालाँकि, प्रारूपण की कमी के कारण कच्चे JSON को पढ़ना और समझना मुश्किल हो सकता है। जो लोग JSON को अधिक सुलभ बनाना चाहते हैं, उनके लिए उचित इंडेंटेशन और व्हाइटस्पेस लागू करना महत्वपूर्ण है।
इस लेख में, हम जावास्क्रिप्ट का उपयोग करके JSON को प्रीटी-प्रिंट करने के विभिन्न तरीकों का पता लगाएंगे। हम न केवल बुनियादी इंडेंटेशन और व्हाइटस्पेस तकनीकों को कवर करेंगे बल्कि रंगों और फ़ॉन्ट शैलियों के साथ पठनीयता को कैसे बढ़ाया जाए। यह मार्गदर्शिका आपको कच्चे JSON को मानव-अनुकूल प्रारूप में बदलने में मदद करेगी।
| आज्ञा | विवरण |
|---|---|
| JSON.stringify(json, null, 2) | एक जावास्क्रिप्ट ऑब्जेक्ट को 2-स्पेस इंडेंटेशन के साथ JSON स्ट्रिंग में परिवर्तित करता है। |
| .replace(/(".*?"|null|true|false|\d+)/g, ...) | कस्टम फ़ॉर्मेटिंग के लिए विशिष्ट JSON तत्वों की पहचान करने के लिए नियमित अभिव्यक्ति का उपयोग करता है। |
| http.createServer(...).listen() | Node.js में एक HTTP सर्वर बनाता है जो एक निर्दिष्ट पोर्ट पर सुनता है। |
| res.writeHead(200, { 'Content-Type': 'application/json' }) | यह इंगित करने के लिए HTTP प्रतिक्रिया शीर्षलेख सेट करता है कि सामग्री प्रकार JSON है। |
| res.end() | ग्राहक को प्रतिक्रिया वापस भेजता है और संकेत देता है कि सभी प्रतिक्रिया शीर्षलेख और मुख्य भाग भेज दिए गए हैं। |
| document.body.innerHTML | दस्तावेज़ में मुख्य तत्व की HTML सामग्री सेट या प्राप्त करता है। |
JSON फ़ॉर्मेटिंग स्क्रिप्ट का विस्तृत विवरण
पहली स्क्रिप्ट एक फ्रंटएंड जावास्क्रिप्ट समाधान है जिसे इंडेंटेशन जोड़कर और रंग कोडिंग लागू करके JSON को सुंदर-प्रिंट करने के लिए डिज़ाइन किया गया है। स्क्रिप्ट नामक फ़ंक्शन से शुरू होती है prettyPrintJSON, जो JSON ऑब्जेक्ट को इनपुट के रूप में लेता है। इस फ़ंक्शन के अंदर, JSON ऑब्जेक्ट को 2-स्पेस इंडेंटेशन के साथ एक स्ट्रिंग में परिवर्तित किया जाता है JSON.stringify(json, null, 2) तरीका। यह सुनिश्चित करता है कि आवश्यक रिक्त स्थान जोड़कर JSON अधिक पठनीय है। पठनीयता को और बढ़ाने के लिए, स्क्रिप्ट का उपयोग करता है .replace(/(".*?"|null|true|false|\d+)/g, ...) स्ट्रिंग, संख्या, बूलियन और शून्य मान जैसे विशिष्ट JSON तत्वों से मेल खाने के लिए नियमित अभिव्यक्ति वाली विधि। प्रत्येक मिलान किए गए तत्व को एक में लपेटा गया है संबंधित वर्ग के साथ टैग, सीएसएस को प्रत्येक डेटा प्रकार पर अलग-अलग रंग लागू करने की अनुमति देता है। फिर स्वरूपित JSON स्ट्रिंग को दस्तावेज़ के मुख्य भाग में डाला जाता है document.body.innerHTML.
दूसरी स्क्रिप्ट JSON को प्रीटी-प्रिंट करने के लिए Node.js का उपयोग करके एक बैकएंड समाधान है। यह स्क्रिप्ट एक HTTP सर्वर बनाती है http.createServer(...), जो एक निर्दिष्ट पोर्ट का उपयोग करके आने वाले अनुरोधों को सुनता है .listen(). अनुरोध प्राप्त होने पर, सर्वर पठनीयता के लिए स्वरूपित JSON ऑब्जेक्ट के साथ प्रतिक्रिया करता है। JSON ऑब्जेक्ट को इंडेंटेशन का उपयोग करके एक स्ट्रिंग में परिवर्तित किया जाता है JSON.stringify(json, null, 2). प्रतिक्रिया शीर्षलेख यह इंगित करने के लिए सेट किया गया है कि सामग्री प्रकार JSON है res.writeHead(200, { 'Content-Type': 'application/json' }). अंत में, सुंदर-मुद्रित JSON स्ट्रिंग का उपयोग करके क्लाइंट को भेजा जाता है res.end(). यह स्क्रिप्ट डेवलपर्स को केवल सर्वर के पते पर नेविगेट करके अपने ब्राउज़र में अच्छी तरह से स्वरूपित JSON आउटपुट को तुरंत देखने की अनुमति देती है।
बेहतर पठनीयता के लिए JSON को फ़ॉर्मेट करने के लिए जावास्क्रिप्ट का उपयोग करना
फ्रंटएंड जावास्क्रिप्ट
// Function to pretty-print JSON with indentation and colorsfunction prettyPrintJSON(json) {// Convert JSON object to string with 2-space indentationconst jsonString = JSON.stringify(json, null, 2);// Replace specific characters for color codingreturn jsonString.replace(/(".*?"|null|true|false|\d+)/g, match => {let cls = "number";if (/^".*"$/.test(match)) {cls = "string";} else if (/true|false/.test(match)) {cls = "boolean";} else if (/null/.test(match)) {cls = "null";}return `<span class="${cls}">${match}</span>`;});}// JSON dataconst jsonData = {"name": "John","age": 30,"city": "New York","isStudent": false};// Display formatted JSONdocument.body.innerHTML = `<pre>${prettyPrintJSON(jsonData)}</pre>`;
प्रिटी-प्रिंट JSON के लिए बैकएंड दृष्टिकोण
Node.js के साथ बैकएंड
const http = require('http');const url = require('url');// Function to pretty-print JSONfunction prettyPrintJSON(json) {return JSON.stringify(json, null, 2);}// Create HTTP serverhttp.createServer((req, res) => {res.writeHead(200, { 'Content-Type': 'application/json' });// Sample JSON dataconst jsonData = {name: "John",age: 30,city: "New York",isStudent: false};// Send pretty-printed JSONres.end(prettyPrintJSON(jsonData));}).listen(3000, () => {console.log('Server running at http://localhost:3000');});
अतिरिक्त टूल के साथ JSON पठनीयता बढ़ाना
जबकि पिछले समाधान JSON को प्रीटी-प्रिंट करने के लिए फ्रंटएंड और बैकएंड जावास्क्रिप्ट तरीकों पर केंद्रित थे, ऐसे अन्य उपकरण और तकनीकें हैं जो JSON पठनीयता को और बढ़ा सकते हैं। एक लोकप्रिय तरीका ब्राउज़र एक्सटेंशन या ऑनलाइन टूल का उपयोग करना है। JSONView या JSON फ़ॉर्मेटर जैसे एक्सटेंशन ब्राउज़र में JSON को स्वचालित रूप से प्रारूपित कर सकते हैं, पठनीयता में सुधार के लिए इंडेंटेशन और रंग कोडिंग जोड़ सकते हैं। ये उपकरण विशेष रूप से उन डेवलपर्स के लिए उपयोगी हैं जो अक्सर एपीआई के साथ इंटरैक्ट करते हैं और उन्हें अतिरिक्त कोड लिखे बिना JSON डेटा को जल्दी से पार्स करने और समझने की आवश्यकता होती है।
एक अन्य उपयोगी विधि में हाइलाइट.जेएस या प्रिज्म.जेएस जैसे पुस्तकालयों का लाभ उठाना शामिल है, जो JSON सहित विभिन्न प्रोग्रामिंग भाषाओं के लिए सिंटैक्स हाइलाइटिंग को संभालने के लिए डिज़ाइन किए गए हैं। इन पुस्तकालयों को JSON डेटा को गतिशील रूप से प्रारूपित करने और हाइलाइट करने के लिए वेब अनुप्रयोगों में एकीकृत किया जा सकता है। का उपयोग करके Highlight.js, आप JSON स्ट्रिंग्स पर पूर्वनिर्धारित थीम लागू कर सकते हैं, जिससे विभिन्न डेटा प्रकारों के बीच अंतर करना आसान हो जाता है। इसके अतिरिक्त, ऐसे पुस्तकालयों को आपके विकास वर्कफ़्लो में एकीकृत करने से समय की बचत हो सकती है और विभिन्न परियोजनाओं में JSON स्वरूपण में स्थिरता सुनिश्चित हो सकती है।
JSON फ़ॉर्मेटिंग के बारे में अक्सर पूछे जाने वाले प्रश्न
- प्रिटी-प्रिंटिंग JSON क्या है?
- प्रिटी-प्रिंटिंग JSON का तात्पर्य JSON डेटा को इंडेंटेशन और व्हाइटस्पेस के साथ स्वरूपित करना है ताकि इसे मनुष्यों के लिए अधिक पठनीय बनाया जा सके।
- JSON फ़ॉर्मेटिंग क्यों महत्वपूर्ण है?
- उचित JSON फ़ॉर्मेटिंग पठनीयता में सुधार करती है और डेवलपर्स को डेटा की संरचना और सामग्री को शीघ्रता से समझने में मदद करती है।
- क्या है JSON.stringify तरीका?
- JSON.stringify विधि एक जावास्क्रिप्ट ऑब्जेक्ट को JSON स्ट्रिंग में परिवर्तित करती है।
- कैसे हुआ JSON.stringify सुंदर-मुद्रण में सहायता?
- गुजरते हुए JSON.stringify तीसरा तर्क (इंडेंटेशन स्तर), आप इंडेंटेशन के साथ JSON स्ट्रिंग को प्रारूपित कर सकते हैं।
- हाईलाइट.जेएस क्या है?
- हाइलाइट.जेएस सिंटैक्स हाइलाइटिंग के लिए एक लाइब्रेरी है जिसका उपयोग JSON डेटा को प्रारूपित और हाइलाइट करने के लिए किया जा सकता है।
- क्या मैं JSON को फ़ॉर्मेट करने के लिए ब्राउज़र एक्सटेंशन का उपयोग कर सकता हूँ?
- हाँ, JSONView या JSON फ़ॉर्मेटर जैसे एक्सटेंशन स्वचालित रूप से आपके ब्राउज़र में JSON को प्रारूपित कर सकते हैं।
- का उद्देश्य क्या है replace JSON स्वरूपण में विधि?
- replace विभिन्न JSON तत्वों में रंग कोडिंग जोड़ने के लिए रेगुलर एक्सप्रेशन वाली विधि का उपयोग किया जा सकता है।
- प्रीटी-प्रिंटिंग JSON के लिए सामान्य उपयोग का मामला क्या है?
- प्रिटी-प्रिंटिंग JSON का उपयोग आमतौर पर डिबगिंग के दौरान या गैर-तकनीकी हितधारकों के लिए JSON डेटा प्रस्तुत करते समय किया जाता है।
- मैं Node.js में JSON को प्रीटी-प्रिंट कैसे कर सकता हूँ?
- आप Node.js में एक HTTP सर्वर बना सकते हैं और उपयोग कर सकते हैं JSON.stringify JSON प्रतिक्रियाओं को प्रारूपित करने के लिए।
JSON फ़ॉर्मेटिंग पर अंतिम विचार
डेटा की पठनीयता और उपयोगिता में सुधार के लिए प्रीटी-प्रिंटिंग JSON आवश्यक है। जावास्क्रिप्ट का उपयोग करके, डेवलपर्स JSON को अधिक मानव-अनुकूल बनाने के लिए इंडेंटेशन, व्हाइटस्पेस और कलर कोडिंग लागू कर सकते हैं। इसके अतिरिक्त, ब्राउज़र एक्सटेंशन और सिंटैक्स हाइलाइटिंग लाइब्रेरी का लाभ उठाकर फ़ॉर्मेटिंग को और बढ़ाया जा सकता है। ये तकनीकें सामूहिक रूप से JSON डेटा की बेहतर डिबगिंग और प्रस्तुति में मदद करती हैं, जिससे डेटा प्रबंधन में स्पष्टता और दक्षता सुनिश्चित होती है।