జావాస్క్రిప్ట్‌ని ఉపయోగించి చదవగలిగే ఆకృతిలో JSONని ఎలా ప్రదర్శించాలి

జావాస్క్రిప్ట్‌తో JSON రీడబిలిటీని మెరుగుపరుస్తుంది

JSON (జావాస్క్రిప్ట్ ఆబ్జెక్ట్ నొటేషన్) అనేది సర్వర్ మరియు వెబ్ అప్లికేషన్ మధ్య సమాచారాన్ని ప్రసారం చేయడానికి ఉపయోగించే ఒక ప్రసిద్ధ డేటా ఫార్మాట్. యంత్రాలు అన్వయించడం సమర్థవంతంగా ఉన్నప్పటికీ, సరైన ఫార్మాటింగ్ లేనప్పుడు JSON చదవడం మానవులకు సవాలుగా ఉంటుంది. ఇండెంటేషన్, వైట్‌స్పేస్ మరియు రంగులు మరియు ఫాంట్‌ల వంటి శైలీకృత అంశాలు కూడా చదవగలిగేలా గణనీయమైన వ్యత్యాసాన్ని కలిగిస్తాయి.

ఈ ఆర్టికల్‌లో, జావాస్క్రిప్ట్‌ని ఉపయోగించి JSONని అందంగా-ప్రింట్ చేయడానికి మేము వివిధ పద్ధతులను అన్వేషిస్తాము. మీరు API ప్రతిస్పందనను డీబగ్ చేస్తున్న డెవలపర్ అయినా లేదా డేటాను మరింత స్పష్టంగా ప్రదర్శించాల్సిన అవసరం ఉన్నా, ఈ పద్ధతులు మానవ-స్నేహపూర్వక JSON ప్రదర్శనను సాధించడంలో మీకు సహాయపడతాయి.

ఆదేశం	వివరణ
JSON.stringify(json, undefined, 4)	రీడబిలిటీ కోసం 4-స్పేస్ ఇండెంటేషన్‌తో జావాస్క్రిప్ట్ ఆబ్జెక్ట్‌ను JSON స్ట్రింగ్‌గా మారుస్తుంది.
json.replace(/&/g, '<').replace(/, '<').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ని ఉపయోగిస్తాము. ఫంక్షన్ ఒక JSON ఆబ్జెక్ట్‌ను ఇన్‌పుట్‌గా తీసుకుని దానిని స్ట్రింగ్‌గా మారుస్తుంది , 4-స్పేస్ ఇండెంటేషన్‌ని వర్తింపజేస్తోంది. ఫంక్షన్ HTML ఇంజెక్షన్‌ని ఉపయోగించకుండా నిరోధించడానికి ప్రత్యేక అక్షరాలను భర్తీ చేస్తుంది . ఇది తీగలు, సంఖ్యలు, బూలియన్లు మరియు శూన్య విలువలు వంటి వివిధ JSON మూలకాలను సరిపోల్చడానికి సాధారణ వ్యక్తీకరణను కూడా ఉపయోగిస్తుంది, సరిపోలిన ప్రతి మూలకాన్ని చుట్టి ఉంటుంది <span> సింటాక్స్ హైలైటింగ్ కోసం తగిన తరగతులతో ట్యాగ్‌లు. చివరగా, మేము ఉపయోగిస్తాము వెబ్ పేజీలో ఫార్మాట్ చేయబడిన JSONని చొప్పించడానికి.

రెండవ స్క్రిప్ట్ Node.jsని ఉపయోగించి సర్వర్ వైపు JSON ఫార్మాటింగ్‌ని ప్రదర్శిస్తుంది. ఇక్కడ, మేము కోరడం ద్వారా ప్రారంభిస్తాము HTTP సర్వర్‌ని సృష్టించడానికి మాడ్యూల్. మేము నమూనా JSON వస్తువును నిర్వచించాము మరియు పోర్ట్ 3000లో వినడానికి సర్వర్‌ని సెటప్ చేస్తాము. అభ్యర్థన స్వీకరించబడినప్పుడు, సర్వర్ JSON స్ట్రింగ్‌తో ప్రతిస్పందిస్తుంది. మేము ఉపయోగిస్తాము ప్రతిస్పందన శీర్షికలను సెట్ చేయడానికి, కంటెంట్ రకం JSON అని సూచిస్తుంది. JSON ఆబ్జెక్ట్ ఉపయోగించి అందంగా-ముద్రించిన స్ట్రింగ్‌గా మార్చబడుతుంది 4-స్పేస్ ఇండెంటేషన్‌తో మరియు ఉపయోగించి క్లయింట్‌కు తిరిగి పంపబడుతుంది res.end. వెబ్ పేజీలో ప్రదర్శించబడినా లేదా సర్వర్ నుండి స్వీకరించబడినా 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>';

// 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 నిర్మాణాలతో వ్యవహరించేటప్పుడు.

1. JSONలో ప్రెట్టీ-ప్రింటింగ్ అంటే ఏమిటి?
2. JSONలో ప్రెట్టీ-ప్రింటింగ్ అనేది JSON డేటాను ఇండెంటేషన్ మరియు వైట్‌స్పేస్‌తో మానవులకు మరింత చదవగలిగేలా ఫార్మాటింగ్ చేయడాన్ని సూచిస్తుంది.
3. ఎందుకు అందంగా ప్రింటింగ్ JSON ముఖ్యం?
4. ప్రెట్టీ-ప్రింటింగ్ JSON ముఖ్యం ఎందుకంటే ఇది రీడబిలిటీని పెంచుతుంది మరియు డెవలపర్‌లు డీబగ్ చేయడానికి మరియు డేటా స్ట్రక్చర్‌ను మరింత సమర్థవంతంగా అర్థం చేసుకోవడానికి సహాయపడుతుంది.
5. నేను జావాస్క్రిప్ట్‌లో JSONని ఎలా ప్రింట్ చేయగలను?
6. మీరు ఉపయోగించవచ్చు జావాస్క్రిప్ట్‌లో 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. యొక్క ప్రయోజనం ఏమిటి స్క్రిప్ట్‌లోని పద్ధతి?
14. ది HTML ఇంజెక్షన్‌ను నిరోధించడానికి JSON స్ట్రింగ్‌లోని ప్రత్యేక అక్షరాలను తప్పించుకోవడానికి ఈ పద్ధతి ఉపయోగించబడుతుంది.
15. మీరు పెద్ద JSON డేటాసెట్‌లను ఎలా నిర్వహిస్తారు?
16. పెద్ద JSON డేటాసెట్‌ల కోసం, ఇంటరాక్టివ్ వీక్షకులు మరియు ట్రీ స్ట్రక్చర్‌లు వినియోగదారులు డేటాను మరింత ప్రభావవంతంగా నావిగేట్ చేయడంలో మరియు అర్థం చేసుకోవడంలో సహాయపడతాయి.
17. నేను JSONను అందంగా ముద్రించడానికి సర్వర్ సైడ్ స్క్రిప్టింగ్‌ని ఉపయోగించవచ్చా?
18. అవును, Node.js వంటి సర్వర్ సైడ్ స్క్రిప్టింగ్ లాంగ్వేజ్‌లను అందంగా-ముద్రించిన JSON డేటాను ఫార్మాట్ చేయడానికి మరియు సర్వ్ చేయడానికి ఉపయోగించవచ్చు.

JSON ఫార్మాటింగ్ టెక్నిక్స్‌పై తుది ఆలోచనలు

ముఖ్యంగా డీబగ్గింగ్ మరియు డెవలప్‌మెంట్ సమయంలో డేటా యొక్క రీడబిలిటీ మరియు వినియోగాన్ని మెరుగుపరచడానికి ప్రెట్టీ-ప్రింటింగ్ JSON కీలకం. జావాస్క్రిప్ట్ మరియు వివిధ లైబ్రరీలను ఉపయోగించడం ద్వారా, మీరు సరైన ఇండెంటేషన్, వైట్‌స్పేస్ మరియు రంగులతో సులభంగా JSONని ఫార్మాట్ చేయవచ్చు. ఇంటరాక్టివ్ వీక్షకుల వంటి అధునాతన సాంకేతికతలను అమలు చేయడం వినియోగదారు అనుభవాన్ని మరింత మెరుగుపరుస్తుంది, సంక్లిష్టమైన JSON నిర్మాణాలను నావిగేట్ చేయడం మరియు అర్థం చేసుకోవడం సులభం చేస్తుంది. అంతిమంగా, JSON డేటాతో పనిచేసే డెవలపర్‌లకు ఈ పద్ధతులు మరియు సాధనాలు అమూల్యమైనవి.