àª¶à«àª àªà« JSON.stringify àªªàª¦à«àª§àª¤àª¿?

Highlight.js àª¶à«àª àªà«?

JavaScript માં માનવ

Noah Rousseau

ગુરુવાર, 27 જૂન, 2024 એ 08:51:56 PM વાગ્યે

JSON ને મનુષ્યો માટે વધુ વાંચવા યોગ્ય બનાવવું

JSON સાથે કામ કરવું એ વિકાસકર્તાઓ માટે સામાન્ય કાર્ય છે, ખાસ કરીને API અને ડેટા સ્ટોરેજ સાથે કામ કરતી વખતે. જો કે, કાચા JSON તેના ફોર્મેટિંગના અભાવને કારણે વાંચવા અને સમજવામાં મુશ્કેલ હોઈ શકે છે. JSON ને વધુ સુલભ બનાવવા માંગતા લોકો માટે, યોગ્ય ઇન્ડેન્ટેશન અને વ્હાઇટસ્પેસ લાગુ કરવી મહત્વપૂર્ણ છે.

આ લેખમાં, અમે JavaScript નો ઉપયોગ કરીને JSON ને પ્રીટી-પ્રિન્ટ કરવા માટેની વિવિધ પદ્ધતિઓનું અન્વેષણ કરીશું. અમે માત્ર મૂળભૂત ઇન્ડેન્ટેશન અને વ્હાઇટસ્પેસ તકનીકોને જ નહીં પરંતુ રંગો અને ફોન્ટ શૈલીઓ સાથે વાંચવાની ક્ષમતા કેવી રીતે વધારવી તે પણ આવરીશું. આ માર્ગદર્શિકા તમને કાચો JSON ને માનવ-મૈત્રીપૂર્ણ ફોર્મેટમાં રૂપાંતરિત કરવામાં મદદ કરશે.

આદેશ	વર્ણન
JSON.stringify(json, null, 2)	JavaScript ઑબ્જેક્ટને 2-સ્પેસ ઇન્ડેન્ટેશન સાથે JSON સ્ટ્રિંગમાં રૂપાંતરિત કરે છે.
.replace(/(".*?"\|null\|true\|false\|\d+)/g, ...)	કસ્ટમ ફોર્મેટિંગ માટે ચોક્કસ JSON ઘટકોને ઓળખવા માટે નિયમિત અભિવ્યક્તિનો ઉપયોગ કરે છે.
http.createServer(...).listen()	Node.js માં HTTP સર્વર બનાવે છે જે નિર્દિષ્ટ પોર્ટ પર સાંભળે છે.
res.writeHead(200, { 'Content-Type': 'application/json' })	સામગ્રી પ્રકાર JSON છે તે દર્શાવવા માટે HTTP પ્રતિસાદ હેડર સેટ કરે છે.
res.end()	પ્રતિભાવ ક્લાયંટને પાછો મોકલે છે અને સંકેત આપે છે કે બધા પ્રતિસાદ હેડર અને બોડી મોકલવામાં આવી છે.
document.body.innerHTML	દસ્તાવેજમાં મુખ્ય તત્વની HTML સામગ્રી સેટ કરે છે અથવા મેળવે છે.

JSON ફોર્મેટિંગ સ્ક્રિપ્ટ્સનું વિગતવાર સમજૂતી

પ્રથમ સ્ક્રિપ્ટ એ ફ્રન્ટએન્ડ JavaScript સોલ્યુશન છે જે ઇન્ડેન્ટેશન ઉમેરીને અને રંગ કોડિંગ લાગુ કરીને JSON ને પ્રીટી-પ્રિન્ટ કરવા માટે રચાયેલ છે. સ્ક્રિપ્ટ નામના ફંક્શનથી શરૂ થાય છે prettyPrintJSON, જે ઇનપુટ તરીકે JSON ઑબ્જેક્ટ લે છે. આ ફંક્શનની અંદર, JSON ઑબ્જેક્ટનો ઉપયોગ કરીને 2-સ્પેસ ઇન્ડેન્ટેશન સાથે સ્ટ્રિંગમાં રૂપાંતરિત થાય છે JSON.stringify(json, null, 2) પદ્ધતિ આ જરૂરી વ્હાઇટસ્પેસ ઉમેરીને JSON વધુ વાંચવા યોગ્ય છે તેની ખાતરી કરે છે. વધુ વાંચનક્ષમતા વધારવા માટે, સ્ક્રિપ્ટ a નો ઉપયોગ કરે છે .replace(/(".*?"|null|true|false|\d+)/g, ...) શબ્દમાળાઓ, સંખ્યાઓ, બુલિયન્સ અને નલ મૂલ્યો જેવા ચોક્કસ JSON તત્વો સાથે મેળ કરવા માટે નિયમિત અભિવ્યક્તિ સાથેની પદ્ધતિ. દરેક મેળ ખાતું ઘટક a માં આવરિત છે અનુરૂપ વર્ગ સાથે ટેગ કરો, CSS ને દરેક ડેટા પ્રકાર પર વિવિધ રંગો લાગુ કરવાની મંજૂરી આપે છે. ફોર્મેટ કરેલ JSON સ્ટ્રિંગ પછી દસ્તાવેજના મુખ્ય ભાગમાં ઉપયોગ કરીને દાખલ કરવામાં આવે છે document.body.innerHTML.

બીજી સ્ક્રિપ્ટ એ બેકએન્ડ સોલ્યુશન છે જે નોડ.જેએસનો ઉપયોગ કરીને JSON ને પ્રીટી-પ્રિન્ટ કરે છે. આ સ્ક્રિપ્ટ તેની સાથે HTTP સર્વર બનાવે છે http.createServer(...), જે ઉપયોગ કરીને ઉલ્લેખિત પોર્ટ પર આવનારી વિનંતીઓ સાંભળે છે .listen(). વિનંતી પ્રાપ્ત કરવા પર, સર્વર વાંચી શકાય તે માટે ફોર્મેટ કરેલ JSON ઑબ્જેક્ટ સાથે પ્રતિસાદ આપે છે. JSON ઑબ્જેક્ટને ઇન્ડેન્ટેશનનો ઉપયોગ કરીને સ્ટ્રિંગમાં રૂપાંતરિત કરવામાં આવે છે JSON.stringify(json, null, 2). પ્રતિસાદ હેડર એ દર્શાવવા માટે સેટ કરેલ છે કે સામગ્રીનો પ્રકાર JSON સાથે છે res.writeHead(200, { 'Content-Type': 'application/json' }). છેલ્લે, પ્રીટિ-પ્રિન્ટેડ JSON સ્ટ્રિંગનો ઉપયોગ કરીને ક્લાયંટને મોકલવામાં આવે છે res.end(). આ સ્ક્રિપ્ટ વિકાસકર્તાઓને તેમના બ્રાઉઝરમાં ફક્ત સર્વરના સરનામાં પર નેવિગેટ કરીને સરસ રીતે ફોર્મેટ કરેલ JSON આઉટપુટ જોવાની મંજૂરી આપે છે.

વધુ સારી વાંચનક્ષમતા માટે JSON ફોર્મેટ કરવા માટે JavaScript નો ઉપયોગ કરવો

ફ્રન્ટએન્ડ JavaScript

// Function to pretty-print JSON with indentation and colors
function prettyPrintJSON(json) {
  // Convert JSON object to string with 2-space indentation
  const jsonString = JSON.stringify(json, null, 2);
  // Replace specific characters for color coding
  return jsonString.replace(/(".*?"|null|true|false|\d+)/g, match => {
    let cls = "number";
    if (/^".*"$/.test(match)) {
      cls = "string";
    } else if (/true|false/.test(match)) {
      cls = "boolean";
    } else if (/null/.test(match)) {
      cls = "null";
    }
    return `<span class="${cls}">${match}</span>`;
  });
}
// JSON data
const jsonData = {
  "name": "John",
  "age": 30,
  "city": "New York",
  "isStudent": false
};
// Display formatted JSON
document.body.innerHTML = `<pre>${prettyPrintJSON(jsonData)}</pre>`;

પ્રીટી-પ્રિન્ટ JSON માટે બેકએન્ડ અભિગમ

Node.js સાથે બેકએન્ડ

const http = require('http');
const url = require('url');
// Function to pretty-print JSON
function prettyPrintJSON(json) {
  return JSON.stringify(json, null, 2);
}
// Create HTTP server
http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'application/json' });
  // Sample JSON data
  const jsonData = {
    name: "John",
    age: 30,
    city: "New York",
    isStudent: false
  };
  // Send pretty-printed JSON
  res.end(prettyPrintJSON(jsonData));
}).listen(3000, () => {
  console.log('Server running at http://localhost:3000');
});

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

જ્યારે અગાઉના સોલ્યુશન્સ JSON ને પ્રીટી-પ્રિન્ટ કરવા માટે ફ્રન્ટ એન્ડ અને બેકએન્ડ JavaScript પદ્ધતિઓ પર ધ્યાન કેન્દ્રિત કરે છે, ત્યાં અન્ય સાધનો અને તકનીકો છે જે JSON વાંચનક્ષમતાને વધુ વધારી શકે છે. એક લોકપ્રિય અભિગમ બ્રાઉઝર એક્સ્ટેંશન અથવા ઑનલાઇન સાધનોનો ઉપયોગ કરી રહ્યો છે. JSONView અથવા JSON ફોર્મેટર જેવા એક્સ્ટેંશન બ્રાઉઝરમાં JSON ને આપમેળે ફોર્મેટ કરી શકે છે, વાંચનક્ષમતા સુધારવા માટે ઇન્ડેન્ટેશન અને કલર કોડિંગ ઉમેરીને. આ સાધનો ખાસ કરીને એવા વિકાસકર્તાઓ માટે ઉપયોગી છે કે જેઓ વારંવાર API સાથે ક્રિયાપ્રતિક્રિયા કરે છે અને વધારાના કોડ લખ્યા વિના JSON ડેટાને ઝડપથી પાર્સ અને સમજવાની જરૂર છે.

બીજી ઉપયોગી પદ્ધતિમાં હાઇલાઇટ.js અથવા Prism.js જેવી લાઇબ્રેરીઓનો લાભ લેવાનો સમાવેશ થાય છે, જે JSON સહિત વિવિધ પ્રોગ્રામિંગ ભાષાઓ માટે સિન્ટેક્સ હાઇલાઇટિંગને હેન્ડલ કરવા માટે ડિઝાઇન કરવામાં આવી છે. આ લાઇબ્રેરીઓને JSON ડેટાને ગતિશીલ રીતે ફોર્મેટ કરવા અને હાઇલાઇટ કરવા માટે વેબ એપ્લિકેશન્સમાં એકીકૃત કરી શકાય છે. ઉપયોગ કરીને Highlight.js, તમે JSON શબ્દમાળાઓ પર પૂર્વવ્યાખ્યાયિત થીમ લાગુ કરી શકો છો, જે વિવિધ ડેટા પ્રકારો વચ્ચે તફાવત કરવાનું સરળ બનાવે છે. વધુમાં, આવી લાઇબ્રેરીઓને તમારા ડેવલપમેન્ટ વર્કફ્લોમાં એકીકૃત કરવાથી સમય બચી શકે છે અને વિવિધ પ્રોજેક્ટ્સમાં JSON ફોર્મેટિંગમાં સુસંગતતા સુનિશ્ચિત કરી શકાય છે.

JSON ફોર્મેટિંગ વિશે વારંવાર પૂછાતા પ્રશ્નો

સુંદર પ્રિન્ટીંગ JSON શું છે?
પ્રીટી-પ્રિન્ટિંગ JSON એ JSON ડેટાને ઇન્ડેન્ટેશન અને વ્હાઇટસ્પેસ સાથે ફોર્મેટિંગનો સંદર્ભ આપે છે જેથી કરીને તેને મનુષ્યો માટે વધુ વાંચી શકાય.
શા માટે JSON ફોર્મેટિંગ મહત્વપૂર્ણ છે?
યોગ્ય JSON ફોર્મેટિંગ વાંચવાની ક્ષમતામાં સુધારો કરે છે અને વિકાસકર્તાઓને ડેટાની રચના અને સામગ્રીને ઝડપથી સમજવામાં મદદ કરે છે.
શું છે JSON.stringify પદ્ધતિ?
આ JSON.stringify પદ્ધતિ JavaScript ઑબ્જેક્ટને JSON સ્ટ્રિંગમાં રૂપાંતરિત કરે છે.
કેવી રીતે JSON.stringify સુંદર છાપવામાં મદદ કરો છો?
પસાર કરીને JSON.stringify ત્રીજી દલીલ (ઇન્ડેન્ટેશન લેવલ), તમે JSON સ્ટ્રિંગને ઇન્ડેન્ટેશન સાથે ફોર્મેટ કરી શકો છો.
Highlight.js શું છે?
Highlight.js એ સિન્ટેક્સ હાઇલાઇટિંગ માટેની લાઇબ્રેરી છે જેનો ઉપયોગ JSON ડેટાને ફોર્મેટ અને હાઇલાઇટ કરવા માટે કરી શકાય છે.
શું હું JSON ફોર્મેટ કરવા માટે બ્રાઉઝર એક્સટેન્શનનો ઉપયોગ કરી શકું?
હા, JSONView અથવા JSON ફોર્મેટર જેવા એક્સટેન્શન તમારા બ્રાઉઝરમાં JSONને આપમેળે ફોર્મેટ કરી શકે છે.
નો હેતુ શું છે replace JSON ફોર્મેટિંગમાં પદ્ધતિ?
આ replace નિયમિત અભિવ્યક્તિ સાથેની પદ્ધતિનો ઉપયોગ વિવિધ JSON ઘટકોમાં રંગ કોડિંગ ઉમેરવા માટે કરી શકાય છે.
પ્રીટી પ્રિન્ટીંગ JSON માટે સામાન્ય ઉપયોગ કેસ શું છે?
પ્રીટી-પ્રિંટિંગ JSON નો ઉપયોગ સામાન્ય રીતે ડીબગ કરતી વખતે અથવા બિન-તકનીકી હિસ્સેદારોને JSON ડેટા પ્રસ્તુત કરતી વખતે થાય છે.
હું Node.js માં JSON ને કેવી રીતે પ્રીટી પ્રિન્ટ કરી શકું?
તમે Node.js માં HTTP સર્વર બનાવી શકો છો અને ઉપયોગ કરી શકો છો JSON.stringify JSON પ્રતિસાદોને ફોર્મેટ કરવા માટે.

JSON ફોર્મેટિંગ પર અંતિમ વિચારો

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

JavaScript માં માનવ વાંચનક્ષમતા માટે JSON ફોર્મેટિંગ