العمل مع JSON
العمل مع JSON (JavaScript Object Notation) يمثل حجر الأساس لتبادل البيانات بين الخادم (Server) والمتصفح (Client) في تطبيقات الويب الحديثة. JSON هو تنسيق نصي خفيف الوزن يسهل قراءته وكتابته لكل من البشر والآلات، ويُستخدم في كل أنواع المواقع مثل الأخبار، التجارة الإلكترونية، الصفحات الشخصية، وحتى المواقع الحكومية. تخيل أنك تبني مكتبة (مثل building a library)، حيث يمثل كل كتاب (Book) عنصرًا في JSON يحتوي على معلومات دقيقة مثل العنوان، المؤلف، سنة النشر. باستخدام JSON، يمكنك تنظيم البيانات بطريقة منظمة، تسهيل الوصول إليها، ونقلها بين مكونات موقعك بشكل فعال.
في موقع إخباري، يمكنك استخدام JSON لتخزين الأخبار وعرضها ديناميكيًا. في التجارة الإلكترونية، يمثل المنتجات، الأسعار، والمخزون. أما الصفحات الشخصية، فيمكن تخزين إعدادات المستخدم والمفضلات. المواقع الحكومية تستخدم JSON لتبادل البيانات بين الأنظمة المختلفة بشكل آمن وموثوق.
في هذا الدرس، ستتعلم كيفية إنشاء JSON، تحويله من وإلى JavaScript (Parsing وStringifying)، التعامل مع الهياكل المعقدة، والتعامل مع الأخطاء المحتملة. سنربط كل مفهوم بأمثلة عملية، تمامًا كما لو كنت تزين غرفة (decorating a room) حيث كل عنصر في مكانه المناسب، أو كما لو كنت تكتب رسالة (writing a letter) تحتاج لدقة في الصياغة.
مثال أساسي
javascript// إنشاء مثال أساسي للتعامل مع JSON في موقع إخباري
const newsArticle = {
"title": "أحدث الأخبار التقنية",
"author": "محرر الموقع",
"date": "2025-08-29",
"tags": \["تكنولوجيا", "برمجة", "JavaScript"]
};
// تحويل كائن JavaScript إلى JSON
const jsonString = JSON.stringify(newsArticle);
// تحويل JSON إلى كائن JavaScript
const parsedArticle = JSON.parse(jsonString);
console.log(parsedArticle.title); // عرض عنوان المقالفي الكود أعلاه، بدأنا بتعريف كائن JavaScript باسم newsArticle يحتوي على خصائص متعددة مثل العنوان، المؤلف، التاريخ، والكلمات المفتاحية. هذه البنية تمثل مقالة إخبارية نموذجية، مشابهة لتجميع كتب في مكتبة منظمة.
بعد ذلك، استخدمنا الدالة JSON.stringify() لتحويل الكائن إلى نص JSON. هذه الخطوة ضرورية عند إرسال البيانات إلى الخادم أو تخزينها في localStorage، حيث تحتاج إلى شكل نصي يمكن نقله بسهولة.
ثم استخدمنا JSON.parse() لإعادة تحويل النص إلى كائن JavaScript يمكننا التعامل معه برمجيًا. هذه العملية تسمح لنا بالوصول إلى الخصائص الفردية مثل parsedArticle.title، تمامًا كما لو كنت تفتح كتابًا لاستخراج المعلومات المطلوبة.
هذا المثال يوضح أساسيات التعامل مع JSON، لكنه أيضًا يفتح الباب للتطبيقات الأكثر تعقيدًا مثل التعامل مع مصفوفات من المقالات، إضافة أو حذف خصائص، أو التعامل مع بيانات ديناميكية من API خارجي. من المهم أن تتذكر أن JSON لا يدعم الدوال (Functions) أو القيم غير النصية مثل undefined، ويجب الانتباه لهذه التفاصيل عند بناء التطبيقات المعقدة.
مثال عملي
javascript// مثال عملي لموقع تجارة إلكترونية
const products = \[
{ "id": 1, "name": "حاسوب محمول", "price": 2500, "stock": 10 },
{ "id": 2, "name": "هاتف ذكي", "price": 1200, "stock": 25 },
{ "id": 3, "name": "سماعات", "price": 150, "stock": 50 }
];
// تحويل المنتجات إلى JSON قبل الإرسال للخادم
const productsJSON = JSON.stringify(products);
// استلام JSON وتحويله إلى كائنات للتعامل معها
const parsedProducts = JSON.parse(productsJSON);
// عرض أسماء المنتجات المتوفرة
parsedProducts.forEach(product => {
if (product.stock > 0) {
console.log(`المنتج: ${product.name}, السعر: ${product.price}`);
}
});في المثال العملي، استخدمنا مصفوفة من الكائنات لتمثيل منتجات متجر إلكتروني، كل كائن يحتوي على معرف، اسم، سعر، ومخزون. هذا يشبه ترتيب رفوف في متجر، حيث لكل منتج مكانه وبياناته الخاصة.
التحويل إلى JSON باستخدام JSON.stringify() يسمح لنا بإرسال البيانات إلى الخادم أو تخزينها محليًا. بعد استقبال البيانات، نستخدم JSON.parse() لإعادتها لكائنات JavaScript قابلة للتعامل معها.
ثم استخدمنا طريقة forEach للتكرار على المنتجات، مع شرط stock > 0 لضمان عرض المنتجات المتوفرة فقط، تمامًا كما لو كنت ترتب الكتب على الرف حسب توافرها. هذا المثال يوضح كيفية التعامل مع بيانات حقيقية، دمجها في تطبيق عملي، والتأكد من أن كل عملية تحويل للبيانات دقيقة وآمنة.
الأخطاء الشائعة تشمل محاولة تخزين وظائف أو قيم غير مدعومة داخل JSON، مما يسبب أخطاء عند التحويل. ثانياً، إهمال التحقق من البيانات القادمة من الخادم، مما يؤدي إلى مشاكل أمنية أو توقف التطبيق. ثالثًا، التكرار غير الضروري في تحويل JSON يؤدي إلى استهلاك غير مطلوب للذاكرة والأداء.
للتصحيح، يمكن استخدام أدوات مثل console.log، أو JSONLint للتحقق من صحة الصياغة. أيضًا، يمكن اختبار البيانات بشكل دوري عند تطوير التطبيقات الكبيرة لتجنب مشاكل الأداء أو فقدان المعلومات.
📊 مرجع سريع
| Property/Method | Description | Example |
|---|---|---|
| JSON.stringify() | تحويل كائن JavaScript إلى نص JSON | JSON.stringify({name:"أحمد"}) |
| JSON.parse() | تحويل نص JSON إلى كائن JavaScript | JSON.parse('{"name":"أحمد"}') |
| Array.forEach() | التكرار على عناصر المصفوفة | arr.forEach(item=>console.log(item)) |
| try...catch | معالجة الأخطاء عند التحويل | try{JSON.parse(str)}catch(e){console.log(e)} |
| Object.keys() | الحصول على أسماء الخصائص | Object.keys({a:1,b:2}) // \["a","b"] |
ملخص الدرس: العمل مع JSON هو أداة أساسية لكل مطور ويب يتعامل مع البيانات الديناميكية. تعلمنا كيفية إنشاء JSON، تحويله من وإلى JavaScript، التعامل مع المصفوفات والكائنات، والتأكد من سلامة البيانات قبل استخدامها.
تطبيق هذه المهارات يربط مباشرة مع التلاعب بـ DOM لعرض البيانات على صفحات HTML، وكذلك التواصل مع API لخوادم خلفية. الدروس التالية يمكن أن تشمل استخدام Fetch API لجلب البيانات، التعامل مع AJAX، وتحسين الأداء عند معالجة مجموعات كبيرة من البيانات.
الممارسة المستمرة، مثل بناء مشاريع صغيرة لمواقع الأخبار أو المتاجر الإلكترونية، ستساعد على ترسيخ المفاهيم وتسهيل التعلم المتقدم. تذكر دائمًا أن الدقة والتنظيم في JSON يشبه ترتيب كتب مكتبة أو تصميم غرفة، كل عنصر في مكانه الصحيح لتسهيل الوصول والاستخدام.
🧠 اختبر معرفتك
اختبر معرفتك
اختبر فهمك لهذا الموضوع بأسئلة عملية.
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى