JavaScript ഉപയോഗിച്ച് വായിക്കാനാകുന്ന ഫോർമാറ്റിൽ JSON എങ്ങനെ പ്രദർശിപ്പിക്കാം

JavaScript ഉപയോഗിച്ച് വായിക്കാനാകുന്ന ഫോർമാറ്റിൽ JSON എങ്ങനെ പ്രദർശിപ്പിക്കാം
Mia Chevalier
2024, ജൂലൈ 2, ചൊവ്വാഴ്ച 8:07:23 PM
JavaScript

JavaScript ഉപയോഗിച്ച് JSON വായനാക്ഷമത വർദ്ധിപ്പിക്കുന്നു

ഒരു സെർവറിനും വെബ് ആപ്ലിക്കേഷനും ഇടയിൽ വിവരങ്ങൾ കൈമാറാൻ ഉപയോഗിക്കുന്ന ഒരു ജനപ്രിയ ഡാറ്റ ഫോർമാറ്റാണ് JSON (ജാവാസ്ക്രിപ്റ്റ് ഒബ്ജക്റ്റ് നോട്ടേഷൻ). മെഷീനുകൾക്ക് പാഴ്‌സ് ചെയ്യുന്നത് കാര്യക്ഷമമാണെങ്കിലും, ശരിയായ ഫോർമാറ്റിംഗ് ഇല്ലാത്തപ്പോൾ വായിക്കുന്നത് JSON-ന് മനുഷ്യർക്ക് വെല്ലുവിളിയാകും. ഇൻഡൻ്റേഷൻ, വൈറ്റ്‌സ്‌പെയ്‌സ്, കൂടാതെ നിറങ്ങളും ഫോണ്ടുകളും പോലുള്ള സ്റ്റൈലിസ്റ്റിക് ഘടകങ്ങൾ പോലും വായനാക്ഷമതയിൽ കാര്യമായ വ്യത്യാസം വരുത്തും.

ഈ ലേഖനത്തിൽ, JavaScript ഉപയോഗിച്ച് JSON പ്രെറ്റി-പ്രിൻ്റ് ചെയ്യുന്നതിനുള്ള വിവിധ സാങ്കേതിക വിദ്യകൾ ഞങ്ങൾ പര്യവേക്ഷണം ചെയ്യും. നിങ്ങൾ ഒരു API പ്രതികരണം ഡീബഗ്ഗ് ചെയ്യുന്ന ഒരു ഡെവലപ്പർ ആണെങ്കിലും അല്ലെങ്കിൽ കൂടുതൽ വ്യക്തമായി ഡാറ്റ അവതരിപ്പിക്കേണ്ടതുണ്ടെങ്കിൽ, ഈ രീതികൾ മനുഷ്യസൗഹൃദ JSON ഡിസ്പ്ലേ നേടാൻ നിങ്ങളെ സഹായിക്കും.

കമാൻഡ് വിവരണം
JSON.stringify(json, undefined, 4) ഒരു JavaScript ഒബ്‌ജക്‌റ്റിനെ വായനാക്ഷമതയ്‌ക്കായി 4-സ്‌പേസ് ഇൻഡൻ്റേഷൻ ഉള്ള 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 ഒബ്‌ജക്റ്റ് ഇൻപുട്ടായി എടുത്ത് അതിനെ ഒരു സ്‌ട്രിംഗിലേക്ക് പരിവർത്തനം ചെയ്യുന്നു 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 പ്രെറ്റി-പ്രിൻ്റ് ചെയ്യാൻ 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 ബാക്ക്-എൻഡ് സ്ക്രിപ്റ്റ്

// 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/');
});

JavaScript-ൽ പ്രെറ്റി-പ്രിൻറിംഗ് 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 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 HTML കുത്തിവയ്പ്പ് തടയുന്നതിന് JSON സ്ട്രിംഗിലെ പ്രത്യേക പ്രതീകങ്ങളിൽ നിന്ന് രക്ഷപ്പെടാൻ രീതി ഉപയോഗിക്കുന്നു.
  15. നിങ്ങൾ എങ്ങനെയാണ് വലിയ JSON ഡാറ്റാസെറ്റുകൾ കൈകാര്യം ചെയ്യുന്നത്?
  16. വലിയ JSON ഡാറ്റാസെറ്റുകൾക്ക്, സംവേദനാത്മക കാഴ്ചക്കാർക്കും ട്രീ ഘടനകൾക്കും ഡാറ്റ നാവിഗേറ്റ് ചെയ്യാനും കൂടുതൽ ഫലപ്രദമായി മനസ്സിലാക്കാനും ഉപയോക്താക്കളെ സഹായിക്കും.
  17. JSON പ്രെറ്റി പ്രിൻ്റിംഗിനായി എനിക്ക് സെർവർ സൈഡ് സ്ക്രിപ്റ്റിംഗ് ഉപയോഗിക്കാമോ?
  18. അതെ, പ്രെറ്റി പ്രിൻ്റ് ചെയ്ത JSON ഡാറ്റ ഫോർമാറ്റ് ചെയ്യാനും സെർവ് ചെയ്യാനും Node.js പോലുള്ള സെർവർ സൈഡ് സ്ക്രിപ്റ്റിംഗ് ഭാഷകൾ ഉപയോഗിക്കാം.

JSON ഫോർമാറ്റിംഗ് ടെക്നിക്കുകളെക്കുറിച്ചുള്ള അന്തിമ ചിന്തകൾ

പ്രെറ്റി-പ്രിൻ്റിംഗ് JSON ഡാറ്റയുടെ വായനാക്ഷമതയും ഉപയോഗക്ഷമതയും വർദ്ധിപ്പിക്കുന്നതിന് നിർണായകമാണ്, പ്രത്യേകിച്ച് ഡീബഗ്ഗിംഗിലും വികസനത്തിലും. JavaScript ഉം വിവിധ ലൈബ്രറികളും ഉപയോഗിക്കുന്നതിലൂടെ, ശരിയായ ഇൻഡൻ്റേഷൻ, വൈറ്റ്‌സ്‌പെയ്‌സ്, കൂടാതെ നിറങ്ങൾ എന്നിവ ഉപയോഗിച്ച് നിങ്ങൾക്ക് JSON എളുപ്പത്തിൽ ഫോർമാറ്റ് ചെയ്യാൻ കഴിയും. ഇൻ്ററാക്ടീവ് വ്യൂവേഴ്‌സ് പോലുള്ള വിപുലമായ സാങ്കേതിക വിദ്യകൾ നടപ്പിലാക്കുന്നത് ഉപയോക്തൃ അനുഭവം കൂടുതൽ മെച്ചപ്പെടുത്തുന്നു, സങ്കീർണ്ണമായ JSON ഘടനകൾ നാവിഗേറ്റ് ചെയ്യുന്നതും മനസ്സിലാക്കുന്നതും എളുപ്പമാക്കുന്നു. ആത്യന്തികമായി, JSON ഡാറ്റയിൽ പ്രവർത്തിക്കുന്ന ഡവലപ്പർമാർക്ക് ഈ രീതികളും ഉപകരണങ്ങളും വിലമതിക്കാനാവാത്തതാണ്.