JSON को खूबसूरती से प्रिंट करें JavaScript में: पूरी गाइड

परिचय: JSON को पढ़ना मुश्किल क्यों लगता है और इसे कैसे ठीक करें?

क्या आपने कभी ब्राउज़र कंसोल खोला, उसमें एक लंबी-चौड़ी लाइन बिना किसी स्पेस के देखी और सोचा, "यहाँ एरर कहाँ है?" यह एक क्लासिक समस्या है। JSON डेटा एक्सचेंज की सार्वभौमिक भाषा है, लेकिन कच्चे रूप में इसे पढ़ना माइक्रोवेव के जापानी मैनुअल को पढ़ने जैसा लगता है। खासकर जब डेटा बहुत हो: नेस्टेड ऑब्जेक्ट, ऐरे, लंबी स्ट्रिंग्स।

शुक्र है, JavaScript में ऐसे बिल्ट-इन टूल्स हैं जो इस "गड़बड़" को साफ-सुथरी, संरचित सुंदरता में बदल देते हैं। इस प्रक्रिया को pretty-print JSON (या "खूबसूरत आउटपुट") कहते हैं। इस लेख में हम सभी तरीकों को समझेंगे: बेसिक JSON.stringify से लेकर एडवांस कस्टम सॉल्यूशंस तक। आप न सिर्फ JSON पढ़ना सीखेंगे, बल्कि इसे आराम से करना भी सीखेंगे।

यह लेख pythonlib.ru के लिए लिखा गया है - एक शैक्षिक संसाधन जहाँ हम सरल व्याख्या और व्यावहारिक उदाहरण पसंद करते हैं। चलिए शुरू करते हैं!

Pretty-print JSON क्या है और इसकी आवश्यकता क्यों है?

Pretty-print (या prettify) संरचित डेटा (JSON, XML, YAML) को इंडेंटेशन, लाइन ब्रेक और अलाइनमेंट के साथ फॉर्मेट करने की प्रक्रिया है। देखने में यह एक अच्छी तरह से लिखे गए कोड जैसा लगता है, न कि एक लंबी लाइन की तरह।

इसकी आवश्यकता क्यों है?

\n
• डीबगिंग (debugging). आप ऑब्जेक्ट की संरचना देख सकते हैं: कहाँ कीज़ हैं, कहाँ नेस्टेड ऑब्जेक्ट हैं, कहाँ ऐरे हैं।
\n
• लॉग पढ़ना. ब्राउज़र कंसोल या सर्वर लॉग में फॉर्मेटेड JSON आँखों को आराम देता है।
\n
• डॉक्यूमेंटेशन. डॉक्यूमेंटेशन में JSON के उदाहरण हमेशा pretty-print होते हैं।
\n
• सीखना. शुरुआती लोगों के लिए डेटा संरचना को समझना आसान होता है जब वह लेवल में बंटी हो।
\n

JavaScript में खूबसूरत JSON पाने के दो मुख्य तरीके हैं: बिल्ट-इन JSON.stringify और थर्ड-पार्टी लाइब्रेरीज़ (जैसे pretty-js). लेकिन हम बेसिक से शुरू करेंगे।

तरीका 1: JSON.stringify() पैरामीटर्स के साथ (सबसे लोकप्रिय)

आप शायद JSON.stringify() मेथड को जानते हैं। यह ऑब्जेक्ट को JSON स्ट्रिंग में बदलता है। लेकिन इसके दूसरे और तीसरे पैरामीटर भी हैं जो कमाल करते हैं।

सिंटैक्स

JSON.stringify(value, replacer, space)

\n
• value — आपका ऑब्जेक्ट या ऐरे।
\n
• replacer — कीज़ को फ़िल्टर करने के लिए फंक्शन या ऐरे (अक्सर null).
\n
• space — इंडेंट के लिए स्पेस की संख्या (या स्ट्रिंग, जैसे "\\t" टैब के लिए).
\n

उदाहरण 1: स्पेस के साथ बेसिक pretty-print

const user = {\n  name: "राहुल",\n  age: 30,\n  skills: ["JavaScript", "Python", "SQL"],\n  address: {\n    city: "दिल्ली",\n    zip: 110001\n  }\n};\n\n// बिना फॉर्मेटिंग के - एक लाइन\nconsole.log(JSON.stringify(user));\n// {"name":"राहुल","age":30,"skills":["JavaScript","Python","SQL"],"address":{"city":"दिल्ली","zip":110001}}\n\n// फॉर्मेटिंग के साथ - सुंदरता!\nconsole.log(JSON.stringify(user, null, 2));\n

कंसोल में परिणाम:

{\n  "name": "राहुल",\n  "age": 30,\n  "skills": [\n    "JavaScript",\n    "Python",\n    "SQL"\n  ],\n  "address": {\n    "city": "दिल्ली",\n    "zip": 110001\n  }\n}\n

ध्यान दें: 2 स्पेस के इंडेंट ने संरचना को पढ़ने योग्य बना दिया। आप 4 स्पेस या टैब ("\\t") का भी उपयोग कर सकते हैं।

उदाहरण 2: फ़िल्टरिंग के लिए replacer का उपयोग

कभी-कभी केवल कुछ डेटा दिखाना होता है। दूसरा पैरामीटर replacer कीज़ का ऐरे हो सकता है।

const filtered = JSON.stringify(user, ["name", "skills"], 2);\nconsole.log(filtered);\n// {\n//   "name": "राहुल",\n//   "skills": [\n//     "JavaScript",\n//     "Python",\n//     "SQL"\n//   ]\n// }\n

या फंक्शन के रूप में:

const replacerFunc = (key, value) => {\n  if (key === "age") return undefined; // age को हटाएं\n  return value;\n};\n\nconsole.log(JSON.stringify(user, replacerFunc, 2));\n// {\n//   "name": "राहुल",\n//   "skills": [\n//     "JavaScript",\n//     "Python",\n//     "SQL"\n//   ],\n//   "address": {\n//     "city": "दिल्ली",\n//     "zip": 110001\n//   }\n// }\n

तरीका 2: कस्टम फॉर्मेटिंग फंक्शन (एडवांस)

कभी-कभी JSON.stringify पर्याप्त नहीं होता। हो सकता है आप चाहते हैं कि JSON में कलर हो, या केवल कुछ लेवल दिखें। ऐसे में आप अपना फंक्शन लिख सकते हैं।

उदाहरण: केवल पहले दो लेवल दिखाएं

function prettyPrintLimited(obj, maxDepth = 2, indent = 0) {\n  const spaces = " ".repeat(indent * 2);\n  \n  if (typeof obj !== "object" || obj === null) {\n    return JSON.stringify(obj);\n  }\n  \n  if (indent >= maxDepth) {\n    return Array.isArray(obj) ? `[${obj.length} items]` : `{Object}`;\n  }\n  \n  const entries = Object.entries(obj).map(([key, value]) => {\n    const formattedValue = prettyPrintLimited(value, maxDepth, indent + 1);\n    return `${spaces}  "${key}": ${formattedValue}`;\n  });\n  \n  const bracket = Array.isArray(obj) ? ["[", "]"] : ["{", "}"];\n  return `${bracket[0]}\\n${entries.join(",\\n")}\\n${spaces}${bracket[1]}`;\n}\n\nconsole.log(prettyPrintLimited(user, 1));\n// {\n//   "name": "राहुल",\n//   "age": 30,\n//   "skills": [3 items],\n//   "address": {Object}\n// }\n

यह तब उपयोगी है जब आप बहुत बड़े JSON को सारांशित करना चाहते हैं।

तरीका 3: ब्राउज़र कंसोल में नेटिव JSON व्यूअर

क्या आप जानते हैं कि आधुनिक ब्राउज़र (Chrome, Firefox, Edge) में बिल्ट-इन JSON व्यूअर है? बस कंसोल में console.log के बजाय console.table का उपयोग करें:

console.table(user);\n

यह ऐरे और सरल ऑब्जेक्ट के लिए बहुत अच्छा है। नेस्टेड ऑब्जेक्ट के लिए, आप console.dir का उपयोग कर सकते हैं:

console.dir(user, { depth: null, colors: true });\n

यह कंसोल में इंटरैक्टिव ट्री दिखाता है - आप नोड्स को खोल और बंद कर सकते हैं।

तरीका 4: थर्ड-पार्टी लाइब्रेरीज़ (जब आपको और चाहिए)

अगर बिल्ट-इन टूल्स काफी नहीं हैं, तो ये लाइब्रेरीज़ आज़माएं:

\n
• pretty-js — JSON को कलर और इंडेंट के साथ फॉर्मेट करता है।
\n
• json-formatter-js — कस्टमाइज़ेबल फॉर्मेटर।
\n
• highlight.js — JSON को सिंटैक्स हाइलाइटिंग के साथ दिखाता है।
\n

उदाहरण (pretty-js के साथ):

// npm install pretty-js\nconst pretty = require("pretty-js");\nconsole.log(pretty(user));\n

निष्कर्ष: JSON को पढ़ना अब आसान है

हमने देखा कि JavaScript में JSON को खूबसूरती से प्रिंट करने के कई तरीके हैं। चाहे आप JSON.stringify का उपयोग करें, कस्टम फंक्शन लिखें, या ब्राउज़र टूल्स का उपयोग करें - अब आपके पास JSON को पढ़ने योग्य बनाने के लिए सभी उपकरण हैं।

मुख्य बातें:

\n
• JSON.stringify(value, null, 2) सबसे तेज़ और आसान तरीका है।
\n
• replacer पैरामीटर से डेटा फ़िल्टर करें।
\n
• बड़े JSON के लिए कस्टम फंक्शन या ब्राउज़र टूल्स का उपयोग करें।
\n
• थर्ड-पार्टी लाइब्रेरीज़ अतिरिक्त सुविधाएँ देती हैं।
\n

अब आप बिना किसी परेशानी के JSON पढ़ और डीबग कर सकते हैं। हैप्पी कोडिंग!