مقدمة
في الدرس السابق تعرفنا على Fetch API، وكيف يمكن استخدام fetch() لإرسال الطلبات وجلب البيانات من الخوادم.
لكن عندما تصل البيانات من الخادم، نحتاج إلى صيغة منظمة نستطيع قراءتها ومعالجتها.
ومن أشهر الصيغ المستخدمة لهذا الغرض JSON.
---
ما هو JSON؟
JSON اختصار لـ JavaScript Object Notation.
وهي صيغة نصية تستخدم لتخزين البيانات وتبادلها بين التطبيقات والخوادم.
ورغم ارتباط اسمها بـ JavaScript، فإن JSON ليست خاصة بـ JavaScript، ويمكن استخدامها مع العديد من لغات البرمجة.
---
شكل بيانات JSON
تعتمد JSON على تنظيم البيانات في شكل أزواج من:
مفتاح وقيمة (Key-Value)
ويمكن أن تحتوي البيانات على:
نصوص
أرقام
قيم منطقية
مصفوفات
كائنات
قيمة null
وهذا يجعلها مناسبة لتمثيل أنواع مختلفة من البيانات.
---
JSON وJavaScript
تتشابه JSON مع كائنات JavaScript، لكنهما ليسا الشيء نفسه.
JSON عبارة عن نص منسق وفق قواعد محددة، بينما كائن JavaScript هو قيمة يمكن للبرنامج التعامل معها مباشرة.
لذلك نحتاج أحيانًا إلى تحويل JSON إلى كائن JavaScript والعكس.
---
تحويل JSON إلى JavaScript
توفر JavaScript الدالة:
JSON.parse()
وتستخدم لتحويل نص JSON إلى قيمة يمكن لبرنامج JavaScript التعامل معها.
وهذا مفيد عند استقبال البيانات من خادم.
---
تحويل JavaScript إلى JSON
توفر JavaScript الدالة:
JSON.stringify()
وتستخدم لتحويل قيمة JavaScript إلى نص بصيغة JSON.
وهذا مفيد عندما نريد إرسال البيانات إلى خادم.
---
JSON وFetch API
غالبًا ما يتم استخدام JSON مع fetch().
فعند إرسال طلب إلى API، قد يعيد الخادم استجابة تحتوي على بيانات JSON.
بعد استقبال الاستجابة، يمكن تحويلها إلى بيانات JavaScript واستخدامها داخل التطبيق.
---
لماذا تستخدم JSON بكثرة؟
تتميز JSON بأنها:
بسيطة
منظمة
سهلة القراءة
خفيفة نسبيًا
مدعومة في معظم لغات البرمجة
ولهذا أصبحت من أكثر الصيغ انتشارًا في تطوير تطبيقات الويب.
---
استخدام JSON في المشاريع
تستخدم JSON في العديد من المجالات، مثل:
APIs
تطبيقات الويب
تطبيقات الهواتف
تخزين الإعدادات
تبادل البيانات بين الخوادم والتطبيقات
---
JSON وAPIs
تعتمد العديد من واجهات البرمجة API على JSON لتبادل البيانات.
مثلًا يمكن لخادم إرسال معلومات المستخدم أو المنتجات أو الأخبار في صورة JSON، ثم يقوم التطبيق بقراءة هذه البيانات وعرضها للمستخدم.
---
أخطاء شائعة عند المبتدئين
من الأخطاء الشائعة:
الخلط بين JSON وكائن JavaScript
محاولة التعامل مع نص JSON وكأنه كائن مباشرة
استخدام JSON.parse() على بيانات ليست JSON صحيحة
نسيان استخدام JSON.stringify() عند الحاجة إلى إرسال بيانات بصيغة JSON
---
ملخص الدرس
تعرفنا في هذا الدرس على JSON، وعرفنا أنها صيغة شائعة لتخزين وتبادل البيانات بين التطبيقات والخوادم، كما تعرفنا على JSON.parse() لتحويل JSON إلى بيانات JavaScript، وJSON.stringify() لتحويل بيانات JavaScript إلى JSON.
في الدرس الرابع والثلاثون سنتعرف على DOM في JavaScript، وسنفهم كيف يمكن للبرنامج الوصول إلى عناصر صفحة الويب وتغيير محتواها وتنسيقها والتفاعل معها.