ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி படிக்கக்கூடிய வடிவத்தில் JSON ஐ எவ்வாறு காண்பிப்பது

ஜாவாஸ்கிரிப்ட் மூலம் JSON படிக்கக்கூடிய தன்மையை மேம்படுத்துகிறது

JSON (ஜாவாஸ்கிரிப்ட் ஆப்ஜெக்ட் நோட்டேஷன்) என்பது சர்வர் மற்றும் வெப் அப்ளிகேஷன் இடையே தகவல்களை அனுப்புவதற்குப் பயன்படுத்தப்படும் பிரபலமான தரவு வடிவமாகும். இயந்திரங்கள் அலசுவதற்கு இது திறமையானதாக இருந்தாலும், சரியான வடிவமைத்தல் இல்லாதபோது, ​​மனிதர்கள் படிக்க JSON சவாலாக இருக்கும். உள்தள்ளல், இடைவெளி மற்றும் வண்ணங்கள் மற்றும் எழுத்துருக்கள் போன்ற ஸ்டைலிஸ்டிக் கூறுகள் கூட வாசிப்புத்திறனில் குறிப்பிடத்தக்க மாற்றத்தை ஏற்படுத்தும்.

இந்தக் கட்டுரையில், JavaScript ஐப் பயன்படுத்தி JSON ஐ அழகாக அச்சிடுவதற்கான பல்வேறு நுட்பங்களை ஆராய்வோம். நீங்கள் API பதிலை பிழைத்திருத்தம் செய்யும் டெவலப்பராக இருந்தாலும் அல்லது தரவை இன்னும் தெளிவாக வழங்க வேண்டியிருந்தாலும், இந்த முறைகள் மனிதனுக்கு ஏற்ற 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 தரவு இணையப் பக்கத்தில் காட்டப்பட்டாலும் அல்லது சேவையகத்திலிருந்து பெறப்பட்டாலும் எளிதாகப் படிக்கக்கூடியதாக இருப்பதை உறுதி செய்கிறது.

JavaScript இல் மேம்படுத்தப்பட்ட வாசிப்புத்திறனுக்காக 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 தரவை மேலும் படிக்கக்கூடியதாக மாற்ற அடிப்படை உள்தள்ளல் மற்றும் தொடரியல் சிறப்பம்சங்கள் அவசியம் என்றாலும், மேம்பட்ட நுட்பங்கள் விளக்கக்காட்சியை மேலும் மேம்படுத்தலாம். Highlight.js அல்லது Prism.js போன்ற மூன்றாம் தரப்பு நூலகங்களைப் பயன்படுத்துவது அத்தகைய ஒரு நுட்பமாகும். இந்த நூலகங்கள் விரிவான தொடரியல் சிறப்பம்சப்படுத்தும் திறன்களை வழங்குகின்றன, டெவலப்பர்கள் வெவ்வேறு குறியீடு வடிவங்களில் நிலையான மற்றும் கவர்ச்சிகரமான பாணிகளைப் பயன்படுத்த அனுமதிக்கிறது. இந்த நூலகங்களை ஒருங்கிணைப்பதன் மூலம், நீங்கள் JSON ஐ வடிவமைப்பது மட்டுமல்லாமல், உங்கள் ஒட்டுமொத்த வடிவமைப்பு மொழிக்கு ஏற்ப வண்ணங்களும் பாணிகளும் இருப்பதை உறுதிசெய்யவும் முடியும். கூடுதலாக, இந்த நூலகங்கள் உங்கள் பயன்பாடு அல்லது இணையதளத்தின் குறிப்பிட்ட அழகியல் தேவைகளைப் பொருத்த தனிப்பயனாக்குதல் விருப்பங்களை வழங்குகின்றன.

மற்றொரு மேம்பட்ட முறை ஊடாடும் JSON பார்வையாளர்களை உருவாக்குவதை உள்ளடக்கியது. இந்த பார்வையாளர்கள் பயனர்களை JSON தரவின் பகுதிகளைச் சுருக்கவும் விரிவுபடுத்தவும் அனுமதிக்கிறார்கள், இதனால் பெரிய தரவுத்தொகுப்புகள் வழியாகச் செல்வதை எளிதாக்குகிறது. JSONEditor மற்றும் Ace Editor போன்ற நூலகங்கள் இந்த நோக்கத்திற்காக சிறந்தவை. அவை ட்ரீ வியூ, குறியீடு பார்வை மற்றும் JSON ஸ்கீமா சரிபார்ப்பை ஆதரிக்கும் உரை எடிட்டர்கள் போன்ற அம்சங்களை வழங்குகின்றன. ஊடாடும் பார்வையாளரைச் செயல்படுத்துவதன் மூலம், குறிப்பாக சிக்கலான அல்லது உள்ளமைக்கப்பட்ட JSON கட்டமைப்புகளைக் கையாளும் போது, ​​பயனர் அனுபவத்தை நீங்கள் கணிசமாக மேம்படுத்தலாம்.

பிரட்டி-பிரிண்டிங் JSON பற்றி அடிக்கடி கேட்கப்படும் கேள்விகள்

1. JSON இல் அழகான அச்சிடுதல் என்றால் என்ன?
2. JSON இல் அழகான அச்சிடுதல் என்பது JSON தரவை உள்தள்ளல் மற்றும் இடைவெளியுடன் வடிவமைப்பதைக் குறிக்கிறது.
3. ஏன் அழகான அச்சிடுதல் JSON முக்கியமானது?
4. அழகான அச்சிடுதல் JSON முக்கியமானது, ஏனெனில் இது வாசிப்புத்திறனை மேம்படுத்துகிறது மற்றும் டெவலப்பர்கள் பிழைத்திருத்த மற்றும் தரவு கட்டமைப்பை மிகவும் திறமையாக புரிந்துகொள்ள உதவுகிறது.
5. ஜாவாஸ்கிரிப்ட்டில் JSON ஐ எப்படி அழகாக அச்சிடுவது?
6. நீங்கள் பயன்படுத்தலாம் JSON.stringify ஜாவாஸ்கிரிப்டில் 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 HTML உட்செலுத்தலைத் தடுக்க JSON சரத்தில் உள்ள சிறப்பு எழுத்துக்களைத் தவிர்க்க இந்த முறை பயன்படுத்தப்படுகிறது.
15. பெரிய JSON தரவுத்தொகுப்புகளை எவ்வாறு கையாளுகிறீர்கள்?
16. பெரிய JSON தரவுத்தொகுப்புகளுக்கு, ஊடாடும் பார்வையாளர்கள் மற்றும் மர கட்டமைப்புகள் பயனர்கள் தரவை மிகவும் திறம்பட வழிநடத்தவும் புரிந்துகொள்ளவும் உதவும்.
17. JSON ஐ அழகாக அச்சிடுவதற்கு சர்வர் பக்க ஸ்கிரிப்டிங்கைப் பயன்படுத்தலாமா?
18. ஆம், Node.js போன்ற சர்வர் பக்க ஸ்கிரிப்டிங் மொழிகள் அழகாக அச்சிடப்பட்ட JSON தரவை வடிவமைக்கவும் வழங்கவும் பயன்படுத்தப்படலாம்.

JSON வடிவமைப்பு நுட்பங்கள் பற்றிய இறுதி எண்ணங்கள்

குறிப்பாக பிழைத்திருத்தம் மற்றும் மேம்பாட்டின் போது, ​​தரவின் வாசிப்புத்திறன் மற்றும் பயன்பாட்டினை மேம்படுத்துவதற்கு அழகான அச்சிடுதல் JSON முக்கியமானது. JavaScript மற்றும் பல்வேறு நூலகங்களைப் பயன்படுத்துவதன் மூலம், JSON ஐ சரியான உள்தள்ளல், இடைவெளி மற்றும் வண்ணங்களுடன் எளிதாக வடிவமைக்க முடியும். ஊடாடும் பார்வையாளர்கள் போன்ற மேம்பட்ட நுட்பங்களைச் செயல்படுத்துவது பயனர் அனுபவத்தை மேலும் மேம்படுத்துகிறது, மேலும் சிக்கலான JSON கட்டமைப்புகளை வழிநடத்துவதையும் புரிந்துகொள்வதையும் எளிதாக்குகிறது. இறுதியில், JSON தரவுகளுடன் பணிபுரியும் டெவலப்பர்களுக்கு இந்த முறைகள் மற்றும் கருவிகள் விலைமதிப்பற்றவை.