تعرف على JSON في لغة JavaScript

يا هلا! بما إنك بتشتغل مع JavaScript، لازم تكون صديق حميم لـ JSON. خلنا ندخل بالموضوع على طول ونشوف إيش هو وكيف نتعامل معاه.

إيش هو JSON بالضبط؟

JSON اختصار لـ JavaScript Object Notation. ببساطة، هو طريقة خفيفة وسهلة لتبادل البيانات بين الأنظمة المختلفة. تخيل إنك عندك بيانات تبي ترسلها من سيرفر للبراوزر، أو العكس، أو حتى تحفظها بشكل مرتب. JSON هو الحل الأمثل لهالشيء.

شكله يشبه كائنات JavaScript (الأوبجكتس) بالضبط، وهذا اللي يخليه ممتاز للتعامل مع JS. يتكون من أزواج مفتاح: قيمة (key: value)، والمفاتيح دايمًا تكون سلاسل نصية (strings) محاطة بعلامات اقتباس مزدوجة.

هذا مثال بسيط لشكل بيانات JSON:

{
  "اسم": "أحمد",
  "العمر": 30,
  "هل_مبرمج": true,
  "المهارات": ["JavaScript", "SQL", "Python"],
  "العنوان": {
    "المدينة": "الرياض",
    "الرمز_البريدي": "12345"
  },
  "المشاريع_المكتملة": null
}

لاحظ إن القيم ممكن تكون:

• سلاسل نصية ("نص")
• أرقام (123, 3.14)
• قيم منطقية (true, false)
• كائنات (objects) مثل كائنات JavaScript ({ ... })
• مصفوفات (arrays) ([ ... ])
• قيمة فارغة (null)

ليش JSON بطل لـ JavaScript؟

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

كيف تتعامل مع JSON في JavaScript؟

فيه دالتين رئيسيتين لازم تعرفهم وتتقنهم:

1. تحويل نص JSON إلى كائن JavaScript: JSON.parse()

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

const jsonString = '{"اسم": "ليلى", "العمر": 25, "المدينة": "جدة"}';

// تحويل نص JSON إلى كائن JavaScript
const userObject = JSON.parse(jsonString);

console.log(userObject.اسم);    // الناتج: ليلى
console.log(userObject.العمر);   // الناتج: 25

// لو النص اللي جاي لك مو JSON صحيح، راح يطلع خطأ!
// عشان كذا، الأفضل دائمًا تستخدم try...catch
try {
  const invalidJson = '{اسم: "سارة", "العمر": 22}'; // المفاتيح لازم تكون بين علامات اقتباس مزدوجة
  const parsedObject = JSON.parse(invalidJson);
} catch (error) {
  console.error("خطأ في تحليل JSON:", error.message);
}

2. تحويل كائن JavaScript إلى نص JSON: JSON.stringify()

لو عندك كائن JavaScript وتبغى ترسله لسيرفر، أو تخزنه في الـ Local Storage (اللي ما يقبل إلا نصوص)، تحتاج تحوله إلى نص JSON. هنا الدالة JSON.stringify() تسوي لك الشغل.

const product = {
  id: 101,
  name: "لابتوب",
  price: 4500,
  colors: ["أسود", "فضي"]
};

// تحويل كائن JavaScript إلى نص JSON
const jsonProductString = JSON.stringify(product);

console.log(jsonProductString);
// الناتج: {"id":101,"name":"لابتوب","price":4500,"colors":["أسود","فضي"]}

// تقدر تضيف وسيط ثاني وثالث عشان التنسيق والقيم اللي تبيها تظهر
// الوسيط الثالث (space) يضيف مسافات لتسهيل القراءة
const prettyJsonString = JSON.stringify(product, null, 2);
console.log(prettyJsonString);
/* الناتج:
{
  "id": 101,
  "name": "لابتوب",
  "price": 4500,
  "colors": [
    "أسود",
    "فضي"
  ]
}
*/

استخدامات JSON الشائعة

• استقبال وإرسال البيانات من APIs: أغلب الـ APIs اليوم تستخدم JSON لتبادل البيانات.
• تخزين البيانات في الـ Local Storage: مثل إعدادات المستخدم أو سلة التسوق.
• ملفات الإعدادات: كثير من المشاريع تستخدم JSON لملفات الإعدادات.

ملاحظات سريعة مهمة

الفرق بين JSON وكائن JavaScript العادي: في JSON، المفاتيح لازم تكون سلاسل نصية ومحاطة بعلامات اقتباس مزدوجة. في كائنات JavaScript، ممكن تكون بدون اقتباسات إذا كانت أسماء متغيرة صالحة ({ key: 'value' }).

لا يوجد تعليقات في JSON: ما تقدر تحط تعليقات (// أو /* */) داخل ملف JSON.

البيانات المدعومة: JSON يدعم فقط السلاسل النصية، الأرقام، الكائنات، المصفوفات، القيم المنطقية (true/false)، و null. ما يدعم الدوال (functions) أو التواريخ (Dates) مباشرة (تحتاج تحولها لنصوص قبل التحويل).

وبكذا، نكون غطينا أساسيات JSON وكيف تتعامل معاه في JavaScript. بسيط ومفيد جدًا، صح؟ يلا، طبق اللي تعلمته وشوف كيف يسهل عليك الشغل!

← السابقالفهرسالتالي →