जावास्क्रिप्ट का उपयोग करके JSON को पढ़ने योग्य प्रारूप में कैसे प्रदर्शित करें

जावास्क्रिप्ट के साथ JSON पठनीयता बढ़ाना

JSON (जावास्क्रिप्ट ऑब्जेक्ट नोटेशन) एक लोकप्रिय डेटा प्रारूप है जिसका उपयोग सर्वर और वेब एप्लिकेशन के बीच सूचना प्रसारित करने के लिए किया जाता है। हालाँकि यह मशीनों के लिए पार्स करने में कुशल है, लेकिन JSON में उचित फ़ॉर्मेटिंग का अभाव होने पर इसे पढ़ना मनुष्यों के लिए चुनौतीपूर्ण हो सकता है। इंडेंटेशन, व्हाइटस्पेस और यहां तक ​​कि रंग और फ़ॉन्ट जैसे शैलीगत तत्व पठनीयता में महत्वपूर्ण अंतर ला सकते हैं।

इस लेख में, हम जावास्क्रिप्ट का उपयोग करके JSON को प्रीटी-प्रिंट करने की विभिन्न तकनीकों का पता लगाएंगे। चाहे आप एक एपीआई प्रतिक्रिया डिबग करने वाले डेवलपर हों या बस डेटा को अधिक स्पष्ट रूप से प्रस्तुत करने की आवश्यकता हो, ये विधियां आपको मानव-अनुकूल JSON डिस्प्ले प्राप्त करने में मदद करेंगी।

प्रिटी-प्रिंट JSON स्क्रिप्ट कैसे काम करती है

पहली स्क्रिप्ट में, हम JSON को अधिक पठनीय तरीके से प्रारूपित और प्रदर्शित करने के लिए जावास्क्रिप्ट का उपयोग करते हैं। कार्यक्रम syntaxHighlight एक JSON ऑब्जेक्ट को इनपुट के रूप में लेता है और इसे एक स्ट्रिंग में परिवर्तित करता है JSON.stringify, 4-स्पेस इंडेंटेशन लागू करना। फिर फ़ंक्शन HTML इंजेक्शन के उपयोग को रोकने के लिए विशेष वर्णों को बदल देता है json.replace. यह विभिन्न JSON तत्वों जैसे स्ट्रिंग्स, संख्याओं, बूलियन और शून्य मानों से मिलान करने के लिए एक नियमित अभिव्यक्ति का भी उपयोग करता है, प्रत्येक मिलान किए गए तत्व को लपेटता है <span> सिंटैक्स हाइलाइटिंग के लिए उपयुक्त वर्गों वाले टैग। अंत में, हम उपयोग करते हैं document.body.innerHTML स्वरूपित JSON को वेब पेज में सम्मिलित करने के लिए।

दूसरी स्क्रिप्ट Node.js का उपयोग करके सर्वर-साइड JSON स्वरूपण को प्रदर्शित करती है। यहां, हम इसकी आवश्यकता से शुरुआत करते हैं http HTTP सर्वर बनाने के लिए मॉड्यूल। हम एक नमूना JSON ऑब्जेक्ट को परिभाषित करते हैं और सर्वर को पोर्ट 3000 पर सुनने के लिए सेट करते हैं। जब कोई अनुरोध प्राप्त होता है, तो सर्वर JSON स्ट्रिंग के साथ प्रतिक्रिया करता है। हम उपयोग करते हैं res.writeHead प्रतिक्रिया शीर्षलेख सेट करने के लिए, यह दर्शाता है कि सामग्री प्रकार JSON है। JSON ऑब्जेक्ट को फिर एक सुंदर-मुद्रित स्ट्रिंग में परिवर्तित किया जाता है JSON.stringify 4-स्पेस इंडेंटेशन के साथ और क्लाइंट को वापस भेजा गया res.end. यह दृष्टिकोण सुनिश्चित करता है कि JSON डेटा आसानी से पढ़ने योग्य है, चाहे वह वेब पेज पर प्रदर्शित हो या सर्वर से प्राप्त हो।

जावास्क्रिप्ट में बेहतर पठनीयता के लिए JSON को फ़ॉर्मेट करना

इंडेंटेशन और सिंटैक्स हाइलाइटिंग के साथ JSON को सुंदर-प्रिंट करने के लिए जावास्क्रिप्ट फ्रंट-एंड स्क्रिप्ट

// Function to pretty-print JSON with colors and indentation
function syntaxHighlight(json) {
    json = JSON.stringify(json, undefined, 4);
    json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?)|(\b(true|false|null)\b)|(\b-?\d+(\.\d*)?([eE][+-]?\d+)?\b)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}
// Example usage
var json = { "name": "John", "age": 30, "city": "New York" };
document.body.innerHTML = '<pre>' + syntaxHighlight(json) + '</pre>';

Node.js के साथ सर्वर-साइड JSON फ़ॉर्मेटिंग

इंडेंटेशन के साथ JSON को सुंदर-प्रिंट करने के लिए Node.js बैक-एंड स्क्रिप्ट

// Required module
const http = require('http');
// Sample JSON data
const jsonData = { "name": "Alice", "age": 25, "city": "Wonderland" };
// Server setup
http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'application/json'});
    // Pretty-print JSON with 4-space indentation
    res.end(JSON.stringify(jsonData, null, 4));
}).listen(3000, () => {
    console.log('Server running at http://localhost:3000/');
});

जावास्क्रिप्ट में प्रिटी-प्रिंटिंग JSON के लिए उन्नत तकनीकें

जबकि JSON डेटा को अधिक पठनीय बनाने के लिए बुनियादी इंडेंटेशन और सिंटैक्स हाइलाइटिंग आवश्यक हैं, उन्नत तकनीकें प्रस्तुति को और बेहतर बना सकती हैं। ऐसी ही एक तकनीक हाईलाइट.जेएस या प्रिज्म.जेएस जैसी तृतीय-पक्ष लाइब्रेरी का उपयोग करना है। ये लाइब्रेरी व्यापक सिंटैक्स हाइलाइटिंग क्षमताएं प्रदान करती हैं, जिससे डेवलपर्स को विभिन्न कोड प्रारूपों में सुसंगत और आकर्षक शैलियों को लागू करने की अनुमति मिलती है। इन पुस्तकालयों को एकीकृत करके, आप न केवल JSON को प्रारूपित कर सकते हैं बल्कि यह भी सुनिश्चित कर सकते हैं कि रंग और शैलियाँ आपकी समग्र डिज़ाइन भाषा के अनुरूप हैं। इसके अतिरिक्त, ये लाइब्रेरी आपके एप्लिकेशन या वेबसाइट की विशिष्ट सौंदर्य आवश्यकताओं से मेल खाने के लिए अनुकूलन विकल्प प्रदान करती हैं।

एक अन्य उन्नत विधि में इंटरैक्टिव JSON व्यूअर बनाना शामिल है। ये व्यूअर उपयोगकर्ताओं को JSON डेटा के अनुभागों को संक्षिप्त और विस्तारित करने की अनुमति देते हैं, जिससे बड़े डेटासेट के माध्यम से नेविगेट करना आसान हो जाता है। JSONEEditor और Ace editor जैसी लाइब्रेरी इस उद्देश्य के लिए उत्कृष्ट हैं। वे ट्री व्यू, कोड व्यू और यहां तक ​​कि टेक्स्ट एडिटर जैसी सुविधाएं प्रदान करते हैं जो JSON स्कीमा सत्यापन का समर्थन करते हैं। एक इंटरैक्टिव व्यूअर को लागू करके, आप उपयोगकर्ता अनुभव में उल्लेखनीय रूप से सुधार कर सकते हैं, खासकर जब जटिल या नेस्टेड JSON संरचनाओं से निपटते हैं।

प्रिटी-प्रिंटिंग JSON के बारे में अक्सर पूछे जाने वाले प्रश्न

1. JSON में प्रीटी-प्रिंटिंग क्या है?
2. JSON में प्रिटी-प्रिंटिंग का तात्पर्य JSON डेटा को इंडेंटेशन और व्हाइटस्पेस के साथ स्वरूपित करना है ताकि इसे मनुष्यों के लिए अधिक पठनीय बनाया जा सके।
3. प्रिटी-प्रिंटिंग JSON क्यों महत्वपूर्ण है?
4. प्रिटी-प्रिंटिंग JSON महत्वपूर्ण है क्योंकि यह पठनीयता को बढ़ाता है और डेवलपर्स को डेटा संरचना को अधिक कुशलता से डीबग करने और समझने में मदद करता है।
5. मैं जावास्क्रिप्ट में JSON को प्रीटी-प्रिंट कैसे कर सकता हूँ?
6. आप इसका उपयोग कर सकते हैं JSON.stringify जावास्क्रिप्ट में JSON डेटा को प्रारूपित करने के लिए इंडेंटेशन पैरामीटर वाली विधि।
7. उन्नत JSON फ़ॉर्मेटिंग के लिए कुछ लाइब्रेरी क्या हैं?
8. हाइलाइट.जेएस, प्रिज्म.जेएस, जेएसओएनएडिटर और ऐस एडिटर उन्नत जेएसओएन फ़ॉर्मेटिंग और देखने के लिए लोकप्रिय लाइब्रेरी हैं।
9. क्या मैं सुंदर-मुद्रित JSON पर कस्टम शैलियाँ लागू कर सकता हूँ?
10. हां, हाइलाइट.जेएस या कस्टम सीएसएस जैसी लाइब्रेरी का उपयोग करके, आप JSON डेटा के विभिन्न हिस्सों में विशिष्ट रंग और शैलियाँ लागू कर सकते हैं।
11. क्या इंटरैक्टिव JSON व्यूअर बनाना संभव है?
12. हां, इंटरैक्टिव JSON व्यूअर्स को JSONEEditor और Ace एडिटर जैसी लाइब्रेरी का उपयोग करके बनाया जा सकता है, जिससे उपयोगकर्ता JSON डेटा के अनुभागों को संक्षिप्त और विस्तारित कर सकते हैं।
13. का उद्देश्य क्या है json.replace स्क्रिप्ट में विधि?
14. json.replace HTML इंजेक्शन को रोकने के लिए JSON स्ट्रिंग में विशेष वर्णों से बचने के लिए विधि का उपयोग किया जाता है।
15. आप बड़े JSON डेटासेट को कैसे संभालते हैं?
16. बड़े JSON डेटासेट के लिए, इंटरैक्टिव व्यूअर और ट्री संरचनाएं उपयोगकर्ताओं को डेटा को अधिक प्रभावी ढंग से नेविगेट करने और समझने में मदद कर सकती हैं।
17. क्या मैं प्रीटी-प्रिंटिंग JSON के लिए सर्वर-साइड स्क्रिप्टिंग का उपयोग कर सकता हूँ?
18. हाँ, Node.js जैसी सर्वर-साइड स्क्रिप्टिंग भाषाओं का उपयोग सुंदर-मुद्रित JSON डेटा को प्रारूपित करने और परोसने के लिए किया जा सकता है।

JSON फ़ॉर्मेटिंग तकनीकों पर अंतिम विचार

प्रिटी-प्रिंटिंग JSON डेटा की पठनीयता और उपयोगिता को बढ़ाने के लिए महत्वपूर्ण है, खासकर डिबगिंग और विकास के दौरान। जावास्क्रिप्ट और विभिन्न पुस्तकालयों का उपयोग करके, आप JSON को उचित इंडेंटेशन, व्हाइटस्पेस और यहां तक ​​कि रंगों के साथ आसानी से प्रारूपित कर सकते हैं। इंटरैक्टिव व्यूअर्स जैसी उन्नत तकनीकों को लागू करने से उपयोगकर्ता अनुभव में और सुधार होता है, जिससे जटिल JSON संरचनाओं को नेविगेट करना और समझना आसान हो जाता है। अंततः, ये विधियाँ और उपकरण JSON डेटा के साथ काम करने वाले डेवलपर्स के लिए अमूल्य हैं।