ما هو ملف JSON؟ شرح عملي مع أمثلة JavaScript

ما هو ملف JSON؟

يُعد JSON اختصاراً لعبارة JavaScript Object Notation، وهو تنسيق شائع لتبادل البيانات بين الأنظمة والتطبيقات. يحمل هذا النوع من الملفات الامتداد .json، وتُكتب البيانات داخله بصيغة key:value، وهي صيغة تشبه كثيراً الكائنات في لغة JavaScript.

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

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

البنية الأساسية لملف JSON

في أبسط صورة، يتكون JSON من أزواج مفتاح:قيمة، ويمكن أن يحتوي على قيم نصية أو رقمية أو منطقية أو مصفوفات أو كائنات متداخلة.

{
  "key1": "value1",
  "key2": "value2",
  "key3": "value3",
  "key4": 7,
  "key5": null,
  "favFriends": ["Kolade", "Nithya", "Dammy", "Jack"],
  "favPlayers": {
    "one": "Kante",
    "two": "Hazard",
    "three": "Didier"
  }
}

يوضح المثال السابق أن ملف JSON يمكن أن يجمع بين أكثر من نوع بيانات داخل بنية واحدة منظمة وسهلة القراءة.

أنواع البيانات المدعومة في JSON

يدعم JSON مجموعة محددة من أنواع البيانات، وهذا ما يجعله بسيطاً وموحداً بين لغات البرمجة المختلفة.

الأنواع المقبولة

• الكائنات Object
• المصفوفات Array
• النصوص String
• الأرقام Number
• القيم المنطقية Boolean مثل true وfalse
• القيمة الفارغة null

الأنواع غير المدعومة

لا يدعم JSON بعض الأنواع الشائعة في لغات البرمجة، مثل:

• undefined
• function
• Date

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

امتدادات مبنية على JSON

هناك تنسيقات موسعة تعتمد على JSON ولكنها تضيف دعماً لأنواع أخرى من البيانات، ومن أبرزها:

• GeoJSON: يُستخدم لتمثيل البيانات الجغرافية والمكانية.
• BSON: يُستخدم في MongoDB ويدعم أنواعاً إضافية مثل التواريخ والطوابع الزمنية والتعابير النمطية.

قواعد كتابة JSON بشكل صحيح

يتميز JSON بصرامة كبيرة في الصياغة، ولذلك فإن أي خطأ بسيط في التنسيق قد يجعل الملف غير صالح للاستخدام. وإذا كنت تستعمل محرراً برمجياً مزوداً بأداة فحص مثل linter، فغالباً سيكتشف الخطأ مباشرة.

أهم قواعد الصياغة

• يجب إحاطة البيانات بين أقواس معقوفة { } عند تمثيلها ككائن.
• إذا كانت البيانات على شكل مصفوفة، فيجب وضعها بين أقواس مربعة [ ].
• علامات الاقتباس الأحادية ' ' غير مسموح بها.
• كل مفتاح يجب أن يكون فريداً ومكتوباً بين اقتباسين مزدوجين.
• الأرقام لا تُكتب بين اقتباسين مزدوجين، وإلا ستُعامل كنصوص.
• القيمة null لا توضع بين اقتباسين.
• القيم المنطقية المسموح بها هي true أو false فقط.
• كل زوج key:value يجب أن يتبعه فاصلة، باستثناء العنصر الأخير.
• إذا احتوت المصفوفة على كائنات متعددة، فيجب الفصل بينها بفواصل أيضاً.

لماذا يُستخدم JSON بكثرة في API؟

ظهر JSON لتلبية الحاجة إلى نقل البيانات من الخادم إلى المتصفح بسرعة وبصيغة خفيفة وواضحة. ولهذا السبب أصبح الخيار الافتراضي تقريباً في معظم واجهات البرمجة الحديثة APIs.

الميزة الأساسية هنا أن JSON مستقل نسبياً عن لغة البرمجة، أي أن بإمكان JavaScript وPython وPHP وغيرها قراءة البيانات نفسها والتعامل معها بسهولة عبر مكتبات وأدوات جاهزة.

كيف تصل بيانات JSON إلى المتصفح؟

لا تُستخدم بيانات JSON الخام داخل المتصفح دائماً بصورتها النصية المباشرة، بل يتم غالباً تحويلها إلى كائنات أو سلاسل نصية حسب الحاجة.

في JavaScript

• تقوم الدالة JSON.parse() بتحويل نص JSON إلى كائن يمكن التعامل معه برمجياً.
• تقوم الدالة JSON.stringify() بتحويل الكائن إلى نص بصيغة JSON.

في Python

• تستخدم الدالة json.loads() لتحويل النص إلى بنية بيانات قابلة للاستخدام.
• تستخدم الدالة json.dumps() لتحويل الكائن إلى نص JSON.

فهم هاتين العمليتين مهم جداً، لأن التعامل مع البيانات بين الخادم والواجهة الأمامية يعتمد عليهما بشكل مباشر.

استخدام JSON.stringify() لعرض البيانات في المتصفح

تعيد الدالة JSON.stringify() تمثيلاً نصياً للبيانات بصيغة JSON. ويمكنك الاستفادة منها مع أدوات التعامل مع DOM لعرض البيانات داخل الصفحة.

كود HTML

<h2>Here is the Data from the JSON:</h2>
<div id="json"></div>

كود JavaScript

const JSONData = {
  "key1": "value1",
  "key2": "value2",
  "key3": "value3",
  "key4": 7,
  "key5": null,
  "favFriends": ["Kolade", "Nithya", "Dammy", "Jack"],
  "favPlayers": {
    "one": "Kante",
    "two": "Hazard",
    "three": "Didier"
  }
};

const JSONString = JSON.stringify(JSONData);
const JSONDisplay = document.querySelector("#json");
JSONDisplay.innerHTML = JSONString;

في هذا المثال، قمنا بتعريف البيانات داخل متغير باسم JSONData، ثم استخدمنا الدالة JSON.stringify() لتحويلها إلى سلسلة نصية. بعد ذلك جرى تحديد العنصر الذي يحمل المعرّف #json عبر document.querySelector()، ثم عرض النتيجة باستخدام الخاصية innerHTML.

استخدام JSON.parse() لتحويل النص إلى كائن

إذا كانت لديك بيانات بصيغة نصية من JSON، فستحتاج غالباً إلى تحويلها إلى كائن باستخدام JSON.parse() حتى تتمكن من الوصول إلى القيم بسهولة.

كود HTML

<h2>Here is the Data from the JSON:</h2>
<div id="json"></div>

كود JavaScript

const JSONData = '{"name": "Kolade", "favFriends": ["Kolade", "Nithya", "Rocco", "Jack"], "from": "Africa"}';

try {
  const JSONString = JSON.parse(JSONData);
  const JSONDisplay = document.querySelector("#json");
  JSONDisplay.innerHTML = JSONString.name + ", [" + JSONString.favFriends + "], " + JSONString.from;
} catch (error) {
  console.log("Cannot parse the JSON Data");
}

هنا تم تخزين بيانات JSON كسلسلة نصية داخل المتغير JSONData. ثم جرى استخدام JSON.parse() لتحويلها إلى كائن يمكن الوصول إلى خصائصه مثل name وfavFriends وfrom.

كما يوضح المثال أهمية استخدام try...catch عند تحليل البيانات، لأن أي خطأ في تنسيق JSON سيؤدي إلى فشل عملية التحويل.

أفضل الممارسات عند التعامل مع JSON

• تحقق دائماً من صحة البنية قبل إرسال البيانات أو تخزينها.
• استخدم أدوات التحقق أو المحررات التي تكشف أخطاء الصياغة مبكراً.
• لا تخلط بين كائنات JavaScript وبيانات JSON النصية، فلكل منهما استخدام مختلف.
• اعتمد JSON.parse() عند استقبال النصوص، وJSON.stringify() عند الحاجة إلى الإرسال أو التخزين.
• تعامل مع الأخطاء المتوقعة عبر try...catch، خاصة عند قراءة بيانات قادمة من مصدر خارجي.

لماذا تفوق JSON على XML في كثير من المشاريع؟

في الوقت الحالي، تعتمد معظم خدمات API على JSON بدلاً من XML لعدة أسباب عملية:

• أخف حجماً وأسهل في النقل.
• أبسط في القراءة والفهم للمطور.
• يتكامل بسهولة مع JavaScript داخل المتصفح.
• مدعوم على نطاق واسع في مختلف لغات البرمجة.

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

الخلاصة التقنية

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