JavaScript वापरून वाचनीय स्वरूपात JSON कसे प्रदर्शित करावे

JavaScript वापरून वाचनीय स्वरूपात JSON कसे प्रदर्शित करावे
Mia Chevalier
मंगळवार, २ जुलै, २०२४ रोजी ८:०९:२५ म.उ.
JavaScript

JavaScript सह JSON वाचनीयता वाढवणे

JSON (JavaScript ऑब्जेक्ट नोटेशन) हे एक लोकप्रिय डेटा स्वरूप आहे जे सर्व्हर आणि वेब ऍप्लिकेशन दरम्यान माहिती प्रसारित करण्यासाठी वापरले जाते. मशीनचे विश्लेषण करणे कार्यक्षम असले तरी, योग्य स्वरूपन नसताना JSON वाचणे मानवांसाठी आव्हानात्मक असू शकते. इंडेंटेशन, व्हाईटस्पेस आणि अगदी शैलीत्मक घटक जसे की रंग आणि फॉन्ट वाचनीयतेमध्ये लक्षणीय फरक करू शकतात.

या लेखात, आम्ही JavaScript वापरून JSON सुंदर-मुद्रित करण्यासाठी विविध तंत्रांचा शोध घेऊ. तुम्ही एपीआय प्रतिसाद डीबग करणारे विकसक असलात किंवा फक्त अधिक स्पष्टपणे डेटा सादर करणे आवश्यक असले तरीही, या पद्धती तुम्हाला मानव-अनुकूल JSON डिस्प्ले प्राप्त करण्यात मदत करतील.

आज्ञा वर्णन
JSON.stringify(json, undefined, 4) वाचनीयतेसाठी 4-स्पेस इंडेंटेशनसह JavaScript ऑब्जेक्टला JSON स्ट्रिंगमध्ये रूपांतरित करते.
json.replace(/&/g, '<').replace(//g, '>') HTML इंजेक्शन टाळण्यासाठी JSON स्ट्रिंगमधील विशेष वर्ण पुनर्स्थित करते.
return '<span class="' + cls + '">' + match + '</span>' वाक्यरचना हायलाइटिंगसाठी विशिष्ट वर्गांसह स्पॅन टॅगमध्ये जुळणारे JSON घटक गुंडाळतात.
document.body.innerHTML = '<pre>' + syntaxHighlight(json) + '</pre>' सुंदर-मुद्रित JSON प्रदर्शित करण्यासाठी दस्तऐवजाच्या मुख्य भागाचा अंतर्गत HTML सेट करते.
const http = require('http') वेब सर्व्हर तयार करण्यासाठी Node.js स्क्रिप्टमध्ये HTTP मॉड्यूल समाविष्ट करते.
http.createServer((req, res) =>http.createServer((req, res) => { ... }).listen(3000) येणाऱ्या विनंत्यांसाठी पोर्ट 3000 वर ऐकणारा HTTP सर्व्हर तयार करतो.
res.writeHead(200, {'Content-Type': 'application/json'}) सामग्री प्रकार JSON आहे हे सूचित करण्यासाठी प्रतिसाद HTTP शीर्षलेख सेट करते.
res.end(JSON.stringify(jsonData, null, 4)) क्लायंटला प्रतिसाद म्हणून सुंदर-मुद्रित JSON डेटा पाठवते.

प्रीटी-प्रिंट JSON स्क्रिप्ट्स कसे कार्य करतात

पहिल्या स्क्रिप्टमध्ये, आम्ही JSON फॉरमॅट करण्यासाठी आणि अधिक वाचनीय पद्धतीने प्रदर्शित करण्यासाठी JavaScript वापरतो. कार्य syntaxHighlight JSON ऑब्जेक्ट इनपुट म्हणून घेते आणि त्यास स्ट्रिंगमध्ये रूपांतरित करते १, 4-स्पेस इंडेंटेशन लागू करणे. फंक्शन नंतर एचटीएमएल इंजेक्शन वापरण्यास प्रतिबंध करण्यासाठी विशेष वर्ण बदलते json.replace. हे स्ट्रिंग, संख्या, बुलियन आणि शून्य मूल्ये यांसारख्या विविध JSON घटकांशी जुळण्यासाठी नियमित अभिव्यक्ती देखील वापरते, प्रत्येक जुळलेल्या घटकामध्ये गुंडाळते <span> वाक्यरचना हायलाइटिंगसाठी योग्य वर्गांसह टॅग. शेवटी, आम्ही वापरतो document.body.innerHTML वेब पृष्ठावर स्वरूपित JSON घालण्यासाठी.

दुसरी स्क्रिप्ट Node.js वापरून सर्व्हर-साइड JSON फॉरमॅटिंग दाखवते. येथे, आम्ही आवश्यक करून प्रारंभ करतो ५ HTTP सर्व्हर तयार करण्यासाठी मॉड्यूल. आम्ही नमुना JSON ऑब्जेक्ट परिभाषित करतो आणि पोर्ट 3000 वर ऐकण्यासाठी सर्व्हर सेट करतो. जेव्हा एखादी विनंती प्राप्त होते, तेव्हा सर्व्हर JSON स्ट्रिंगसह प्रतिसाद देतो. आम्ही वापरतो res.writeHead प्रतिसाद शीर्षलेख सेट करण्यासाठी, सामग्री प्रकार JSON असल्याचे दर्शविते. JSON ऑब्जेक्ट नंतर वापरून सुंदर-मुद्रित स्ट्रिंगमध्ये रूपांतरित केले जाते १ 4-स्पेस इंडेंटेशनसह आणि वापरून क्लायंटला परत पाठवले res.end. हा दृष्टीकोन हे सुनिश्चित करतो की JSON डेटा सहजपणे वाचनीय आहे, वेब पृष्ठावर प्रदर्शित केला गेला किंवा सर्व्हरवरून प्राप्त झाला.

JavaScript मध्ये सुधारित वाचनीयतेसाठी JSON फॉरमॅट करणे

इंडेंटेशन आणि सिंटॅक्स हायलाइटिंगसह JSON प्रीटी-प्रिंट करण्यासाठी JavaScript फ्रंट-एंड स्क्रिप्ट

// 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 बॅक-एंड स्क्रिप्ट

१

JavaScript मध्ये प्रीटी-प्रिंटिंग JSON साठी प्रगत तंत्रे

मूलभूत इंडेंटेशन आणि सिंटॅक्स हायलाइटिंग JSON डेटा अधिक वाचनीय बनवण्यासाठी आवश्यक असताना, प्रगत तंत्रे सादरीकरण आणखी वाढवू शकतात. असेच एक तंत्र Hylight.js किंवा Prism.js सारख्या तृतीय-पक्ष लायब्ररी वापरत आहे. ही लायब्ररी विस्तृत वाक्यरचना हायलाइटिंग क्षमता प्रदान करतात, ज्यामुळे विकासकांना वेगवेगळ्या कोड फॉरमॅटमध्ये सातत्यपूर्ण आणि आकर्षक शैली लागू करता येतात. या लायब्ररींना एकत्रित करून, तुम्ही केवळ JSON फॉरमॅट करू शकत नाही तर रंग आणि शैली तुमच्या एकूण डिझाइन भाषेशी सुसंगत असल्याची देखील खात्री करू शकता. याव्यतिरिक्त, ही लायब्ररी आपल्या अनुप्रयोग किंवा वेबसाइटच्या विशिष्ट सौंदर्यविषयक गरजांशी जुळण्यासाठी सानुकूलित पर्याय ऑफर करतात.

आणखी एक प्रगत पद्धतीमध्ये परस्पर JSON दर्शक तयार करणे समाविष्ट आहे. हे दर्शक वापरकर्त्यांना JSON डेटाचे विभाग संकुचित आणि विस्तृत करण्याची परवानगी देतात, ज्यामुळे मोठ्या डेटासेटमधून नेव्हिगेट करणे सोपे होते. JSONEditor आणि Ace Editor सारख्या लायब्ररी या उद्देशासाठी उत्कृष्ट आहेत. ते ट्री व्ह्यू, कोड व्ह्यू आणि JSON स्कीमा प्रमाणीकरणास समर्थन देणारे मजकूर संपादक यांसारखी वैशिष्ट्ये प्रदान करतात. इंटरएक्टिव्ह व्ह्यूअर लागू करून, तुम्ही वापरकर्ता अनुभव लक्षणीयरीत्या सुधारू शकता, विशेषत: जटिल किंवा नेस्टेड JSON संरचना हाताळताना.

Pretty-printing JSON बद्दल वारंवार विचारले जाणारे प्रश्न

  1. JSON मध्ये प्रीटी-प्रिंटिंग म्हणजे काय?
  2. JSON मधील प्रीटी-प्रिंटिंग म्हणजे JSON डेटा इंडेंटेशन आणि व्हाईटस्पेससह फॉरमॅट करणे म्हणजे ते मानवांसाठी अधिक वाचनीय बनवणे.
  3. JSON प्रीटी-प्रिंटिंग का महत्त्वाचे आहे?
  4. प्रीटी-प्रिंटिंग JSON महत्वाचे आहे कारण ते वाचनीयता वाढवते आणि डेव्हलपरना डीबग करण्यास आणि डेटा संरचना अधिक कार्यक्षमतेने समजण्यास मदत करते.
  5. मी JavaScript मध्ये JSON प्रीटी-प्रिंट कसे करू शकतो?
  6. आपण वापरू शकता १ JavaScript मध्ये JSON डेटा फॉरमॅट करण्यासाठी इंडेंटेशन पॅरामीटरसह पद्धत.
  7. प्रगत JSON स्वरूपनासाठी काही लायब्ररी काय आहेत?
  8. Highlight.js, Prism.js, JSONEditor आणि Ace Editor प्रगत JSON स्वरूपन आणि पाहण्यासाठी लोकप्रिय लायब्ररी आहेत.
  9. मी सुंदर-मुद्रित JSON वर सानुकूल शैली लागू करू शकतो?
  10. होय, Highlight.js किंवा कस्टम CSS सारख्या लायब्ररींचा वापर करून, तुम्ही JSON डेटाच्या वेगवेगळ्या भागांवर विशिष्ट रंग आणि शैली लागू करू शकता.
  11. परस्पर JSON दर्शक तयार करणे शक्य आहे का?
  12. होय, JSONEditor आणि Ace Editor सारख्या लायब्ररींचा वापर करून परस्पर JSON दर्शक तयार केले जाऊ शकतात, जे वापरकर्त्यांना JSON डेटाचे विभाग संकुचित आणि विस्तृत करण्यास अनुमती देतात.
  13. चा उद्देश काय आहे json.replace स्क्रिप्ट मध्ये पद्धत?
  14. द json.replace एचटीएमएल इंजेक्शन रोखण्यासाठी JSON स्ट्रिंगमधील विशेष वर्ण सुटण्यासाठी पद्धत वापरली जाते.
  15. तुम्ही मोठे JSON डेटासेट कसे हाताळता?
  16. मोठ्या JSON डेटासेटसाठी, परस्परसंवादी दर्शक आणि वृक्ष रचना वापरकर्त्यांना अधिक प्रभावीपणे डेटा नेव्हिगेट करण्यात आणि समजून घेण्यात मदत करू शकतात.
  17. मी JSON प्रीटींगसाठी सर्व्हर-साइड स्क्रिप्टिंग वापरू शकतो का?
  18. होय, Node.js सारख्या सर्व्हर-साइड स्क्रिप्टिंग भाषांचा वापर सुंदर-मुद्रित JSON डेटा फॉरमॅट करण्यासाठी आणि सर्व्ह करण्यासाठी केला जाऊ शकतो.

JSON स्वरूपन तंत्रावरील अंतिम विचार

प्रीटी-प्रिंटिंग JSON डेटाची वाचनीयता आणि उपयोगिता वाढवण्यासाठी, विशेषतः डीबगिंग आणि विकासादरम्यान महत्त्वपूर्ण आहे. JavaScript आणि विविध लायब्ररी वापरून, तुम्ही JSON ला योग्य इंडेंटेशन, व्हाईटस्पेस आणि अगदी रंगांसह सहजपणे फॉरमॅट करू शकता. परस्परसंवादी दर्शकांसारख्या प्रगत तंत्रांची अंमलबजावणी केल्याने वापरकर्त्याचा अनुभव आणखी सुधारतो, ज्यामुळे जटिल JSON संरचना नेव्हिगेट करणे आणि समजणे सोपे होते. शेवटी, या पद्धती आणि साधने JSON डेटासह काम करणाऱ्या विकासकांसाठी अमूल्य आहेत.