JavaScript નો ઉપયોગ કરીને વાંચી શકાય તેવા ફોર્મેટમાં JSON કેવી રીતે પ્રદર્શિત કરવું

JavaScript નો ઉપયોગ કરીને વાંચી શકાય તેવા ફોર્મેટમાં JSON કેવી રીતે પ્રદર્શિત કરવું
Mia Chevalier
મંગળવાર, 2 જુલાઈ, 2024 એ 07:46:28 PM વાગ્યે
JavaScript

JavaScript વડે JSON વાંચનક્ષમતા વધારવી

JSON (જાવાસ્ક્રિપ્ટ ઑબ્જેક્ટ નોટેશન) એ એક લોકપ્રિય ડેટા ફોર્મેટ છે જેનો ઉપયોગ સર્વર અને વેબ એપ્લિકેશન વચ્ચે માહિતી ટ્રાન્સમિટ કરવા માટે થાય છે. જ્યારે તે મશીનો માટે પાર્સ કરવા માટે કાર્યક્ષમ છે, જ્યારે યોગ્ય ફોર્મેટિંગનો અભાવ હોય ત્યારે JSON માનવો માટે વાંચવા માટે પડકારરૂપ બની શકે છે. ઇન્ડેન્ટેશન, વ્હાઇટસ્પેસ અને રંગો અને ફોન્ટ્સ જેવા શૈલીયુક્ત તત્વો પણ વાંચનક્ષમતામાં નોંધપાત્ર તફાવત લાવી શકે છે.

આ લેખમાં, અમે JavaScript નો ઉપયોગ કરીને JSON ને પ્રીટી-પ્રિન્ટ કરવા માટેની વિવિધ તકનીકોનું અન્વેષણ કરીશું. ભલે તમે API પ્રતિસાદને ડીબગ કરી રહેલા વિકાસકર્તા હોવ અથવા ફક્ત વધુ સ્પષ્ટ રીતે ડેટા રજૂ કરવાની જરૂર હોય, આ પદ્ધતિઓ તમને માનવ-મૈત્રીપૂર્ણ 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) એક HTTP સર્વર બનાવે છે જે આવનારી વિનંતીઓ માટે પોર્ટ 3000 પર સાંભળે છે.
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 ફોર્મેટિંગ

Node.js બેક-એન્ડ સ્ક્રિપ્ટ ઇન્ડેન્ટેશન સાથે JSON ને પ્રીટી પ્રિન્ટ કરવા માટે

// 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 સ્ટ્રક્ચર્સ સાથે કામ કરતી વખતે.

Pretty-Printing JSON વિશે વારંવાર પૂછાતા પ્રશ્નો

  1. JSON માં સુંદર પ્રિન્ટિંગ શું છે?
  2. JSON માં પ્રીટી-પ્રિંટિંગ એ JSON ડેટાને ઇન્ડેન્ટેશન અને વ્હાઇટસ્પેસ સાથે ફોર્મેટ કરવાનો સંદર્ભ આપે છે જેથી તે મનુષ્યો માટે વધુ વાંચી શકાય.
  3. શા માટે સુંદર પ્રિન્ટીંગ JSON મહત્વનું છે?
  4. પ્રીટી-પ્રિન્ટિંગ JSON મહત્વપૂર્ણ છે કારણ કે તે વાંચનક્ષમતા વધારે છે અને વિકાસકર્તાઓને ડેટા સ્ટ્રક્ચરને વધુ અસરકારક રીતે ડીબગ કરવામાં અને સમજવામાં મદદ કરે છે.
  5. હું JavaScript માં 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. હા, ઇન્ટરેક્ટિવ JSON દર્શકો JSONEditor અને Ace Editor જેવી લાઇબ્રેરીઓનો ઉપયોગ કરીને બનાવી શકાય છે, જે વપરાશકર્તાઓને 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 ડેટા સાથે કામ કરતા વિકાસકર્તાઓ માટે આ પદ્ધતિઓ અને સાધનો અમૂલ્ય છે.