تنسيق JSON في جافاسكريبت: دليل شامل

JSON (JavaScript Object Notation) هو تنسيق خفيف الوزن لتبادل البيانات، يُستخدم بشكل متكرر في تطبيقات الويب لنقل البيانات بين الخوادم والعملاء. قد يكون من الصعب قراءة بيانات JSON الخام، خاصةً الكائنات المعقدة. لحسن الحظ، توفر JavaScript طرقًا مدمجة لتحسين قابلية قراءة JSON وإدارته.

محتويات

• تنسيق كائنات JSON باستخدام JSON.stringify()
• إعادة تنسيق سلاسل JSON باستخدام JSON.stringify() و JSON.parse()

تنسيق كائنات JSON باستخدام JSON.stringify()

تُعدُّ طريقة JSON.stringify() الأداة الأساسية لتحويل كائنات JavaScript إلى سلاسل JSON. بينما يكون الإخراج افتراضيًا مضغوطًا، فإن المعلمة الاختيارية space تتحكم في التنسيق. تحدد هذه المعلمة مستوى المسافة البادئة.

ضع في اعتبارك كائن JavaScript هذا:

const myDataObject = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    zip: "12345"
  },
  skills: ["JavaScript", "HTML", "CSS"]
};

لتنسيق هذا إلى سلسلة JSON قابلة للقراءة، استخدم JSON.stringify() مع معلمة space:

const formattedJson = JSON.stringify(myDataObject, null, 2); // مسافتان للبادئة
console.log(formattedJson);

هذا ينتج:

{
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
    "zip": "12345"
  },
  "skills": [
    "JavaScript",
    "HTML",
    "CSS"
  ]
}

الرقم 2 في JSON.stringify(myDataObject, null, 2) يحدد المسافة البادئة إلى مسافتين. اضبط هذه القيمة (مثلًا، 4، أو “t” للعلامات التبويب) حسب تفضيلاتك. null هو مُعبّر مكاني لدالة الاستبدال (التي تسمح بخيارات تنسيق أكثر تقدمًا، والتي سيتم مناقشتها في دروس أكثر تقدمًا).

إعادة تنسيق سلاسل JSON باستخدام JSON.stringify() و JSON.parse()

بالنسبة لسلاسل JSON ذات التنسيق الضعيف (مثلًا، سطر واحد)، اجمع بين JSON.parse() و JSON.stringify() لإعادة التنسيق.

مثال لسلسلة JSON غير مُنسّقة:

const unformattedJson = '{"name":"Jane Doe","age":25,"city":"New York"}';

أولًا، قم بتحليل السلسلة إلى كائن JavaScript:

const jsonObject = JSON.parse(unformattedJson);

ثم، قم بتنسيق الكائن مرة أخرى إلى سلسلة JSON باستخدام JSON.stringify():

const formattedJson = JSON.stringify(jsonObject, null, 4); // 4 مسافات للبادئة
console.log(formattedJson);

النتيجة:

{
    "name": "Jane Doe",
    "age": 25,
    "city": "New York"
}

هذه العملية المكونة من خطوتين تنظف بشكل فعال JSON ذي التنسيق الضعيف. تعامل دائمًا مع أخطاء JSON.parse() المحتملة (باستخدام كتلة try...catch) لمنع تعطل التطبيق غير المتوقع.

باختصار، توفر JSON.stringify()، مع أو بدون JSON.parse()، طريقة بسيطة لتنسيق بيانات JSON في JavaScript، مما يحسن بشكل كبير من قابلية قراءة التعليمات البرمجية.