تنسيق JSON لسهولة القراءة البشرية في JavaScript

جعل JSON أكثر قابلية للقراءة للبشر

يعد العمل مع JSON مهمة شائعة للمطورين، خاصة عند التعامل مع واجهات برمجة التطبيقات وتخزين البيانات. ومع ذلك، قد يكون من الصعب قراءة وفهم JSON الخام بسبب افتقاره إلى التنسيق. بالنسبة لأولئك الذين يتطلعون إلى تسهيل الوصول إلى JSON، يعد تطبيق المسافة البادئة والمسافات البيضاء المناسبة أمرًا بالغ الأهمية.

في هذه المقالة، سنستكشف طرقًا مختلفة لطباعة JSON بشكل جميل باستخدام JavaScript. لن نغطي تقنيات المسافة البادئة والمسافات البيضاء الأساسية فحسب، بل سنغطي أيضًا كيفية تحسين إمكانية القراءة باستخدام الألوان وأنماط الخطوط. سيساعدك هذا الدليل على تحويل JSON الخام إلى تنسيق صديق للإنسان.

شرح تفصيلي لنصوص التنسيق JSON

النص الأول هو حل JavaScript للواجهة الأمامية مصمم لطباعة JSON بشكل جميل عن طريق إضافة مسافة بادئة وتطبيق الترميز اللوني. يبدأ البرنامج النصي بوظيفة تسمى prettyPrintJSON، والذي يأخذ كائن JSON كمدخل. داخل هذه الوظيفة، يتم تحويل كائن JSON إلى سلسلة ذات مسافة بادئة بمسافتين باستخدام التابع JSON.stringify(json, null, 2) طريقة. وهذا يضمن أن JSON أكثر قابلية للقراءة عن طريق إضافة المسافة البيضاء اللازمة. لتعزيز إمكانية القراءة بشكل أكبر، يستخدم البرنامج النصي ملف .replace(/(".*?"|null|true|false|\d+)/g, ...) طريقة مع تعبير عادي لمطابقة عناصر JSON محددة مثل السلاسل والأرقام والقيم المنطقية والقيم الخالية. يتم تغليف كل عنصر مطابق بـ علامة مع فئة مقابلة، مما يسمح لـ CSS بتطبيق ألوان مختلفة على كل نوع بيانات. يتم بعد ذلك إدراج سلسلة JSON المنسقة في نص المستند باستخدام document.body.innerHTML.

البرنامج النصي الثاني هو حل خلفي يستخدم Node.js لطباعة JSON بشكل جميل. يقوم هذا البرنامج النصي بإنشاء خادم HTTP به http.createServer(...)، الذي يستمع للطلبات الواردة على منفذ محدد باستخدام .listen(). عند تلقي طلب، يستجيب الخادم بكائن JSON منسق لسهولة القراءة. يتم تحويل كائن JSON إلى سلسلة ذات مسافة بادئة باستخدام JSON.stringify(json, null, 2). تم تعيين رأس الاستجابة للإشارة إلى أن نوع المحتوى هو JSON res.writeHead(200, { 'Content-Type': 'application/json' }). أخيرًا، يتم إرسال سلسلة JSON المطبوعة بشكل جميل إلى العميل باستخدام res.end(). يسمح هذا البرنامج النصي للمطورين برؤية مخرجات JSON المنسقة بشكل جيد في متصفحهم بسرعة من خلال الانتقال ببساطة إلى عنوان الخادم.

// 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>`;

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 باستخدام أدوات إضافية

بينما ركزت الحلول السابقة على أساليب JavaScript للواجهة الأمامية والخلفية لطباعة JSON بشكل جميل، هناك أدوات وتقنيات أخرى يمكنها تحسين إمكانية قراءة JSON. أحد الأساليب الشائعة هو استخدام ملحقات المتصفح أو الأدوات عبر الإنترنت. يمكن للإضافات مثل JSONView أو JSON Formatter تنسيق JSON تلقائيًا في المتصفح، وإضافة المسافة البادئة وترميز الألوان لتحسين إمكانية القراءة. تعتبر هذه الأدوات مفيدة بشكل خاص للمطورين الذين يتفاعلون بشكل متكرر مع واجهات برمجة التطبيقات ويحتاجون إلى تحليل بيانات JSON وفهمها بسرعة دون كتابة تعليمات برمجية إضافية.

تتضمن الطريقة المفيدة الأخرى الاستفادة من المكتبات مثل Highlight.js أو Prism.js، والتي تم تصميمها للتعامل مع تمييز بناء الجملة لمختلف لغات البرمجة، بما في ذلك JSON. يمكن دمج هذه المكتبات في تطبيقات الويب لتنسيق بيانات JSON وإبرازها ديناميكيًا. باستخدام Highlight.js، يمكنك تطبيق سمات محددة مسبقًا على سلاسل JSON، مما يسهل التمييز بين أنواع البيانات المختلفة. بالإضافة إلى ذلك، يمكن أن يؤدي دمج هذه المكتبات في سير عمل التطوير الخاص بك إلى توفير الوقت وضمان الاتساق في تنسيق JSON عبر المشاريع المختلفة.