كيفية عرض 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: 101000\n  }\n};\n\n// بدون تنسيق - سطر واحد\nconsole.log(JSON.stringify(user));\n// {"name":"أليكسي","age":30,"skills":["JavaScript","Python","SQL"],"address":{"city":"موسكو","zip":101000}}\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": 101000\n  }\n}\n

لاحظ: المسافات البادئة بمقدار مسافتين جعلت البنية قابلة للقراءة. يمكن استخدام 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; // استبعاد