JSON في JavaScript

ما هو JSON؟

JSON (JavaScript Object Notation) هي صيغة خفيفة لتبادل البيانات تم تصميمها لتكون سهلة القراءة والكتابة للبشر وسهلة الفهم للآلات. يتم استخدام JSON بشكل واسع في تطبيقات الويب لتبادل البيانات بين الخادم (Server) والعميل (Client).
تعتمد JSON على بنية “الأزواج المفتاحية والقيم” (Key-Value Pairs)، مما يجعلها مشابهة لبنية الكائنات في JavaScript، مع بعض الاختلافات.

---

لماذا نستخدم JSON؟

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

---

أهم الخصائص في JSON

1. دعم أنواع البيانات الأساسية: النصوص (Strings)، الأرقام (Numbers)، القيم المنطقية (Booleans)، الكائنات (Objects)، المصفوفات (Arrays)، والقيم الفارغة (null).
2. صيغة نصية بالكامل: تُكتب JSON دائمًا على هيئة نصوص، مما يسهل نقلها عبر الشبكات.
3. صيغة موحدة: يجب أن تكون المفاتيح دائمًا ضمن علامات تنصيص مزدوجة ("")، على عكس كائنات JavaScript.

مثال على JSON:

{
  "name": "أحمد",
  "age": 28,
  "isStudent": true,
  "skills": ["HTML", "CSS", "JavaScript"],
  "address": {
    "city": "القاهرة",
    "country": "مصر"
  }
}

---

استخدام JSON في JavaScript

1. تحويل الكائنات إلى JSON باستخدام JSON.stringify

تُستخدم الدالة JSON.stringify لتحويل كائنات JavaScript أو المصفوفات إلى صيغة JSON.

الصيغة:

JSON.stringify(value[, replacer[, space]]);

• value: الكائن أو المصفوفة التي تريد تحويلها.
• replacer: معامل اختياري لتحديد المفاتيح التي سيتم تضمينها.
• space: معامل اختياري يُستخدم لتنسيق الناتج.

مثال:

const user = {
  name: "أحمد",
  age: 28,
  isStudent: true,
};

const jsonString = JSON.stringify(user);
console.log(jsonString);
// الإخراج: {"name":"أحمد","age":28,"isStudent":true}

تنسيق الناتج باستخدام space

يمكنك تحسين تنسيق الناتج باستخدام معامل space لتحديد عدد المسافات المستخدمة للإزاحة:

const formattedJSON = JSON.stringify(user, null, 4);
console.log(formattedJSON);
/*
{
    "name": "أحمد",
    "age": 28,
    "isStudent": true
}
*/

---

2. تحويل JSON إلى كائن باستخدام JSON.parse

تُستخدم الدالة JSON.parse لتحويل النصوص بصيغة JSON إلى كائنات JavaScript.

الصيغة:

JSON.parse(text[, reviver]);

• text: النص بصيغة JSON الذي تريد تحويله.
• reviver: معامل اختياري يُستخدم لمعالجة القيم أثناء التحويل.

مثال:

const jsonString = '{"name":"أحمد","age":28,"isStudent":true}';

const user = JSON.parse(jsonString);
console.log(user.name); // أحمد
console.log(user.age);  // 28

---

استخدامات JSON في التطبيقات العملية

1. إرسال البيانات إلى الخادم

عند إرسال البيانات من العميل إلى الخادم، غالبًا ما يتم تحويل الكائنات إلى JSON باستخدام JSON.stringify:

const user = {
  name: "أحمد",
  age: 28,
};

fetch("https://example.com/api", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(user)
});

---

2. استقبال البيانات من الخادم

عند استلام البيانات من الخادم بصيغة JSON، يتم تحويلها إلى كائنات باستخدام JSON.parse:

fetch("https://example.com/api")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

---

مقارنة JSON بالكائنات في JavaScript

JSON	كائنات JavaScript
صيغة نصية تُستخدم لتبادل البيانات.	بنية بيانات تُستخدم داخل JavaScript.
المفاتيح يجب أن تكون محاطة بعلامات تنصيص مزدوجة.	المفاتيح لا تحتاج علامات تنصيص.
لا تدعم الوظائف.	يمكن أن تحتوي على وظائف.

مثال للتوضيح:

// JSON
const jsonString = `{
  "name": "أحمد",
  "age": 28
}`;

// كائن JavaScript
const jsObject = {
  name: "أحمد",
  age: 28,
  greet: function() {
    return "مرحبًا!";
  }
};

---

أمثلة متقدمة على استخدام JSON

1. معالجة بيانات متعددة

افترض أن لديك قائمة من المستخدمين بصيغة JSON:

const jsonString = `[
  {"id": 1, "name": "أحمد", "age": 28},
  {"id": 2, "name": "منى", "age": 24},
  {"id": 3, "name": "سعيد", "age": 32}
]`;

const users = JSON.parse(jsonString);

users.forEach(user => {
  console.log(`الاسم: ${user.name}, العمر: ${user.age}`);
});

---

2. استخدام JSON مع المصفوفات

const products = [
  { id: 1, name: "لابتوب", price: 1500 },
  { id: 2, name: "هاتف", price: 800 }
];

const productsJSON = JSON.stringify(products);
console.log(productsJSON);
// الإخراج: [{"id":1,"name":"لابتوب","price":1500},{"id":2,"name":"هاتف","price":800}]

تحليل البيانات المستلمة:

const jsonResponse = `[{"id":1,"name":"لابتوب","price":1500},{"id":2,"name":"هاتف","price":800}]`;

const productsArray = JSON.parse(jsonResponse);
productsArray.forEach(product => {
  console.log(`المنتج: ${product.name}, السعر: ${product.price}`);
});

---

فوائد تعلم JSON

1. التفاعل مع APIs: معظم واجهات برمجة التطبيقات (APIs) تعتمد على JSON لتبادل البيانات.
2. تطوير التطبيقات الحديثة: JSON أساسي في تقنيات مثل React، Angular، وNode.js.
3. زيادة الكفاءة: فهم JSON يجعل التعامل مع البيانات أكثر سهولة وكفاءة.

---

الخاتمة

يعد JSON أحد الأدوات الأساسية في تطوير تطبيقات الويب الحديثة. سواء كنت تعمل على تطوير تطبيق يعتمد على واجهات API، أو تحتاج إلى تخزين البيانات في صيغة قياسية، فإن تعلم JSON واستخدامه بفعالية يُعد مهارة أساسية لأي مبرمج.